如何在每次使用javascript在其他页面上单击按钮时自动增加数字

问题描述：

我有一个使用HTML和CSS创建的表单，此表单不适用于提交任何数据，实际上它仅用于打印目的。如何在每次使用javascript在其他页面上单击按钮时自动增加数字

此表单在左上角有一个输入字段，用于放置唯一的6位数字以唯一标识每个表单。

在主页上，有一个链接到该表单页面的按钮链接，我想增加序列号，默认000000每次单击此表单页面的链接按钮时单击。

的index.html：

<a href="pages/form-1.html"></a>

形式，1.HTML：

<input class="serial-no" type="text" name="fname" placeholder="000000" maxlength="6" size="6">

您将需要使用一些PHP，记录按钮有多少点击（哪些将被发送到数据库）从这里您可以获取该数据并将其显示为数字。 –

因此，您将重定向到* form-1.html *，而不是在弹出窗口中打开它？无论如何，你应该熟悉'localStorage'（和'postMessage（）'如果使用弹出窗口），以便在不使用后端的情况下实现这一点。 – zvona

由于我是新来的PHP和JavaScript，请你能帮助我一个例子将不胜感激。 –

答

你有两个解决方案：

使用Cookie
USI NG浏览器会话

注：请评论另一种解决方案，同时使用一种解决方案

主page.html中

<html> 
    <head> 
     <title>Main Page</title> 
    </head> 
    <body> 
     <a href="form-1.html">Print</a> 
    </body> 
</html>

形式，1.HTML

<html> 
    <head> 
     <title>Form Printing</title> 
    </head> 
    <body onload="loadNextSeqToForm()"> 
     <form> 
      <input id="serial" class="serial-no" type="text" name="fname" placeholder="000000" maxlength="6" size="6"> 
     </form> 
    </body> 
    <script> 
     /* 
     //Solution 1: Using Cookies 
     function getNextSeq() { 
      var decodedCookie = decodeURIComponent(document.cookie); 
      var ca = decodedCookie.split(';'); 
      for(var i = 0; i <ca.length; i++) { 
       var c = ca[i]; 
       while (c.charAt(0) == ' ') { 
        c = c.substring(1);//Trim the empty space if exists 
       } 
       if (c.indexOf("next") == 0) { 
       var fragments = c.split("="); 
       if(fragments.length == 2 && !isNaN(fragments[1])) { 
        return parseInt(fragments[1]) + 1; 
       } 
       } 
      } 
      return "1";//default 
     } 
     function loadNextSeqToForm() { 
      var nextValue = getNextSeq(); 
      document.cookie = "next=" + nextValue + ";"; 
      document.getElementById("serial").value = formatToSixCharacters(nextValue); 
     } 

     function formatToSixCharacters(num) { 
      var numStr = num + ""; 
      if(numStr.length < 6) { 
       var zeros = 6 - numStr.length; 
       for(var i = 1; i <= zeros; i++) { 
        numStr = "0" + numStr; 
       } 
      } 
      return numStr; 
     } 
     */ 

     //Solution 2: Using Session 
     function loadNextSeqToForm() { 
      var nextValue = sessionStorage.getItem("next") != null? sessionStorage.getItem("next") : 1; 
      document.getElementById("serial").value = formatToSixCharacters(nextValue); 
      sessionStorage.setItem("next", parseInt(nextValue) + 1) 
     } 

     function formatToSixCharacters(num) { 
      var numStr = num + ""; 
      if(numStr.length < 6) { 
       var zeros = 6 - numStr.length; 
       for(var i = 1; i <= zeros; i++) { 
        numStr = "0" + numStr; 
       } 
      } 
      return numStr; 
     } 
    </script> 
</html>

++代码使用PHP和MySQL

主page.html中

<html> 
    <head> 
     <title>Main Page</title> 
    </head> 
    <body> 
     <!-- Note this time we have to use PHP file reference --> 
     <a href="form-1.php">Print</a> 
    </body> 
</html>

形状1.PHP

