Блог

У меня есть форма на основе HTML / PHP с двумя кнопками отправки — одна вверху и одна внизу. Мне нужно запретить людям нажимать «Отправить» несколько раз (тем самым создавая несколько записей в нашей базе данных), поэтому я использовал метод, найденный здесь, чтобы сделать так, чтобы кнопка отправки отключалась при нажатии, а текст на кнопке менялся с «Отправить» на «Отправить; пожалуйста, подождите…».

Сейчас у меня две проблемы:

1. Отключается только верхняя кнопка в форме и изменяется ее текст. На нижнюю кнопку отправки это не влияет. Как мне сделать так, чтобы обе кнопки были отключены / изменены при отправке?
2. На моей странице есть функция validateForm(), которая вызывается при нажатии кнопки Отправки. Таким образом, если пользователь не заполняет обязательное поле, отображается окно сообщения, и он возвращается к форме. Но теперь верхняя кнопка отправки по-прежнему отключена (и имеет измененный текст). Как мне «сбросить» кнопки обратно в их обычное включенное состояние «Отправить», если функция проверки обнаружит ошибки?

Вот соответствующие фрагменты кода. Если я удалю код, который отключает / изменяет кнопку, форма будет отправлена нормально (но, конечно, я не получу ту функциональность, которую ищу).

Тег формы:

 <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;
        }
 

Спасибо,
Джон

@onatm: использование одного и того же идентификатора не поможет. JS будет обрабатывать только первый экземпляр тега, а не последующие.

Вы можете сделать что-то вроде этого….Используйте jquery. Дайте обеим кнопкам один и тот же класс, скажите «ОТПРАВИТЬ». Теперь напишите следующий код:

 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() .

 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;"
 

Конечно, было бы лучше вызвать функцию javascript, объявленную в <script></script> регионе.

Поэтому я бы написал такую функцию, как…

 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.

вы можете поместить это в правильное состояние, когда будут выполнены условия проверки формы, таким образом, отключив только при отправке, вам нужно будет вернуть «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; 
 

Я заметил, что у вас нет никаких действий в форме