[英]Why is my form submitting when I don't want it to?
我希望我的表单只在填写字段时才提交。 无论下面submit
函数的结果如何,它目前都在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>
目前,该事件从内冒泡 .submit
回调,基本上什么发生的是默认提交程序仍然被解雇。
您可以通过从回调中调用e.preventDefault ()
来防止这种情况,以确保您的事件处理程序是最后一个接收事件。
$("#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 () // stop the event
}
});
alert('fill in all fields');
你必须调用preventDafault()
来停止表单提交事件或者只是把return false;
alert('fill in all fields');
后alert('fill in all fields');
停止表单提交:
$("#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();
}
});
尝试添加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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.