js中向伺服器提交form提交表單不跳轉的方法
阿新 • • 發佈:2019-01-03
form表單的通常寫法是這樣的:
<form id="apply-for-help-form" method="post" action=""> <div class="apply-name inner-mod"> <div class="inner-head">請填寫您的姓名:</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">請填寫您的手機:</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">請填寫申請原因:</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>
但是form表單在提交完資料後預設是要跳轉到<form>標籤中action指向的路徑,也就是一個新的頁面,如果我們不希望頁面跳轉,那麼該怎麼處理呢?
這個不復雜,只需要在<form>標籤中新增一個onsubmit屬性,如下所示:
<form id="apply-for-help-form" method="post" action="" onsubmit="return false;">
接下來還需要做另外一個操作,需要在js程式碼中form表單的submit事件中新增"return false;"語句,如下所示:
$("#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++){ // 判斷輸入框是否有錯誤提示 if (errorLables[i].innerText != ""){ noError = false; } } if (noError == true){ // 只有輸入框校驗正確後,才向服務端傳送資料,並跳轉 submitApplyForHelpForm(serverPrefix + "", id); // to do } return false; // 頁面不跳轉 } });
這樣處理完後,就可以避免form表單的預設跳轉。