The method of submitting a form to the server in js and submitting the form without jumping

       The usual way to write a form is like this:

 
 
<form id="apply-for-help-form" method="post" action="">
                        <div class="apply-name inner-mod">
                            <div class="inner-head">Please fill in your name:</div>
                            <div class="inner-body">
                                <input type="text" id="name" class="input_txt" name="name" placeholder="请输入您的姓名">
                            </div>
                        </div>
                        <div class="apply-phone inner-mod">
                            <div class="inner-head">Please fill in your phone:</div>
                            <div class="inner-body">
                                <input type="number" id="phone" name="phone" class="input_txt" placeholder="请输入您的手机号">
                            </div>
                        </div>
                        <div class="help-reason inner-mod">
                            <div class="inner-head">Please fill in the reason for application:</div>
                            <div class="inner-body">
                                <textarea id="apply-reason" name="reason" class="textarea" maxlength="51" placeholder="请输入申请原因"></textarea>
                            </div>
                        </div>
                        <input type="submit" id="submit-btn" class="full-width-btn need-active" value="提交"><!--<i class="icon icon-hand-grab-o"></i>-->
                    </form>



       However, after the form form submits the data, it defaults to jump to the path pointed to by the action in the <form> tag, which is a new page. If we don't want the page to jump, what should we do?

       This is not complicated, just add an onsubmit attribute to the <form> tag as follows:

<form id="apply-for-help-form" method="post" action="" onsubmit="return false;">
       Next, you need to do another operation, you need to add a " return false; " statement to the submit event of the form form in the js code, as shown below:

$("#apply-for-help-form").submit(function(){
        if (!isV2gogoApp()){
            $(".apply-for-help").hide();
            showDownloadAPPColorbox();
        }
        else {
            var noError = true;
            var errorLables = $("label");
            for (var i = 0; i < errorLables.length; i++){ // Determine if there is an error message in the input box
                if (errorLables[i].innerText != ""){
                    noError = false;
                }
            }
            if (noError == true){ // Only after the input box is verified correctly, send data to the server and jump
                submitApplyForHelpForm(serverPrefix + "", id);  // to do
            }
            return false; // page does not jump
        }
    });

         After this is done, the default jump of the form form can be avoided.

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325381227&siteId=291194637