Отключение кнопки отправки после одного клика

Question

Вот мой код:

<form name='frm' id='frm' action='load.asp' method='post' onSubmit='return OnSubmit(this)' style='margin-top:15px'>
    <input type='submit' name='send' id='send' onclick="this.disabled=true;return true;" value='Send' title='test'>
</form>

Я хочу, чтобы моя функция onsubmit была выполнена, и я хочу, чтобы страница была отправлена. На моем сайте нет отправки и нет функции

Я попытался продублировать это здесь, но форма, кажется, отправлена, и моя функция никогда не выполняется ... http://jsfiddle.net/V7B3T/1/

И я не знаю, когда мне нужно снова активировать кнопку.

Должен ли я сделать это в document.ready или в функции onSubmit?

Так что, если кто-то может исправить скрипку :), и после этого я сравню ее с моим кодом. Я думаю: S Я потерян

Спасибо всем

Answer 1

Если вы хотите проверить форму или внести какие-либо изменения перед отправкой и отправить ее только в том случае, если форма действительна, вы можете сделать что-то вроде этого:

<form id="frm" action="load.asp" method="post" enctype="multipart/form-data">
    <input type="submit" name="send" id="send" value="Send" title="test">
</form>

и код JavaScript:

$('#frm').bind('submit', function (e) {
    var button = $('#send');

    // Disable the submit button while evaluating if the form should be submitted
    button.prop('disabled', true);

    var valid = true;    

    // Do stuff (validations, etc) here and set
    // "valid" to false if the validation fails

    if (!valid) { 
        // Prevent form from submitting if validation failed
        e.preventDefault();

        // Reactivate the button if the form was not submitted
        button.prop('disabled', false);
    }
});

Вот рабочая скрипка .

Answer 2

Я бы определенно переместил этот код во внешние файлы JS (и CSS), к которым он принадлежит, но это должно работать:

onclick="this.disabled=true;this.parentNode.submit();"

Поскольку вы отключаете нажатие кнопки «Отправить», она будет отключена после того, как произойдет фактический щелчок при отправке формы (до этого произошло нажатие). Тем не менее, отправка формы с JS должна помочь.

http://jsfiddle.net/V7B3T/4/

Редактировать: Что касается повторного включения кнопки, это должно произойти после того, как ваша OnSubmit() функция запустилась, я думаю.

Answer 3

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

Кроме того, поскольку вы используете jQuery, вы также можете использовать его правильно и разделять разметку HTML и Javascript, прикрепляя обработчики событий с помощью функций jQuery, а не атрибутов onclick, onsubmit и т. Д. В HTML элементы.

Обновлен HTML:

<form name='frm' id='frm' action='http://jsfiddle.net/' enctype='multipart/form-data' method='post' style='margin-top:15px'>
    <input type='submit' name='send' id='send' value='Send' title='test'>
</form>

Обновлен Javascript:

function submitForm(form) {
    alert("submitted");
}

$('#send').click(function(e) {
    this.disabled = true;
});

$('#frm').submit(function(e) {
    submitForm(this);    
});

Рабочая jsFiddle

Вам нужно будет обернуть это в вызове $(document).ready(function() {...}); для использования на реальной странице - я пропустил это, потому что jsFiddle в любом случае выполняет любой предоставленный Javascript onLoad.

Answer 4

Если вы не хотите отправлять страницу, это должно сработать:

onclick="this.disabled=true;return false;"