如何为多个表单元素使用单个js函数

时间:2017-11-22 10:58:57

标签: javascript php jquery html laravel

此处基于用户条目的表单编号将在单个HTML文件中创建。这里

function jsfunction() {  
  var number1 = document.getElementById("number").value; 
  var number = parseInt(number1); 
  number += number;
  document.getElementById("result").value = number; 
}
<body>

<?php 
  // this value is dynamically generated by refering database. Each time it varies.
  $count=2; 
?>

<input type="text" value="<?php echo $count; ?>" id="countt">

<?php
  for($i=0; $i<$count ; $i++ ) { 
?>

<form>  
  Enter No: <input type="text" id="number" name="number" onblur="jsfunction()"/><br/>  
  Value: <input type="text" id="result"/> 
</form>

<?php
  }
?>  

</body>

在每种形式中,我使用onclick="jsfunction()"作为一个元素。 问题是jsfunction仅适用于第一种形式。我需要在所有表单元素上单独执行相同的jsfunction

由于真正的代码非常庞大,我正在分享相同的小方案。请查看代码并帮助我。

谢谢。

2 个答案:

答案 0 :(得分:4)

您可以像这样为表单动态分配唯一ID。然后将带有唯一ID号的参数传递给JS函数将有助于选择表单。

function jsfunction(id) {  
  var number1 = document.getElementById("number_" + id).value; 
  var number = parseInt(number1); 
  number += number;
  document.getElementById("result_" + id").value = number; 
}
<body>

<?php 
  // this value is dynamically generated by refering database. Each time it varies.
  $count=2; 
?>

<input type="text" value="<?php echo $count; ?>" id="countt">

<?php
  for( $i = 0; $i < $count; $i++ ) { 
?>

<form>  
  Enter No: <input type="text" id="number_<?php echo $i; ?>" name="number" onblur="jsfunction(<?php echo $i; ?>)"/><br/>  
  Value: <input type="text" id="result_<?php echo $i; ?>"/> 
</form>

<?php
  }
?>  

</body>

答案 1 :(得分:0)

嗯,您对每个表单使用相同的id="number"。 尝试使用唯一ID并将其传递给函数:

jsfunction(the_id)