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="" οnsubmit="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表单的默认跳转。