在实际的开发业务中,我们一般会利用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>