处理提交和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的

回答

相关问题