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

时间:2014-10-12 03:57:21

标签: javascript forms

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

}

1 个答案:

答案 0 :(得分:0)

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