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阻止视为一种可能的解决方案。我使用this one.

如果您还没有使用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）放弃“正在处理...”的事情，它只是让用户第二次更难，除非你继续对每个更改进行验证（）并将文本设置回来。

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

如果表单已经过验证，请删除“提交”按钮

3 个答案: