Javascript 为什么我不提交表格';我不想这样?
我希望我的表格仅在填写完字段后提交。此时,无论下面的Javascript 为什么我不提交表格';我不想这样?,javascript,jquery,forms,Javascript,Jquery,Forms,我希望我的表格仅在填写完字段后提交。此时,无论下面的submit功能的结果如何,它都在提交 $("#findmusicians").submit(function(e) { if ($('#inputName').val() && $('#inputEmail').val() && $('#inputInstrument').val() && $('#inputFee').val() && $('#message').val
submit
功能的结果如何,它都在提交
$("#findmusicians").submit(function(e)
{
if ($('#inputName').val() && $('#inputEmail').val() && $('#inputInstrument').val() && $('#inputFee').val() && $('#message').val() != '')
{
alert('success');
}
else
{
alert('fill in all fields');
}
});
还有什么触发了它
以下是表格:
<form class="form-horizontal" role="form" id="findmusicians">
<div class="form-group">
<label for="inputName" class="col-sm-3 control-label">* Name</label>
<div class="col-md-7">
<input type="text" name="inputName" class="form-control required" minlength="1" id="inputName">
<div id="hidden"></div>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-3 control-label">* Email</label>
<div class="col-md-7">
<input type="email" name="inputEmail" class="form-control" id="inputEmail">
</div>
</div>
<div class="form-group">
<label for="inputPhone" class="col-sm-3 control-label">Telephone</label>
<div class="col-md-7">
<input type="text" name="inputTelephone" class="form-control" id="inputTelephone">
</div>
</div>
<div class="form-group">
<label for="inputInstrument" class="col-sm-3 control-label">* Instrument(s)</label>
<div class="col-md-7">
<input type="text" name="inputInstrument" class="form-control" id="inputInstrument">
</div>
</div>
<div class="form-group">
<label for="inputFee" class="col-sm-3 control-label">* Fee</label>
<div class="col-md-7">
<input type="text" name="inputFee" class="form-control" id="inputFee">
</div>
</div>
<div class="form-group">
<label for="message" class="col-sm-3 control-label">* Message</label>
<div class="col-md-9">
<textarea name="message" id="message" class="form-control" rows="3" style="height: 200px"></textarea>
<span class="help-block" style="text-align: left;">Please include as much information as possible including repertoire, rehearsal/performance times and venues.</span>
</div>
</div>
<div class="form-group">
<div class="col-md-3 col-md-offset-3">
<button id="findmusicians-submit" type="submit" class="btn btn-success">Submit request</button>
</div>
</div>
<div class="col-md-9 col-md-offset-3" style="text-align: left; padding-left: 5px">
<span id="result" class="text-success"></span>
</div>
</form>
*名字
*电子邮件
电话
*文书
*费用
*信息
请提供尽可能多的信息,包括曲目、排练/表演时间和场地。
提交请求
尝试添加e.preventDefault()
以防止表单提交。在警报之后(“填写所有字段”)
您必须调用prevendafault()
来停止表单提交事件,或者将返回false代码>在警报后('填写所有字段')代码>停止表单提交:
$("#findmusicians").submit(function(e)
{
if ($('#inputName').val() && $('#inputEmail').val() && $('#inputInstrument').val() && $('#inputFee').val() && $('#message').val() != '')
{
alert('success');
}
else
{
alert('fill in all fields');
e.preventDefault();
}
});
解释
当前,事件从您的.submit
回调中冒泡出来,基本上发生的是默认的提交例程仍然被触发
您可以通过在回调中调用e.preventDefault()
来防止这种情况,以确保事件处理程序是最后一个接收事件的
修改的代码段
如果要检查空字段,为什么不使用required
<form class="form-horizontal" role="form" id="findmusicians">
<div class="form-group">
<label for="inputName" class="col-sm-3 control-label">* Name</label>
<div class="col-md-7">
<input type="text" name="inputName" required>
</div>
</div>
<button type="submit">Submit</button>
</form>
*名字
提交
<form class="form-horizontal" role="form" id="findmusicians">
<div class="form-group">
<label for="inputName" class="col-sm-3 control-label">* Name</label>
<div class="col-md-7">
<input type="text" name="inputName" required>
</div>
</div>
<button type="submit">Submit</button>
</form>