Handling submit and preventing submit on jQuery

Question

Script:

<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>

When the checked length is 1, the page should be submitted. When the length is greater than one, dialog box should be displayed and on click of ok, the dialog box should close without submitting or refreshing the page. Can anyone help on this.

Answer 1

You need to return false from the function to prevent the form from submitting.

$(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
        }
    };
});

You also need to return the value of the function in the onclick:

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

BTW, you don't need javascript: in onXXX attributes. That's only needed when you put Javascript in an attribute that normally contains a URL, like href.

Answer 2

I guess you should use a onsubmit event attached to your form, instead of the onclick event directly on the submit button.

There is clear exemple of using the onsubmit event with jQuery here https://api.jquery.com/submit/

To prevent the form from submitting you will have something close to

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