因此我在大多数情况下都使用了Ajax表单,但它只提交输入标记中的数据。在我的MySql数据库中,两个输入表单都将正确提交,但我的textarea将填入“undefined”。
HTML:
<div id="contact_form">
<form name="contact" method="post" action="">
<fieldset>
<input title="name" label="Name" type="text" name="name" id="name" size="30" value="" class="text-input" />
<label class="error" for="name" id="name_error">This field is required.</label>
<input title="email" type="text" name="email" id="email" size="30" value="" class="text-input" />
<label class="error" for="email" id="email_error">This field is required.</label>
<textarea type="text" name="request" maxlength="1000" cols="25" rows="6" title="request" class="text-input"></textarea>
<label class="error" for="request" id="request_error">This field is required.</label>
<br />
<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</fieldset>
</form>
</div>
使用Javascript:
$(function() {
$('.error').hide();
$('input.text-input').css({backgroundColor:"#FFFFFF"});
$('input.text-input').focus(function(){
$(this).css({backgroundColor:"#FFDDAA"});
});
$('input.text-input').blur(function(){
$(this).css({backgroundColor:"#FFFFFF"});
});
$(".button").click(function() {
// validate and process form
// first hide any error messages
$('.error').hide();
var name = $("input#name").val();
if (name == "") {
$("label#name_error").show();
$("input#name").focus();
return false;
}
var email = $("input#email").val();
if (email == "") {
$("label#email_error").show();
$("input#email").focus();
return false;
}
var request = $("textarea#request").val();
if (request == "") {
$("label#request_error").show();
$("textarea#request").focus();
return false;
}
var dataString = 'name='+ name + '&email=' + email + '&request=' + request;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "bin/process.php",
data: dataString,
success: function() {
$('#contact_form').html("<div id='message'></div>");
$('#message').html("<h2>Contact Form Submitted!</h2>")
.append("<p>We will be in touch soon.</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='checkmark' src='images/check.png' />");
});
}
});
return false;
});
});
runOnLoad(function(){
$("input#name").select().focus();
});
PHP:
<?php
$name=$_POST['name'];
$email=$_POST['email'];
$request=$_POST['request'];
mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("form") or die(mysql_error());
mysql_query("INSERT INTO `ajaxform` VALUES ('$name', '$email', '$request')") or die(mysql_error());
?>
答案 0 :(得分:2)
Textarea没有 id =“request”
<textarea type="text" name="request" maxlength="1000" cols="25"
rows="6" title="request" class="text-input"></textarea>
$("textarea#request").val();
添加字段的ID或尝试此
$("textarea[name='request']").val();
答案 1 :(得分:2)
这是问题所在:
var request = $("textarea#request").val();
id
上没有textarea
“请求”。
要修复,请执行以下操作之一:
var request = $("textarea.text-input").val();
<textarea type="text" id="request" name="request" maxlength="1000" cols="25" rows="6" title="request" class="text-input"></textarea>