Question

我在外部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>

在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);

}

Answer 1

看起来您有两个页面，每个页面只有一个表单，但您尝试在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代码的页面上实际存在的表单。

第一个函数只执行 - 由两个形式的.onsubmit调用的两个函数

1 个答案: