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

Question

我正在使用Magento并创建了一个自定义表单，基本上我想做的是防止多次单击“提交”按钮（无论是双击还是用户不耐烦并在单击后再次单击按钮）几秒钟）。

表单使用Magento Javascript验证方法来验证字段，并且如果所有字段都已验证，那么我想做的就是删除第一次单击时的“提交”按钮，并将其替换为“处理中...”消息。 这样，用户无法双击或多次单击按钮。

如果未对所有字段都进行验证，则向下移动“提交”按钮，并在其上方显示一条消息，内容为“请填写所有必填字段，然后再次提交表单”。

下面是带有验证的表格，但我真的很想知道如何应用我上面提到的内容。

任何帮助将不胜感激！！！ 提前致谢。

<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

不知道Magento可能如何适应，因为我不太熟悉它，但是该过程通常是这样的：

$('#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

您可以将UI阻止作为一种可能的解决方案。 我用这个。

如果您尚未使用jQuery，则可以尝试仅隐藏“提交”按钮，而不是完全删除它。 删除按钮可能会导致事件绑定问题，具体取决于您如何设置它们。

如果没有更多的代码/信息，这可能是您将获得的最大帮助。

Answer 3

我没有在上面看到您的验证代码，但是如果我们假设它是布尔函数，则可以：

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');
  });
}

我建议两件事：

1）删除“ In process ...”（正在处理中...）的东西，这只会使用户第二次变得更困难，除非您对每次更改都继续执行validation（）并重新设置文本。

2）添加双击预防措施：

    $('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');
  });