javascript - onclick 更改多个表单输入值

Question

我对 Javascript 非常陌生，找不到问题的答案。我有许多页面的设置完全相同，每个页面上都有一个表单和按钮。当用户单击提交按钮时，我希望 javascript 设置隐藏输入的值。在我设置第二页之前，我的工作一直很完美。单击提交按钮时，第二页需要添加不同的值。但只有我的 javascript 中的最后一个值有效。它无法识别第一个值。我相信，如果我更改每个提交按钮上的 Id，这个问题很容易解决，但由于我拥有其他代码，这会导致工作数小时。

<script language="javascript" type="text/javascript">
<!--

window.onload=function() {document.getElementById("atc").onclick=function() 
{document.forms[0].autosccartprice.value = "40.00";
document.forms[0].fwbcartprice.value = "118.00";
}}

//-->
</script>

这是我第一页上的 html，效果很好。

<form action="https://www.mywebsite.com" method="post" 
class="buttonform">
<input type="hidden" name="price" id="fwbcartprice" value="" /><br />
<input type="submit" value="" class="addtocart3" id="atc" title="Add To Cart">
</form>

这是第二页的 html，不起作用

<form action="https://www.mywebsite.com" method="post" 
class="buttonform">
<input type="hidden" name="price" id="autosccartprice" value="" /><br />
<input type="submit" value="" class="addtocart3" id="atc" title="Add To Cart">
</form>

Answer 1

您似乎正在尝试填写隐藏的输入，但表单已提交。 因此，首先您需要停止表单提交，填写隐藏字段，然后重新提交表单。

<小时/>

试试这个代码:

window.addEventListener("load", function() {
   document.getElementsByClassName("buttonform")[0].addEventListener("submit", function(e) {
     e.preventDefault();
     this.autosccartprice.value = "40.00";
     this.fwbcartprice.value = "118.00";
     this.submit();
   }
}

<小时/>

Ps:如果为每个表单指定一个唯一的ID，然后使用 getElementById() 方法选择每个表单，而不是使用document.forms[i].