仅执行的第一个函数-由两个窗体的.osubmit调用的两个函数中的一个

First function executing only - of two functions called by .onsubmit of two forms

本文关键字：两个 函数 调用 一个 osubmit 执行 第一个 窗体      更新时间：2023-09-26

我在外部JS文件中有两个函数，每个函数都将在单独页面上提交各自的表单时执行。这些函数是从初始化函数中调用的，初始化函数本身加载在window.onload上。只有第一个函数（先放的那个）有效（因此，在下面的示例中，order.html页面函数的totalOrder（），register.html页面的validateForm（）无效）。我希望两人都为各自的页面工作。

抱歉语言不精确，我对JavaScript很陌生。我怀疑我错过了一些基本的东西。

function totalOrder() {
alert("total order");
}
function validateForm() {
    alert("validation");
}
function init() {
    var orderForm = document.getElementById("order_Form");
    var regForm = document.getElementById("reg_Form");
    regForm.onsubmit = validateForm;
    orderForm.onsubmit = totalOrder;
}
window.onload = init;

register.html:中的表单

<form id="reg_Form" method="post" action="#" name="registration">... <input type="submit" id="btnSubmit" value="Submit"></form>

Form in order.html：

<form id="order_Form" method="post" action="#" name="order">... <input type="submit" id="btnSubmit" value="Submit"></form>

如果函数是从html页面调用的，则工作正常，但这并不理想，例如：

<form id="reg_Form" method="post" action="#" name="registration" onsubmit="return validateForm()">

使用addEventListener而不是onsubmit会遇到同样的问题，例如

function init() {
var orderForm = document.getElementById("order_Form");
var regForm = document.getElementById("reg_Form");
orderForm.addEventListener("submit", totalOrder);
regForm.addEventListener("submit", validateForm);

}

看起来有两个页面，每个页面只有一个表单，但您试图在javascript中修改这两个表单。你可以使用这样的东西：

function init() {
    var orderForm = document.getElementById("order_Form");
    var regForm = document.getElementById("reg_Form");
    if (regForm != null) regForm.onsubmit = validateForm;
    if (orderForm != null) orderForm.onsubmit = totalOrder;
}

这样，您只会尝试修改使用JS代码的页面上实际存在的表单。

相关文章：