为什么 jQuery 的 .submit() 不起作用?
Why won't jQuery's .submit() work?
我正在创建一个在提交时触发 $.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 });
我正在创建一个在提交时触发 $.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 });