javascript - 在 jQuery 上处理提交和阻止提交

Question

脚本:

<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时，应该提交页面。当长度大于一时，应显示对话框，单击ok后，对话框应关闭，而不提交或刷新页面。任何人都可以帮忙解决这个问题吗？

Answer 1

您需要从函数返回 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)时才需要这样做。