将点击次数分配给隐藏值

assigning the number of clicks to a hidden value

本文关键字：隐藏 分配      更新时间：2023-09-26
 <form action='productsphp.php' method='post'>
      <button type="button" onclick="add1()">Add</button>
      <input type="hidden" id="p1" value="" name="p1"/>        
       <input type="submit" value="Save" />
 </form>
<script type="text/javascript">
function add1(){
    var p= document.getElemenetById('p1').value;
   var p1=0;
  p1=p+1;
   p=p1;
}
   </script>

在productsphp.php页面

      <?php
    if(isset($_POST['p1'])){
        $p1=$_POST['p1'];
        echo "p1 is".$p1;
        }
    ?>

它不工作。我想每次按钮被点击去add1()函数并增加它。这样我就能知道用户点击了多少次。然后在按save时保存隐藏值中的点击次数，然后取该值并将其保存在数据库中。但价值仍然是零。请帮助

您的函数名有一个错别字(getElemenetById，额外的e)，并且您从未将值重新发送到输入字段。试一试:

<form action='productsphp.php' method='post'>
    <button type="button" onclick="add1()">Add</button>
    <input type="hidden" id="p1" value="" name="p1"/>
    <input type="submit" value="Save" />
</form>
<script type="text/javascript">
function add1(){
    var p= !parseInt(document.getElementById('p1').value) ? 0 : parseInt(document.getElementById('p1').value);
    p++;
    document.getElementById('p1').value = p;
}
</script>

您根本不必使用其他元素，您可以操作当前元素上的属性，例如data-clicks。它看起来像这样:

<button type="button" onclick="add1(this);" data-clicks="0">Add</button>

函数为:

 function add1(element){
      var currentClicks = element.getAttribute('data-clicks');
      element.setAttribute('data-clicks', currentClicks + 1);
 }

减少页面上的DOM元素可以提高性能，考虑一下。

试试这个:

function add1(){
    var p = document.getElementById('p1').value,
        p1 = parseInt(p) + 1;
    document.getElementById('p1').value = p1;
}

这样，计算后使用p1的值。您还需要设置p1的初始值:

<input type="hidden" id="p1" value="0" name="p1"/>

<form action='productsphp.php' method='post'>
      <button type="button" onclick="add1()">Add</button>
      <input type="text" id="p1" value="" name="p1"/>        
       <input type="submit" value="Save" />
 </form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
function add1(){
    var p= document.getElementById('p1');
    if(p.value) { 
        p.value = parseInt(p.value) +1;
    }else {
        p.value = 1;
    }
}
</script>

这是一个1-line:D

function add1(){
    document.getElementById("p1").value = Number(document.getElementById("p1").value) + 1
}

注意:你的点击次数很容易被这种方式欺骗。使用jquery代替ajax

你可以使用简单的javascript 

<script type="text/javascript">
var i=document.getElementById('p1').value;
i=(isNaN(i))?0:i;
function add1(){
   count++;
   //alert(count);
   document.getElementById('p1').value=count;
}
</script>
Jquery或

<script>
var i=$('#p1').val();
i=(isNaN(i))?0:i;
$('button').click(function(){
    $('#p1').val(++i);
});
</script>

完整的html文件

 <html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<form action='productsphp.php' method='post'>
      <button type="button" onclick="add1()">Add</button>
      <input type="hidden" id="p1" value="" name="p1"/>        
       <input type="submit" value="Save" />
 </form>
 <script type="text/javascript">
//use one at a time. This is just a demonstration how to do this in both 
//jquery and javascript
/* Javascript way of doing this - 
var i=document.getElementById('p1').value;
i=(isNaN(i))?0:i;
function add1(){
   i++;
   document.getElementById('p1').value=i;
}
*/
/* JQuery way of doing this*/
var i=$('#p1').val();
i=(isNaN(i))?0:i;
$('button').click(function(){
    $('#p1').val(++i);
});
</script>
</body>
</html>
相关文章：