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

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

JAVASCRIPT代码部分

<script type="text/javascript">
$(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:"html",
            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> 

评论

发表回复

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