Кнопка вимкнути подання під час надсилання форми

Я написав цей код, щоб вимкнути кнопки надсилання на своєму веб-сайті після натискання:

$('input[type=submit]').click(function(){
    $(this).attr('disabled', 'disabled');
});

На жаль, форма не надсилається. Як я можу це виправити?

РЕДАГУВАТИ Я хотів би пов'язати подання, а не форму :)

Зробіть це onSubmit():

$('form#id').submit(function(){
    $(this).find(':input[type=submit]').prop('disabled', true);
});

Що відбувається, це те, що ви взагалі відключаєте кнопку, перш ніж вона фактично ініціює подію подання.

Вам, мабуть, також слід подумати про присвоєння елементів елементам ідентифікаторам або класам, тому ви не виберете всі входи типу подання на сторінці.

Демонстрація: http://jsfiddle.net/userdude/2hgnZ/

(Зверніть увагу, я використовую, preventDefault()і return falseтому форма фактично не надсилається у прикладі; залиште це у своєму використанні.)

Зокрема, якщо хтось стикається з проблемою в Chrome:

Що вам потрібно зробити, щоб це виправити, це використовувати onSubmitтег в <form>елементі для встановлення кнопки подання disabled. Це дозволить Chrome вимкнути цю кнопку відразу після її натискання, а подання форми все одно продовжиться ...

<form name ="myform" method="POST" action="dosomething.php" onSubmit="document.getElementById('submit').disabled=true;"> 
     <input type="submit" name="submit" value="Submit" id="submit"> 
</form>

Вимкнені елементи керування не подають своїх значень, що не допомагає зрозуміти, чи натиснув користувач кнопку зберегти чи видалити.

Тому я зберігаю значення кнопки у прихованому, яке надсилається. Ім'я прихованого збігається з ім'ям кнопки. Я називаю всі свої кнопки іменем button.

Напр <button type="submit" name="button" value="save">Save</button>

На основі цього я знайшов тут . Просто збережіть натиснуту кнопку у змінну.

$(document).ready(function(){
    var submitButton$;

    $(document).on('click', ":submit", function (e)
    {
        // you may choose to remove disabled from all buttons first here.
        submitButton$ = $(this);
    });

    $(document).on('submit', "form", function(e)
    {
        var form$ = $(this);
        var hiddenButton$ = $('#button', form$);
        if (IsNull(hiddenButton$))
        {
            // add the hidden to the form as needed
            hiddenButton$ = $('<input>')
                .attr({ type: 'hidden', id: 'button', name: 'button' })
                .appendTo(form$);
        }
        hiddenButton$.attr('value', submitButton$.attr('value'));
        submitButton$.attr("disabled", "disabled");
    }
});

Ось моя IsNullфункція. Використовуйте або замінюйте власну версію для IsNull або невизначеної тощо.

function IsNull(obj)
{
    var is;
    if (obj instanceof jQuery)
        is = obj.length <= 0;
    else
        is = obj === null || typeof obj === 'undefined' || obj == "";

    return is;
}

Це має подбати про це у вашому додатку.

$(":submit").closest("form").submit(function(){
    $(':submit').attr('disabled', 'disabled');
});

Просте та ефективне рішення

<form ... onsubmit="myButton.disabled = true; return true;">
    ...
    <input type="submit" name="myButton" value="Submit">
</form>

Джерело: тут

Більш спрощений спосіб. Я спробував це, і мені це вдало:

$(':input[type=submit]').prop('disabled', true);

Ваш код насправді працює на FF, він не працює на Chrome.

Це працює на FF та Chrome.

$(document).ready(function() {
        // Solution for disabling the submit temporarily for all the submit buttons.
        // Avoids double form submit.
        // Doing it directly on the submit click made the form not to submit in Chrome.
        // This works in FF and Chrome.
        $('form').on('submit', function(e){
          //console.log('submit2', e, $(this).find('[clicked=true]'));
          var submit = $(this).find('[clicked=true]')[0];
          if (!submit.hasAttribute('disabled'))
          {
            submit.setAttribute('disabled', true);
            setTimeout(function(){
              submit.removeAttribute('disabled');
            }, 1000);
          }
          submit.removeAttribute('clicked');
          e.preventDefault();
        });
        $('[type=submit]').on('click touchstart', function(){
          this.setAttribute('clicked', true);
        });
      });
    </script>

Як вимкнути кнопку подати

просто викличте функцію на події onclick і ... поверніть true для подання та false, щоб вимкнути подання. АБО викликати функцію на window.onload, наприклад:

window.onload = init();

а в init () зробити щось подібне:

var theForm = document.getElementById(‘theForm’);
theForm.onsubmit =  // what ever you want to do 

У мене працювало:

var form_enabled = true;
$().ready(function(){
       // allow the user to submit the form only once each time the page loads
       $('#form_id').on('submit', function(){
               if (form_enabled) {
                       form_enabled = false;
                       return true;
               }

               return false;
        });
});

Це скасовує подію подання, якщо користувач намагається подати форму кілька разів (натисканням кнопки подання, натисканням клавіші Enter тощо)

Я використовую blockUI, щоб уникнути несумісності браузера на відключених або прихованих кнопках.

http://malsup.com/jquery/block/#element

Тоді у моїх кнопок є клавіша автозапуску:

  $(".autobutton").click(
     function(event) {
        var nv = $(this).html();
        var nv2 = '<span class="fa fa-circle-o-notch fa-spin" aria-hidden="true"></span> ' + nv;
        $(this).html(nv2);
        var form = $(this).parents('form:first');

        $(this).block({ message: null });
        form.submit();                
        });   

Тоді форма така:

<form>
....
<button class="autobutton">Submit</button>   
</form>

Код кнопки

<button id="submit" name="submit" type="submit" value="Submit">Submit</button>

Кнопка вимкнення

if(When You Disable the button this Case){
 $(':input[type="submit"]').prop('disabled', true); 
}else{
 $(':input[type="submit"]').prop('disabled', false); 
}

Примітка: Цього разу Ви можете бути множинними, тому можуть знадобитися інші умови

Хочете також подати значення кнопки та запобігти подвійній формі?

Якщо ви використовуєте кнопку типу submit і хочете також надіслати значення кнопки, чого не станеться, якщо кнопку вимкнено, ви можете встановити атрибут даних форми та перевірити згодом.

// Add class disableonsubmit to your form
    $(document).ready(function () {
        $('form.disableonsubmit').submit(function(e) {
            if ($(this).data('submitted') === true) {
                // Form is already submitted
                console.log('Form is already submitted, waiting response.');
                // Stop form from submitting again
                e.preventDefault();
            } else {
                // Set the data-submitted attribute to true for record
                $(this).data('submitted', true);
            }
        });
    });