下面是表单代码
<form id="ajax-contact" method="post" action="mailer.php">
<div class="field">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="field">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="field">
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
</div>
<div class="field">
<label for="Select">Select</label>
<select id="Select" name="Selct" required>
<option value="1">bad</option>
<option value="2">good</option>
<option value="3">excellent</option>
<option value="4">Gorgrous</option>
</select>
</div>
<div class="field">
<button type="submit">Send</button>
</div>
</form>
ajax调用脚本
$(function() {
// Get the form.
var form = $('#ajax-contact');
// Get the messages div.
var formMessages = $('#form-messages');
// Set up an event listener for the contact form.
$(form).submit(function(e) {
// Stop the browser from submitting the form.
e.preventDefault();
// Serialize the form data.
var name=$('#name').val();
var email=$('#email').val();
var message=$('#message').val();
var message=$('#select').val();
var formData = $(form).serialize();
alert(formData);
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData,name,email,message,select
})
.done(function(response) {
// Make sure that the formMessages div has the 'success' class.
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
// Set the message text.
$(formMessages).text(response);
// Clear the form.
$('#name').val('');
$('#email').val('');
$('#message').val('');
})
.fail(function(data) {
// Make sure that the formMessages div has the 'error' class.
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
// Set the message text.
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! An error occured and your message could not be sent.');
}
});
});
});
我试图提交表单条目点击提交按钮,在表单中我提交的名称,电子邮件,消息和评级值,我能够通过名称,电子邮件,消息与ajax调用,但选择框值没有通过。我不知道它到底是如何通过的,请检查代码中有什么问题。请帮忙改正
Just Check for Selector:
HTML <select id="Select" name="Selct" required>
JS:
var message=$('#message').val();
var message=$('#select').val();
为什么这两个变量是相同的?并检查您的SELECT ID?
应该是:
var message=$('#message').val();
var select=$('#Select').val();
或者将您的选择Id更改为小写字母select
,并将name attribute
更改为select