Detailed explanation of jQuery.submit() function

Thesubmit() function is used to bind a handler function to the submit event of each matching element. This function can also be used to trigger the submit event. In addition, you can also pass some additional data to the Event Handling function.

The submit event will be triggered when the form is submitted. This event only applies to

elements.

In addition, you can call this function multiple times for the same element to bind multiple event handlers. When the submit event is triggered, jQuery will execute the bound event processing functions in the order of binding.

To delete an event bound via submit(), use the unbind() function.

This function belongs to the jQuery object (instance).

Syntax

jQueryObject.submit( [ [ data ,] handler ] )

If at least one parameter is specified, it means binding the handler function of the submit event; if not specified Any parameter means triggering the submit event.

Parameters

Parameter Description

data Optional/Any type of data that needs to be passed to the event processing function through event.data when an event is triggered.

handler Optional/event handling function specified by Function type.

jQuery 1.4.3 New support: submit() supports data parameters.

This in the parameter handler points to the current DOM element. submit() will also pass in a parameter to the handler: the Event object representing the current event.

If the return value of the function handler is false, it means to prevent the element's default event behavior and stop the event from bubbling in the DOM tree. For example, if the handler function of the click event of the link returns false, the default URL jump behavior of the link can be prevented. The handler function of the submit event of the form returns false, which can prevent the form's default form submission behavior.

Return value

submit()The return value of the function is of jQuery type and returns the current jQuery object itself.

Example & Description

Please refer to the following initial HTML code:

<form id="myForm" action="http://www.365mini.com" method="post">
    <input id="name" name="name" type="text" value="CodePlayer" /><br>
    <input id="age" name="age" type="text" value="20" /><br>
    <input type="submit" value="提交" />
</form>
<div id="msg"></div>

Now, we bind a handler function to the submit event of the element (you can bind Defined multiple, executed in sequence according to the binding order when triggered):

$("form").submit( function(event){
    if( !$("#name").val() ){
        alert("姓名不能为空!");
        return false; // 返回值为false，将阻止表单提交
    }else if( !$("#age").val() ){
        alert("年龄不能为空!");
        return false; // 返回值为false，将阻止表单提交
    }
} );
// 触发form元素的submit事件
// $("form").submit( );

We can also pass some additional data to the event processing function. In addition, through the parameter Event object passed in by jQuery for the event processing function, we can obtain relevant information about the current event (such as event type, DOM element that triggered the event, additional data, etc.):

var map = { name: "姓名", age: "年龄" };
$("form").submit( map, function(event){
    var labelMap = event.data;
    var label = '';
    // 循环验证所有text元素是否为空
    $(this).find(":text").each(function(){
        if( !this.value ){
            label = labelMap[this.name];
            return false;
        }       
    });    
    if( label ){
        alert( label + "不能为空!" );
        return false;
    }
} );

The above is the detailed content of Detailed explanation of jQuery.submit() function. For more information, please follow other related articles on the PHP Chinese website!