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

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