Question

我有一个基于HTML / PHP的表单，有两个提交按钮 - 一个在顶部，一个在底部。我需要阻止人们多次按提交（从而在我们的数据库中创建多个记录），所以我使用了here找到的技术，以便在点击提交按钮时禁用它，以及文本按钮从“提交”更改为“正在提交;请稍候......”。

我现在有两个问题：

仅禁用表单上的顶部按钮并更改其文本。底部提交按钮不受影响。如何在提交时禁用/更改这两个按钮？
我的页面有一个validateForm（）函数，单击Submit按钮时会调用该函数。因此，如果用户未填写必填字段，则会显示一个消息框，并将其定向回表单。但现在仍然禁用了顶部提交按钮（并且已更改文本）。如果验证功能发现错误，如何将按钮“重置”回常规启用的“提交”状态？

以下是代码的相关摘要。如果我删除禁用/修改按钮的代码，表单会正常提交（但当然我没有得到我正在寻找的功能）。

表格标签：

<form name="MyInquiry" method="post" autocomplete="off" onsubmit="document.getElementById('submitButtonTop').disabled=true;document.getElementById('submitButtonTop').value='Submitting, please wait...';document.getElementById('submitButtonBottom').disabled=true;document.getElementById('submitButtonBottom').value='Submitting, please wait...';return validateInquiryForm();">

按钮的标签：

<input type="submit" name="submitinquiryform" id="submitButtonTop" value="Submit Form" />

<input type="submit" name="submitinquiryform" id="submitButtonBottom" value="Submit Form" />

验证功能：

    function validateInquiryForm() {



 var valid = true;
        var errorMessage = "";

        var emailFilter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

... code to validate individual fields ...

    if (!valid)
                alert(errorMessage);

            return valid;
        }

谢谢，约翰

Answer 1

onsubmit="
    document.getElementById('myButtonTOP').disabled=true;
    document.getElementById('myButtonTOP').value='Submitting, please wait...';
    document.getElementById('myButtonBOTTOM').disabled=true;
    document.getElementById('myButtonBOTTOM').value='Submitting, please wait...';
    return true;"

当然，最好调用<script></script>区域中声明的javascript函数。

所以我会写一个像......这样的函数。

var mySubmitted = false;

function MyCheckSubmit()
{
    if (mySubmitted)
        return false; // Already submitted!

    if (!validateInquiryForm())
        return false; // Validation failed!

    // disable submit buttons

    document.getElementById('myButtonTOP').disabled=true;
    document.getElementById('myButtonTOP').value='Submitting, please wait...';
    document.getElementById('myButtonBOTTOM').disabled=true;
    document.getElementById('myButtonBOTTOM').value='Submitting, please wait...';

    // Store in our global variable that we submitted this form.
    mySubmitted = true;

    return true; // Ok, we can submit!
}

当然还有

形式

onsubmit="return MyCheckSubmit();"

如果您在输入文本框中按下多次“输入”键，这也会有效，因为它使用内部变量来检查表单是否已经提交。

注意在表单之前声明脚本块，可能在head部分。

Answer 2

@onatm：使用相同的ID无济于事。只有第一个标签实例将由JS处理，而不是之后的那个。

你可以这样做......使用jquery。给两个按钮同一个类说“SUBMIT”。现在编写以下代码：

var myForm = document.forms[0];
$(document).ready(function(){
    $(".SUBMIT").click(function(){
        if(validateInput()){
            $(".SUBMIT").attr("disabled", true).val("Submitting..");
            var url = "any URL you like";
            var data = {
                           field1: myForm.field1.value,
                           field2: myForm.field2.value,
                           .
                           .
                       };
            $.post(url, data,
                function(Result){
                    alert(Result); // Write whatever logic you want
                }
            )
            .complete(function(){
               $(".SUBMIT").attr("disabled", false).val("Submit");
            })
            .error(function(){
               alert("Some error");
               $(".SUBMIT").attr("disabled", false).val("Submit"); 
            });
        }
        else{
            alert("Enter the missing fields first"); // Write whatever your logic
        }
    });
});

function validateInput(){
    if (all fields are entered) // Write you logic here
        return true;
    else
        return false
}

代码应解决您的第一个问题。对于第二个问题，您必须显式编写代码来测试函数 validateInput（） 中每个字段的真实性。

Answer 3

您可以在满足表单验证条件时将其置于正确的状态，因此仅在提交时禁用，您需要在此处返回“this”作为参考 onsubmit="return MyCheckSubmit(this);"

  var topButton = document.MyInquiry.submitinquiryform; // top
  var botomButton = document.otherMyInquiry.submitinquiryform; // bottom

 if(beingSubmitted.name == "MyInquiry"){ 

   topButton.value = "Please wait...";
   //beingSubmitted.action = "process.php" // action page
   beingSubmitted.submit();

  }else{
   //beingSubmitted.action = "process2.php" // action page
    botomButton.value = "Please wait...";
    beingSubmitted.submit();
}
//beingSubmitted.action = "process.php" // action page would handle for both form you could check which form is being submitted by sending a value in a hidden filed 
 topButton.disabled = true;
 botomButton.disabled = true;

我注意到你在表格上没有采取行动

使用Javascript阻止多个表单提交

3 个答案:

@onatm：使用相同的ID无济于事。只有第一个标签实例将由JS处理，而不是之后的那个。