Javascript开发jQuery Ajax 返回值如何阻止form表单提交?

在实际的开发业务中,我们一般会利用ajax检测一些东西,然后阻止表单提交。如果我们在 ajax 代码中直接使用 return false; 这里必须在 $.ajax 中设置 async:false 任然无法阻止表单提交,所以我们使用 the_submit 来控制表单是否提交。

JAVASCRIPT代码部分

<script type="text/">
$(function() {
    $("#addForm input.btn_submit").click(function(){
        var the_submit = true;
        if( $("input.name").val() == "" ){
            alert('请填写机房');
            $("input.name").focus();
            the_submit = false;
        }
        if( $("select.status").val() == "" ){
            alert('请选择状态');
            $("select.status").focus();
            the_submit = false;
        }
	$.ajax({
            url:"/idc_xiaoshou/check_third_party_computer_room_name",
            dataType:"",
            type:"post",
            data:{ name:$('input.name').val() },
            async:false,////////////
            success:function(data){
              console.log(data);
                if( data == 0 ){
                    alert("机房名重复");
                    $("input.name").focus();
                    the_submit = false;
                }
            },
            error:function(data){
                alert('UNKNOW ERROR');
                the_submit = false;
            }
	});

        if( !the_submit ){
            return false;
        }
    });


});	
</script>

HTML代码部分

            <form enctype="multipart/form-data" action="/idc_xiaoshou/save_third_party_computer_room" method="post" id="addForm" name="form1" >     
              <input type="hidden" name="id" value="<?php echo $obj['id']; ?>"/>
              <table border="0" cellpadding="0" cellspacing="0" class="table2" style="margin:0 auto">          
                  <tr>
                      <td align="right">机房:</td>
                      <td><input class="textinput1 name" value="<?php echo $obj['name'];?>" type="text" name="name" style="width: 200px;"/></td>
                      <td><span class="color1">*</span></td>
                  </tr>
                  <tr>
                      <td align="right">状态:</td>
                      <td>
                          <select style="min-width: 100px" name="status" class="textinput1 status">
                              <option value="" >所有</option>
                              <?php foreach( $statusAry as $v):?>
                              <option value="<?php echo $v;?>"><?php echo $v;?></option>
                              <?php endforeach;?>
                          </select>        
                      </td>
                      <td><span class="color1">*</span></td>
                  </tr>
                  <tr>
                      <td align="right">备注:</td>
                      <td><textarea name="others" class="textinput1" cols="50" rows="10"><?php echo $obj['others']?></textarea></td>
                      <td></td>
                  </tr>        
                  <tr>
                      <td></td>
                      <td colspan="2"><input type="submit" value="提交" class="btn_submit"/></td>
                  </tr>
            </table>
            </form> 

搬瓦工,CN2高速线路,1GB带宽,电信联通优化KVM,延迟低,速度快,建站稳定,搬瓦工BandwagonHost VPS优惠码BWH26FXH3HIQ,支持<支付宝> 【点击购买】!

Vultr月付$3.5日本节点,512M内存/500G流量/1G带宽,电信联通优化,延迟低,速度快注册即送$50点击购买】!

腾讯云爆款1C1G云服务器首年99元

阿里云香港、新加坡VPS/1核/1G/25G SSD/1T流量/30M带宽/年付¥288【点击购买】

发表评论

电子邮件地址不会被公开。 必填项已用*标注