我正在创建一个表单，在提交时触发$.ajax()。然而，无论出于何种原因，.on("submit", function(){})或.submit()都不会响应表单提交。为什么jQuery的提交函数或事件不起作用?我是不是忽略了什么?
jQuery(function($) {
// show/hide the $modal.
var $modal = $(".modal"),
$modalBody = $modal.find(".modal-body"),
$formFinish = $(".modal-finished"),
$button = $("#openModal");
// Get the form.
var $form = $("#ajax-contact"),
formData = $form.serialize();
$button.on("click", function() {
$modal.fadeIn("600");
});
$modal.on("click", "#closeModal", function() {
$modal.fadeOut("600");
});
// Get the messages div.
var $formMessages = $("#form-messages");
$form.submit(function(event) {
event.preventDefault();
// Submit the form using AJAX.
var $submitForm = $.ajax({
type: "post",
url: wp_urls.ajax_url,
data: {
action: submit_form,
form: formData
}
});
$submitForm.done(function(response) {
alert("Succeed!");
$modalBody.hide();
$formFinish.show();
}).fail(function(response) {
alert("Fail!");
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal">
<div class="modal-header">
<button type="button" class="close" id="closeModal">×</button>
<h3>Request Pricing Information</h3>
</div>
<form class="modal-body form-horizontal" id="ajax-contact">
<fieldset>
<div class="control-group">
<label class="control-label">First and Last Name</label>
<div class="controls">
<input type="text" name="name" required="">
</div>
</div>
<div class="control-group">
<label class="control-label">Email</label>
<div class="controls">
<input type="email" name="email">
</div>
</div>
<div class="control-group">
<label class="control-label">Phone</label>
<div class="controls">
<input type="tel" name="tel">
</div>
</div>
<div class="control-group">
<label class="control-label">City</label>
<div class="controls">
<input type="text" name="city">
</div>
</div>
<div class="control-group">
<label class="control-label">State</label>
<div class="controls">
<select name="state">
<option value="" disabled="" class="">Select your state</option>
<option value="0">Alabama</option>
<option value="1">Alaska</option>
<option value="2">Arizona</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label">How did you hear about us?</label>
<div class="controls">
<textarea placeholder="Let us know the article, website, event, or person that led you here." name="messag"></textarea>
</div>
</div>
</fieldset>
</form>
<!-- Finished! -->
<div class="modal-body text-center pricingSubmitted">
<h4>Thank you. We will contact you shortly.</h4>
</div>
<div class="modal-footer">
<a class="btn" id="closeModal">Close</a>
<button class="btn btn-success" type="submit" value="Submit"><span>Send<span class="pricingSending">ing</span> <i class="icon-refresh icon-spin pricingSending"></i></span></button>
</div>
</div>提交按钮不在表单内部，所以它不会触发表单提交事件
改变结构，使form包裹modal的所有内部元素。然后页脚和按钮将位于
表单内<div class="modal">
<form>
<div class="modal-header"/>
<div class="modal-body"/>
<div class="modal-footer"/> <!-- contains button -->
</form>
</div>
将<button>放入表单中。如果你把它放在表单之外，它不会注册为提交表单;它只会注册为点击常规的<button>:
jQuery(function($) {
// show/hide the $modal.
var $modal = $(".modal"),
$modalBody = $modal.find(".modal-body"),
$formFinish = $(".modal-finished"),
$button = $("#openModal");
// Get the form.
var $form = $("#ajax-contact"),
formData = $form.serialize();
$button.on("click", function() {
$modal.fadeIn("600");
});
$modal.on("click", "#closeModal", function() {
$modal.fadeOut("600");
});
// Get the messages div.
var $formMessages = $("#form-messages");
$form.submit(function(event) {
event.preventDefault();
//This works now, so you'll get the following message in your console:
console.log("Hi! I'm working now!");
// Submit the form using AJAX.
var $submitForm = $.ajax({
type: "post",
url: wp_urls.ajax_url,
data: {
action: submit_form,
form: formData
}
});
$submitForm.done(function(response) {
alert("Succeed!");
$modalBody.hide();
$formFinish.show();
}).fail(function(response) {
alert("Fail!");
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal">
<div class="modal-header">
<button type="button" class="close" id="closeModal">×</button>
<h3>Request Pricing Information</h3>
</div>
<form class="modal-body form-horizontal" id="ajax-contact">
<fieldset>
<div class="control-group">
<label class="control-label">First and Last Name</label>
<div class="controls">
<input type="text" name="name" required="">
</div>
</div>
<div class="control-group">
<label class="control-label">Email</label>
<div class="controls">
<input type="email" name="email">
</div>
</div>
<div class="control-group">
<label class="control-label">Phone</label>
<div class="controls">
<input type="tel" name="tel">
</div>
</div>
<div class="control-group">
<label class="control-label">City</label>
<div class="controls">
<input type="text" name="city">
</div>
</div>
<div class="control-group">
<label class="control-label">State</label>
<div class="controls">
<select name="state">
<option value="" disabled="" class="">Select your state</option>
<option value="0">Alabama</option>
<option value="1">Alaska</option>
<option value="2">Arizona</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label">How did you hear about us?</label>
<div class="controls">
<textarea placeholder="Let us know the article, website, event, or person that led you here." name="messag"></textarea>
</div>
</div>
</fieldset>
<!-- Finished! -->
<div class="modal-body text-center pricingSubmitted">
<h4>Thank you. We will contact you shortly.</h4>
</div>
<div class="modal-footer">
<a class="btn" id="closeModal">Close</a>
<button class="btn btn-success" type="submit" value="Submit"><span>Send<span class="pricingSending">ing</span> <i class="icon-refresh icon-spin pricingSending"></i></span></button>
</div>
</form>
</div>如果您希望将按钮保留在HTML表单之外，您可以在按钮上使用.click()并在单击函数中执行AJAX调用。
的例子:
$('.btn-success').click(function() {
your AJAX call here });