防止表單提交工作...太好了

Question

我有一個表單，我不想在第一次提交被點擊時提交，但第二次它應該像正常提交一樣工作。所以我加載了一個not-submittable類到載入的表單，然後在第一次點擊刪除那個類...應該（我認爲）使它正常提交。但是，這並沒有發生。第一次點擊按預期工作，刪除類並更改按鈕文本。然而，第二次點擊完全一樣。那麼，我在這裏錯過了什麼？

的jQuery：

$('form#survey_7042 #ACTION_SUBMIT_SURVEY_RESPONSE').addClass('not-submittable'); 

    $('form#survey_7042 #ACTION_SUBMIT_SURVEY_RESPONSE.not-submittable').click(function(event) { 
     $('form#survey_7042 #ACTION_SUBMIT_SURVEY_RESPONSE').removeClass('not-submittable'); 
     $('form#survey_7042 #ACTION_SUBMIT_SURVEY_RESPONSE').val('Continue'); 
     $('form#survey_7042 #ACTION_SUBMIT_SURVEY_RESPONSE').removeAttr('disabled'); 
    return false; 
    }); 

預JavaScript的按鈕：

<input type="submit" class="Button" value="Submit Survey" id="ACTION_SUBMIT_SURVEY_RESPONSE" name="ACTION_SUBMIT_SURVEY_RESPONSE"> 

Answer 1

你可以做這樣的事情

$(document).ready(function() { 

     $('#ACTION_SUBMIT_SURVEY_RESPONSE').click(function (event) { 
      if (!$('#ACTION_SUBMIT_SURVEY_RESPONSE').hasClass(".not-submittable")) { 

       //do all conditions you wish on first click 

       //if condidition meets add this class to button 
       $('#ACTION_SUBMIT_SURVEY_RESPONSE').addClass(".not-submittable"); 

       //stop form submit 
       event.preventDefault(); 
      } 
      else { 

       //calls when button have .not-submittable class may be second or any no of clicks 
       $('#ACTION_SUBMIT_SURVEY_RESPONSE').removeClass('not-submittable'); 
       $('#ACTION_SUBMIT_SURVEY_RESPONSE').val('Continue'); 
       $('#ACTION_SUBMIT_SURVEY_RESPONSE').removeAttr('disabled'); 
       //commented return false so form submits normally 
      } 
     }); 

    });  

Answer 2

而不是使用.click()的，請嘗試使用.on()和.off()方法來綁定和取消綁定事件。你的情況：

$('form#survey_7042 #ACTION_SUBMIT_SURVEY_RESPONSE.not-submittable').on("click.stopSubmit", function(event) { 

    $('form#survey_7042 #ACTION_SUBMIT_SURVEY_RESPONSE').removeClass('not-submittable'); 
    $('form#survey_7042 #ACTION_SUBMIT_SURVEY_RESPONSE').val('Continue'); 
    $('form#survey_7042 #ACTION_SUBMIT_SURVEY_RESPONSE').removeAttr('disabled'); 

    if (...conditions are met.....) { 
     $('form#survey_7042 #ACTION_SUBMIT_SURVEY_RESPONSE.not-submittable').off("click.stopSubmit"); 
    } 

    return false; 
}); 

您可能會注意到.on()方法的第一個參數是處理的字符串表示，但我附加命名空間「.stopSubmit」。 Namespacing你的處理程序允許你解除一個特定的點擊處理程序，而不是所有的點擊處理程序。最好的部分是，如果原始處理程序中有代碼仍然需要使用，則可以使用單獨的單擊處理程序來運行該代碼，並且在解除綁定「.stopSubmit」處理程序時它不會解除綁定。

請注意，.on()和.off()是推薦的綁定/解除綁定方法 - jQuery的不再建議.bind()和.unbind()。

UPDATE
閱讀不解除綁定後，直到某些條件滿足您的意見後，我會想指出的是，你可以插入一個條件的.off()電話。我更新了代碼以反映這一點。

Answer 3

如果有必須匹配使用這個地方submitable包含您的邏輯是什麼使得它可以發送表單一定的標準：

var submit = $('form#survey_7042 #ACTION_SUBMIT_SURVEY_RESPONSE'); 
submit.addClass('not-submittable'); 

submit.click(function(event) { 
    if (true == submitable) { 
     submit.removeClass('not-submittable').val('Continue').removeAttr('disabled'); 
     submit.unbind(); 
     event.preventDefault(); 
    } 
}); 

Answer 4

報價OP：「我有沒有一種形式想要提交第一個 時間提交點擊，但第二次它應該像 正常提交工作。「

使用jQuery .one()僅在第一次點擊時屏蔽submit。

http://api.jquery.com/one/

$('#ACTION_SUBMIT_SURVEY_RESPONSE').one('submit', function(e) { 
    e.preventDefault(); 
    // do what you need to do on first click 
} 

或者......

$('#ACTION_SUBMIT_SURVEY_RESPONSE').one('submit', function(e) { 
    e.preventDefault(); 
    // do what you need to do on first click 
    if (some-condition) { // under certain conditions allow submit on first click 
     $(this).submit(); 
    } 
}