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时，应提交页面。当长度大于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} +  '\')'" />

顺便说一下，您在javascript:属性中不需要onXXX。只有当您将Javascript放在通常包含网址的属性中时才需要这样做，例如href。

Answer 2

我猜您应该使用附加到表单的onsubmit事件，而不是直接在提交按钮上使用onclick事件。

在这里使用带有jQuery的onsubmit事件有明显的例子 https://api.jquery.com/submit/

要阻止表单提交，您将有一些接近

的内容

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

处理提交并阻止在jQuery上提交

2 个答案: