Disable the button when submitting the form, but the value of the message button

Question

I want to prevent several form submissions, but I need the send item value to be sent back to the server (so that I know which button the user clicked on).

Most of the Internet wisdom regarding suppressing multiple form submissions seems to be about disabling the submit button while submitting the form. This prevents the button from being pressed a second time, but also prevents it from being published.

I found some examples of JS code that hides a submit button that allows you to publish their values. But these examples replace the button (now hidden) with some kind of message "processing ...". I really want a solution that presents the user with a disabled button, but still puts the value of the button.

I should add that I would prefer a solution that works with standard HTML that will be found in most forms. No magic IFrames, hidden fields, identifier names or classes, etc. I want a JS function that I could hide in the library, and a link from all my existing forms to enable this new behavior.

(I have a solution that I will lay out as an answer. But I had to ask a question to fit Zen SO.)

Answer 1

Here is another (another) answer to the question of how to deal with the fact that the user does not click the submit button more than once. This solution means the button has been disabled.

Under the covers, he creates a disabled button for display to the user and hides the actual button so that its value is published. I also move the hidden button so that the extra element does not spoil the CSS selectors.

Also pay attention to checking for invalid form fields. If you skipped this check and the form check failed, the user completes the form that was not submitted (because the client-side check failed), but the buttons are disabled.

// Disables buttons when form is submitted
$('form').submit(function () {
    // Bail out if the form contains validation errors
    if ($.validator && !$(this).valid()) return;

    var form = $(this);
    $(this).find('input[type="submit"], button[type="submit"]').each(function (index) {
        // Create a disabled clone of the submit button
        $(this).clone(false).removeAttr('id').prop('disabled', true).insertBefore($(this));

        // Hide the actual submit button and move it to the beginning of the form
        $(this).hide();
        form.prepend($(this));
    });
});

Answer 2

, , , . jQuery .

$('form').on('submit', function(e) {
    if (!$(this).data('submitted')) {
        $(this).data('submitted', true);
    }
    else {
        e.preventDefault();
    }
});

, css, , .

$('form').on('submit', function(e) {
    if (!$(this).data('submitted')) {
        $(this).data('submitted', true).addClass('disabled');
    }
    else {
        e.preventDefault();
    }
});

Answer 3

. . :

<input id="btn" type="button" onclick="disableMe(this)" value="Submit" />

CSS

.disabled {
    backround-color:grey;
    color:darkgrey;
}

JS

function disableMe(btn) {
    btn.className = "disabled";
    btn.onclick = function(){return false}
}

- ( CSS), onclick "return false" , . , , .

Answer 4

:

 1. , ​​ onClick, onHover :

 2. iframe, . "" , iframe.

Answer 5

, . , .

:

• true/false e.preventDefault() form.submit(), form.submit() , , , /.

• pointer-events: none; disabled="disabled", / . , pointer-events: none; Internet Explorer 10 .

javascript/jquery:

var form_selector = 'form',
    button_selector = 'button, input[type=submit], input[type=button], input[type=reset]',
    deactivated_classname = 'state-submitting',
    deactivated_class = '.'+'state-submitting';

// Capture the submit event so it will handle both the 
// enter key and clicking the submit button.
$(document).on('submit', form_selector, function(e) {
  var form = e.target,
      buttons = $( form ).find( button_selector );

  // Returns, because the form is already being submitted by a previous attempt.
  if( $( form ).find( deactivated_class ).length > 0  ) return false;

  disableButtons( buttons );

  // Safari (version 11) bugfix: Safari needs a timeout or it won't 
  // show the deactivated styles.
  setTimeout(function() {
    // Must use return true, because using form.submit(), won't pass the button value.
    return true;
  }, 50 );
});

function disableButtons( buttons ) {
  // Disables all buttons in the form.
  $( buttons ).each(function( index, elem ) {
    $( elem ).addClass( deactivated_classname );
  });
}

AJAX .

$( document ).on( 'ajax:complete', form_selector, function(e) {
  var form = e.target,
      buttons = $( form ).find( button_selector );

  enableButtons( buttons );
});

function enableButtons( buttons ) {
  $( buttons ).each(function( index, elem ) {
    $( elem ).removeClass( deactivated_classname );
  });
}

CSS

// The button is disabled while it is submitting.
.state-submitting {   
  // Turns off hover and click events. Not supported in IE 10 and below.
  pointer-events: none;
  opacity: 0.5;
}

Answer 6

, OP, , (, 0 ) - setTimeout setTimeout . - , () , .

- , , /.

onsubmit , . , / ... , ... , .

:

<form onsubmit="formSubmit(this);" method="post" action="">

In my JavaScript (sorry, I'm not up to date with the latest JS technologies like jQuery etc., so I post this in code compatible with old-fashioned native JavaScript-5-no-dependency)):

function formSubmit(form) {
    // MUST DELAY so as not to break input/button[type=submit] name submission
    setTimeout(function () {
        var els = form.elements;
        for (var i = 0; i < els.length; i++) {
            var el = els[i];
            if (el.getAttribute('type') == 'submit') {
                el.setAttribute('disabled', 'disabled');
            }
        }
    }, 0);
    return true;
}