處理提交和jQuery的

腳本阻止提交：處理提交和jQuery的

<script type="text/javascript"> 
    var modifyActionURL; 
    $(document).ready(function() { 
      modifyActionURL = function(obj) { 
       if (($('.checkboxclass:checked').length == 1)) { 
        $("#searchForm").attr("action", obj); 
       } else if ($('.checkboxclass:checked').length > 1) { 
        $("#dialogOnlyOne").dialog({ 
         height: 200, 
         width: 500,             
         modal: true, 
         open: function (type, data) { 
          $('.ui-dialog').css('z-index', 9999);           
          $(this).parent().appendTo("form"); 
         }, 
         close: function(event, ui) { 
          $("#dialogOnlyOne").hide(); 
         }, 
         buttons: [ 
            { 
              text: "Ok", 
              type: "button", 
              click: function() { 
               $(this).dialog("close"); 
              }           
             } 
           ] 
         }); 
       } else { 
        alert('Please select a row'); 
       } 
      }; 
</script>

HTML：

<form id="searchForm" action="#" th:object="${search}" method="post">   
    <div id="dialogOnlyOne" class="window"> 
     <p style="background-color: #ffffff">Please select only one row.</p> 
    </div> 

    <input type="submit" value="Modify" class="btn btn-primary" id="modify" th:onclick="'javascript:modifyActionURL(\'' + @{/search/modify} + '\')'" /> 
</form>

當檢查的長度爲1，頁面應提交。當長度大於1時，應顯示對話框，並單擊ok，對話框應關閉而不提交或刷新頁面。任何人都可以提供幫助。

來源

2015-07-10 Java_User

您確定按鈕沒有提交表單，您面臨的問題是什麼？然而，在你的對話框中，我看到一個你可以將它改爲 – progrAmmar

@progrAmmar問題是單擊OK應該關閉對話框_without_ submiting the form。 – Barmar

@progrAmmar''可以工作，但是對於if條件將會失敗。在這種情況下，它不會提交。 –

你需要從函數返回false到清晰爲例阻止表單提交。

$(document).ready(function() { 
    modifyActionURL = function(obj) { 
     if (($('.checkboxclass:checked').length == 1)) { 
      $("#searchForm").attr("action", obj); 
     } else if ($('.checkboxclass:checked').length > 1) { 
      $("#dialogOnlyOne").dialog({ 
       height: 200, 
       width: 500,             
       modal: true, 
       open: function (type, data) { 
        $('.ui-dialog').css('z-index', 9999);           
        $(this).parent().appendTo("form"); 
       }, 
       close: function(event, ui) { 
        $("#dialogOnlyOne").hide(); 
       }, 
       buttons: [ 
        { 
         text: "Ok", 
         type: "button", 
         click: function() { 
          $(this).dialog("close"); 
         }           
        } 
       ] 
      }); 
      return false; // prevent form submission 
     } else { 
      alert('Please select a row'); 
      return false; // prevent form submission 
     } 
    }; 
});

您還需要返回的onclick函數的值：

<input type="submit" value="Modify" class="btn btn-primary" id="modify" th:onclick="'return modifyActionURL(\'' + @{/search/modify} + '\')'" />

順便說一句，你不onXXX屬性需要javascript:。只有當您將Javascript放入通常包含URL的屬性（如href）時才需要。

來源

2015-07-10 02:14:38 Barmar

我已經嘗試過'返回false;'和'e.preventDefault'。兩者都不起作用 –

您還需要在'onclick'中有'return'語句，我已經更新了答案。 – Barmar

謝謝。我會嘗試這個解決方案 –

我想你應該使用附加到你的表單的onsubmit事件，而不是直接在提交按鈕上的onclick事件。

有使用onsubmit事件使用jQuery這裏 https://api.jquery.com/submit/

爲了防止形式從提交後，您將有一些接近

$("#target").submit(function(event) { 
    alert("Handler for .submit() called."); 
    event.preventDefault(); 
});

來源

2015-07-10 02:14:00

你的函數缺少'obj'參數，它用於替換表單的'action'屬性。 – Barmar

是的你是對的，我試圖通過使用event.preventDefault（）來顯示阻止提交事件的最佳方式;方法 –

我明白這一點。但是，如果解決方案導致另一個問題，這不是很有幫助。 – Barmar

處理提交和jQuery的

回答

相關問題