<?php 
session_start(); 
function getNextSequnceNumber() { 
    $servername = "localhost"; 
    $username = "root"; 
    $password = ""; 
    $dbname = "orders"; 
    $nextSeq = 1; 
    $conn = new mysqli($servername, $username, $password, $dbname); 
    if (!$conn) { 
     die("Connection failed: " . mysqli_connect_error()); 
    } 
    $sql = "SELECT next_seq FROM order_sequence"; 
    $result = $conn->query($sql); 
    if ($result->num_rows > 0) { 
     if($row = $result->fetch_assoc()) { 
      $nextSeq = $row["next_seq"]; 
     } 
    } 
    //Update next sequence number in db 
    $sql = "UPDATE order_sequence SET next_seq = ".($nextSeq + 1); 
    if (mysqli_query($conn, $sql)) { 
     //Updated successfully 
     //Write in log may be 
    } 
    $conn->close(); 
    return formatToSixCharacters($nextSeq); 
} 
function formatToSixCharacters($num) { 
    $numStr = $num . ""; 
    if(strlen($numStr) < 6) { 
     $zeros = 6 - strlen($numStr); 
     for($i = 1; $i <= $zeros; $i++) { 
      $numStr = "0" . $numStr; 
     } 
    } 
    return $numStr; 
} 
?> 
<html> 
    <head> 
     <title>Form Printing</title> 
    </head> 
    <body> 
     <form> 
      <input class="serial-no" type="text" name="fname" value="<?php echo getNextSequnceNumber() ?>" maxlength="6" size="6" readonly="readonly"> 
     </form> 
    </body> 
</html>

DB脚本

CREATE DATABASE orders; 
USE orders; 
CREATE TABLE order_sequence (
    next_seq INT NOT NULL 
); 
-- DEFAULT VALUE 
INSERT INTO order_sequence (next_seq) 
    VALUES(1);

注：请确保您更换您的数据库用户名和密码

SQLITE3版本的代码，请

形式，sqlite.php

<?php 
session_start(); 
class DBUtil extends SQLite3 { 
    function __construct() { 
     //Open db 
     $this->open("orders.db"); 
    } 

    function createTableIfNotExists() { 
     //create table if not exists already 
     $sql = "CREATE TABLE IF NOT EXISTS order_sequence (" 
      ." next_seq INT NOT NULL" 
      .")"; 
     $result = $this->exec($sql); 
     return $result;//Whether table created successfully or not 
    } 

    function updateNextSeqNumber($nextSeq) { 
     //update next sequnce number in db 
     $sql = "UPDATE order_sequence SET next_seq = ".$nextSeq; 
     $result = $this->exec($sql); 
     return $result; 
    } 

    function insertFirstTime() { 
     //insert first time 
     $sql = "INSERT INTO order_sequence (next_seq) VALUES (1)"; 
     $result = $this->exec($sql); 
     return $result; 
    } 

    function getNextSeq() { 
     //get next sequence number 
     $sql = "SELECT next_seq FROM order_sequence"; 
     $result = $this->query($sql); 
     $nextSeq = 1; 
     if($row = $result->fetchArray(SQLITE3_ASSOC)) { 
      $nextSeq = $row["next_seq"]; 
     } else { 
      $this->insertFirstTime();//First sequence number, so that next update queries will be always successfull 
     } 
     $this->updateNextSeqNumber($nextSeq + 1); 
     return $nextSeq; 
    } 
} 

function getNextSequnceNumber() { 
    //Create new object of utility class 
    $db = new DBUtil(); 
    if(!$db){ 
     die("Connection failed: " . $db->lastErrorMsg()); 
    } 
    //Check if connected 
    if($db->createTableIfNotExists()) { 
     $nextSeq = $db->getNextSeq(); 
     return formatToSixCharacters($nextSeq); 
    } else { 
     die ("Error: " . $db->lastErrorMsg()); 
    } 
    //close connection finally 
    $db->close(); 
} 

function formatToSixCharacters($num) { 
    $numStr = $num . ""; 
    if(strlen($numStr) < 6) { 
     $zeros = 6 - strlen($numStr); 
     for($i = 1; $i <= $zeros; $i++) { 
      $numStr = "0" . $numStr; 
     } 
    } 
    return $numStr; 
} 
?> 
<!DOCTYPE html> 
<html> 
    <head> 
     <title>Form Printing</title> 
    </head> 
    <body> 
     <form> 
      <input class="serial-no" type="text" name="fname" value="<?php echo getNextSequnceNumber() ?>" maxlength="6" size="6" readonly="readonly"> 
     </form> 
    </body> 
</html>

