javascript - 如何解决在表单中使用多个按钮的验证问题

Question

我有一个表单，其中有许多用户可以填写的文本框。在表单的底部有两个按钮。一种用于取消，一种用于提交。就像下面的例子

<form action='bla.php' method='post'>
    <input type='text' name='someTextField1'>
    <input type='text' name='someTextField2'>
    <input type='text' name='someTextField3'>
    <input type='submit' name='submit'>
    <input type='submit' name='cancel'>
</form>

我有一个 js 函数来检查字段中的数据，我曾经将其用于两个按钮。因此我引用的js函数的形式如下:

<form action='bla.php' method='post' name='form' onSubmit='return CheckFields()'>

js 函数如下所示:

function CheckFields() {
    var formname = "form";
    var x = document.forms[formname]["someTextField1"].value;
    var result = true;
    var text = "";
    if (x == null || x == "") {
        text += "Dont forget about the someTextField1.\n";
        result =  false;
    }

    if(!result)
        alert(text);
    return result;
}

现在我希望这个 js 函数仅在使用提交按钮而不是取消按钮时运行。当我尝试将对函数的调用移至提交按钮时，如下所示，它不起作用:

<input type='submit' name='submit' onClick='return CheckFields()'>
<input type='submit' name='cancel'>

为什么？解决这个问题最明智的方法是什么？我应该在表单中保留对 CheckFields() 的调用并在脚本中检查单击了哪个按钮，还是应该重新创建该函数以在某种程度上使用按钮？有人有想法或例子吗？

Answer 1

替换<input type='submit' name='cancel'>通过<input type='button' name='cancel'> .
您的版本实际上有两个提交按钮，这两个按钮都将提交表单。