文档.getElementById将答案从提示符注入到错误的位置

document.getElementById injecting Answer from prompt in to wrong place

本文关键字：错误 位置 注入 提示符 getElementById 答案 文档      更新时间：2023-09-26

不久前，我发现了一个函数(在这里)，它将允许我在表单提交时启动一个Javascript提示框，它将接受一个值，然后在提交的表单旁边提交它。

我一直在绞尽脑汁想为什么这不能正常工作。现在，如果我在表格的第一行以外的行上单击submit，它会在第一行上提交表单。

函数使用文档。getElementById来查找输入文本的位置，但因为它是while循环，所以document.getElementById("invoiceEntry")。值=答案;存在于表的每一行，并将文本注入到第一个实例中。

有简单的解决方法吗?

下面是我的代码片段:

    <script language="Javascript">
    function invoiceCollect() {
      var answer = prompt("Enter invoice number:");
      if(answer) {  // answer = false if "cancel" pressed.
        document.getElementById("invoiceEntry").value = answer;
        return true;
      }
      else if(answer == "") {  // return false if no input entered, i.e. ""
        return false;
    }
      else
        return false;
    }
    </script>
    <form id='invoice' method='post' action='update_item.php'  onsubmit='return invoiceCollect()'>
    <input type='hidden' name='invoiced' >
    <input type='hidden' name='id' value='" . $row['id'] . "' >
    <input type='hidden' name='invoiceNo' id='invoiceEntry' value='' >
    </form>
<input type='submit' value='Invoice' form='invoice'>

我将假设你正在谈论的while循环是服务器端，在PHP和它包装你发布的HTML。如果不是这样，请评论，我将删除答案，因为它会跑题。

问题1:你的函数不应该在循环中定义。你希望所有的函数都做同样的事情，也许是对不同的元素。只需要一个函数，把元素作为参数就可以了。

问题2:识别正确的元素。这是你面临的实际问题。所有函数都使用具有该ID的第一个元素，因为这就是HTML的定义方式，它希望ID是唯一的。最简单的解决方案是将表单作为参数添加到函数中:

JavaScript: 

function invoiceCollect(form) {
  form.invoiceNo.value = 'WORKS';
}
HTML: 

<form onsubmit = 'return invoiceCollect(this)'>
演示

<input type='submit' value='Invoice' form='invoice'>
前面的

</form>

所以应该是这样的:

<script language="Javascript">
function invoiceCollect() {
  var answer = prompt("Enter invoice number:");
  if(answer) {  // answer = false if "cancel" pressed.
    document.getElementById("invoiceEntry").value = answer;
    return true;
  }
  else if(answer == "") {  // return false if no input entered, i.e. ""
    return false;
}
  else
    return false;
}
</script>
<form id='invoice' method='post' action='update_item.php'  onsubmit='return invoiceCollect()'>
<input type='hidden' name='invoiced' >
<input type='hidden' name='id' value='" . $row['id'] . "' >
<input type='hidden' name='invoiceNo' id='invoiceEntry' value='' >
<input type='submit' value='Invoice' form='invoice'>
</form>
相关文章：