++ PHPDesktop使用SQLite版本

form-php-desktop-sqlite。php

请包含PHPDesktop提供的PHPDesktop帮助文件pdo.php。然而，这是一个小帮手文件，它不会有很大的用途，但它现在可以帮助你。

还可以阅读使用Sqlite with PHP Desktop

<?php 
session_start(); 
include "./pdo.php"; 

function getNextSequnceNumber() { 
    //Open connection 
    $db_file = "./orders.sqlite3"; 
    PDO_Connect("sqlite:$db_file"); 
    //Create table if not exists 
    $sql = "CREATE TABLE IF NOT EXISTS order_sequence (" 
     ." next_seq INT NOT NULL" 
     .")"; 
    PDO_Execute($sql); 

    //get next sequence number 
    $sql = "SELECT next_seq FROM order_sequence"; 
    $nextSeq = PDO_FetchOne($sql); 
    if($nextSeq == null) { 
     $nextSeq = 1; 
     //Also insert first time record 
     $sql = "INSERT INTO order_sequence (next_seq) VALUES (1)"; 
     PDO_Execute($sql); 
    } 
    //Update next time sequence 
    $sql = "UPDATE order_sequence SET next_seq = ".($nextSeq + 1); 
    PDO_Execute($sql); 
    return formatToSixCharacters($nextSeq); 
} 

function formatToSixCharacters($num) { 
    $numStr = $num . ""; 
    if(strlen($numStr) < 6) { 
     $zeros = 6 - strlen($numStr); 
     for($i = 1; $i <= $zeros; $i++) { 
      $numStr = "0" . $numStr; 
     } 
    } 
    return $numStr; 
} 
?> 
<!DOCTYPE html> 
<html> 
    <head> 
     <title>Form Printing</title> 
    </head> 
    <body> 
     <form> 
      <input class="serial-no" type="text" name="fname" value="<?php echo getNextSequnceNumber() ?>" maxlength="6" size="6" readonly="readonly"> 
     </form> 
    </body> 
</html>

了解关于浏览器会话使用的更多信息[来自W3学校]（https://www.w3schools.com/html/html5_webstorage.asp） –

了解关于浏览器Cookie使用的更多信息[来自W3学校]（https：// www。 w3schools.com/js/js_cookies.asp） –

感谢您的答案解决方案1正在工作，但一些如何解决方案2无法正常工作，请检查，如果possiable。浏览器会话不是我的选择，因为它会在浏览器退出时销毁会话。我想要一个解决方案，不会在浏览器退出时将序列号恢复为默认值。 –

答

一个非常简单的方式做，这是使用jQuery的。使用带按钮链接的点击事件监听器，该按钮链接将监听对该按钮的每次点击，并在每次点击时增加值。将起始值设为000000，将递增的值存储到变量中，然后在所需的页面上使用该变量。

例如：
想想看，你有home.html的页面上此按钮：

<a href="formpage.html" id="linkcounter">BUTTON</a>

现在，使用jQuery - 听从这个链接点击事件和存储递增上变量值是这样的：

var count = 0, 
    default = '000000'; 
$('#linkcounter').click(function(e) { 
    e.preventDefault(); 
    count++; 
    var ctxt = '' + count; 
    var incrementval = pad.substr(0, pad.length - ctxt.length) + ctxt; 
}); 

// store the value into the local storage of DOM for the current session. this is done to retain the variable value even after a page is refreshed. 
var incrementvallocal = incrementval; 
localStorage.setItem("incrementvalueper", incrementvallocal);

存储在变量incrementval递增值i送到当地的仓库。现在只需在所需页面上使用此变量的值（在此示例中为formpage.html）。

如果你想设置它有这样一个输入字段的表单页面上的占位符文本：由增加值

<input class="serial-no" type="text" name="fname" placeholder="000000" maxlength="6" size="6">

，然后使用此jQuery代码：

// get incremented value from the local storage of DOM. 
var getincval = localStorage.getItem("incrementvalueper"); 

$(document).ready(function(){ 
    $('.serial-no').attr("placeholder", getincval); 
});

这代码使用变量getincval（具有增加的单击值）的值并将其设置为input元素的占位符文本，该元素的类别为.serial-no。

让我知道这是否有帮助。 :)

如何在每次使用javascript在其他页面上单击按钮时自动增加数字

相关推荐