js中向服务器提交form提交表单不跳转的方法

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

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值