如果表单通过验证，则删除“提交按钮”

Question

I am using Magento and created a custom form, and basically what I want to do is prevent a submit button to be click more than once (whether that is a double click, or if the user just gets impatient and clicks the button again after a few seconds).

The form is using the Magento Javascript validation method to validate the fields and IF the fields are all validated then what I would like to do is to remove the submit button on the first click and replace it with a "In process..." message. This way there is no way that a user can double click or multiple click the button.

If the fields are not all validated then move the submit button down and just above it display a message that may read "Please fill out all required fields and submit form again".

Below is the form with just validation, but I would really like to know how to apply the what I mentioned above.

Any help would be SO appreciated!!! Thanks in advance.

<form name="<em><strong>my-custom-form</strong>" id="my-custom-form" action="" method="post">

<label for="firstname">< ?php echo $this->__('First name') ?> <span class="required">*</span></label><br />
<input id="firstname" name="firstname" class="<em/><strong>input-text required-entry</strong>" />

<label for="lastname">< ?php echo $this->__('Last name') ?> <span class="required">*</span></label><br />
<input id="lastname" name="lastname" class="<em/><strong>input-text required-entry</strong>" />

<label for="useremail">< ?php echo $this->__('Email') ?> <span class="required">*</span></label><br />
<input type="text" name="useremail" id="useremail" class="<em/><strong>input-text required-entry validate-email</strong>" />

<input type="submit" name="submit" value="<?php echo $this-/>__('Submit') ?>" />

</form>< ?php /* END OF my-custom-form */?>

<script type="text/javascript">
 //< ![CDATA[
   var customForm = new VarienForm('<em><strong>my-custom-form</strong>');
 //]]>
</script>

Answer 1

Not sure how Magento might fit in because I'm not overly familiar with it, but the process typically works like this:

$('#my-custom-form').submit(function(){
    $('input[type=submit]', this).attr('disabled', true);

    // validate form

    if (valid) {
        return true;
    } else {
        $('input[type=submit]', this).attr('disabled', false);
        return false;
    }
});

Answer 2

You could look into UI blocking as one possible solution. I use this one.

If you're not using jQuery already, you could try just hiding the submit button, rather than removing it completely. Removing the button can cause issues with event binding, depending on how you set them up.

This is probably the most help you're going to get without a little more code/information.

Answer 3

I don't see your validate code above, but if we assume that it's a boolean function you can just:

if (validatation()) {
  $('#my-custom-form').submit(function(){
   $('input[type=submit]', this).attr('enabled', 'enabled');
   $('input[type=submit]', this).val('In process...');
  });
} else { 
  $('#my-custom-form').submit(function(){
    $('input[type=submit]', this).attr('disabled', 'disabled');
  });
}

I would suggest two things:

1) Drop the "In process..." thing, it just makes things harder for the user the 2nd time unless you keep doing validation() on every change and setting the text back.

2) Add a double-click prevention:

    $('my-custom-form').submit(function(){
       $('input[type=submit]', this).attr('disabled', 'disabled');
       $('select', this).attr('disabled', 'disabled');
       $('input[type=text]', this).attr('readonly', 'readonly');
       $('textarea', this).attr('readonly', 'readonly');
  });