如何对多个表单元素使用一个js函数答案

【问题标题】：How to use one single js function for multiple form elements如何对多个表单元素使用一个js函数
【发布时间】：2018-05-06 02:09:10
【问题描述】：

这里将根据用户输入的表单数量在单个 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。

由于真正的代码非常庞大，我将分享相同的小场景。请查看代码并帮助我。

谢谢。

【问题讨论】：

标签： javascript php jquery html laravel

【解决方案1】：

好吧，您对每个表单都使用相同的id="number"。尝试使用唯一的 id 并将其传递给函数：

jsfunction(the_id)

【讨论】：

这并不能解决问题。您仍然需要找到单击的控件所在的表单，然后找到具有唯一 ID 的结果输入。你想传递哪个ID？两者都有，还是只有一个？您的答案是没有应用程序的好建议，事实上，即使重复标识符是不好的做法，您也可以通过简单地遍历 DOM 以查找单击元素的父元素，然后在该父表单上使用 querySelector 来找到重复标识符来解决此问题被点击元素的兄弟。虽然unbirth的回答更加贴切和清晰。

【解决方案2】：

您可以像这样为表单动态分配唯一 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>

【讨论】：