刪除提交按鈕，如果窗體被驗證

我使用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>

來源

2011-11-18 GGcupie

你可以看看UI阻塞作爲一種可能的解決方案。我使用this one.

如果您尚未使用jQuery，則可以嘗試隱藏提交按鈕，而不是完全刪除它。取消按鈕可能會導致事件綁定問題，具體取決於您如何設置它們。

這可能是最沒有更多代碼/信息的幫助。

來源

2011-11-18 22:11:17 arb

不知道的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; 
    } 
});

來源

2011-11-18 22:12:18

謝謝！我會試試這個 – GGcupie

我沒有看到你上面的驗證碼，但如果我們假設這是一個布爾函數你可以：

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

來源

2011-11-18 22:21:49 awm

刪除提交按鈕，如果窗體被驗證

回答

相關問題