删除提交按钮，如果窗体被验证

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

你可以看看UI阻塞作为一种可能的解决方案。我使用this one.

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

这可能是最没有更多代码/信息的帮助。

Answer 2

不知道的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 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 nd时间除非您继续对每次更改进行验证（）并将文本设置回来。

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