What are the ways to submit forms in JavaScript?

There are three ways to submit form forms in JavaScript: directly through the submit button to implement form submission, through the button button to trigger the onclick event to implement form submission, and the submit button to trigger the onsubmit event to implement form submission

Form in the page Submission is a very common way. Next, I will introduce several methods to implement form submission in this article. It has certain reference value and I hope it will be helpful to everyone.

【Recommended course: javascript tutorial】

Method 1

Use the submit button to achieve the form submission effect

Example:

<form action="demo.asp" method="post">
    First name:<br>
    <input type="text" name="firstname" value="Mickey"><br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse"><br><br>
    <input type="submit" value="提交">
</form>
<script>
/*这里是提交表单前的非空校验*/
    $("form").submit(function () {
        var first = $("input[name=&#39;firstname&#39;]").val();
        var last = $("input[name=&#39;lastname&#39;]").val();
        if (first == "" || first == null || first == undefined) {
            alert("first");
            return false;/*阻止表单提交*/
        } else if (last == "" || last == null || last == undefined) {
            alert("last");
            return false;/*阻止表单提交*/
        } else {
            alert("提交");
            return true;
        }
    })
</script>

As shown in the above code, when we click the submit button, the form data Will be sent to the page named demo.asp. The form submission implemented by the submit button is direct submission. But we can use some methods to verify the need for form submission or to submit the form according to our own custom needs

Method 2

You can use the button button To implement form submission, when the button button is clicked, the onclick event is triggered, and the function in JavaScript determines whether the input content is empty. If it is empty, false is returned, and the form submission will not occur at this time. If not empty, the form is submitted to the address specified by action.

<script type="text/javascript">
         function check(form) {
              if(form.userId.value==&#39;&#39;) {
                    alert("请输入用户帐号!");
                    form.userId.focus();
                    return false;
               }
               if(form.password.value==&#39;&#39;){
                    alert("请输入登录密码!");
                    form.password.focus();
                    return false;
                }
                  document.myform.submit();
            }
    </script>
<form action="demo.asp" name="myform" method="post">
    用户帐号<input type=text name="userId" size="18" value="" ><br>
    登录密码<input type="password" name="password" size="19" value=""/>      
    <input type=button name="submit1" value="登陆" onclick="check(this.form)">  
</form>

Note: In this method, since the button button does not have the function of automatic submission, the submission is implemented by JavaScript statements

Method 3

Passed Use the submit button to submit the form. When we click the submit button, the onsubmit event is first triggered, and then the function in JavaScript determines whether the input content is empty. If the input content is empty, false is returned and the form is not submitted. If the input content is not empty, it will be submitted to the address specified by action

<script type="text/javascript">
         function check(form) {
              if(form.userId.value==&#39;&#39;) {
                    alert("请输入用户帐号!");
                    form.userId.focus();
                    return false;
               }
               if(form.password.value==&#39;&#39;){
                    alert("请输入登录密码!");
                    form.password.focus();
                    return false;
                }
                return true;
         }
</script>
<form action="demo.asp act=login" method="post" onsubmit="return check(this)">
    用户帐号<input type=text name="userId" size="18" value="" ><br>
    登录密码<input type="password" name="password" size="19" value=""/>      
    <input type=submit name="submit1" value="登陆"> 
</form>

Summary: The above is the entire content of this article. I hope this article can help everyone learn several ways to submit form forms.

The above is the detailed content of What are the ways to submit forms in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!