这似乎是一个相当简单的过程,但我似乎不能正确解决这个问题。
基本上只要event.preventDefault();不活跃。如果preventdefault是代码的一部分,php仍然提交给服务器,但条目都是空的。是什么导致了这种情况的发生?Console.log(formData)仍然显示正确的值,即使preventDefault是活动的。
index . html
<form id="submit-signup" method="post" action="scripts/form_submit.php">
<input type="text" name="name" type="text" placeholder="Name" required>
<input type="email" name="email" type="text" placeholder="Email" required>
<input type="text" name="phone" type="text" placeholder="Phone Number" required>
<input class="button-primary" type="submit" value="Sign Up">
</form>
main.js
window.onload = function(){
// Form submit
$('form#submit-signup').submit(function (event) {
var formData = {
'name' : $('input[name=name]').val().trim(),
'email': $('input[name=email]').val().trim(),
'phone': $('input[name=phone]').val().trim()
};
if(formData.name == '' || validateName(formData.name)){
validationMssg('Please enter a name with only letters');
} else if (formData.email == '' || !validateEmail(formData.email)){
validationMssg('Please enter an email address with a correct format: example@email.com');
} else if (formData.phone == '' || !validatePhone(formData.phone)){
validationMssg('Please enter a phone number with only digets');
} else {
// Clear error mssg
clearValidationMssg();
//if no issues attempt to push code
submitData(formData);
$('.thanks').show();
$('form#submit-signup').hide();
$('.signup-title').hide();
}
event.preventDefault();
});
};
function submitData(formData){
console.log(formData);
$.ajax({
type: 'POST',
url: 'scripts/form_submit.php',
data: formData,
contentType: "application/json; charset=utf-8",
dataType: 'json'
});
}
form_submit.php
<?php
$dbhost = '#####';
$dbuser = '#####';
$dbpass = '#####';
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
if(!$conn )
{
die('Could not connect: ' . mysql_error());
}
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$sql = "INSERT INTO signup ".
"(id, name, email, phone, timestamp) ".
"VALUES (NULL, '$name', '$email', '$phone', CURRENT_TIMESTAMP)";
mysql_select_db('pfcdb');
$retval = mysql_query( $sql, $conn );
mysql_close($conn);
?>
当event.preventDefault()存在时,php脚本提交空字段
e.p preventdefault()不工作的原因是你的ajax没有正确提交请求。
修改submitData函数
function submitData(formData){
console.log(formData);
$.ajax({
type: 'POST',
url: 'scripts/form_submit.php',
data: formData,
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
dataType: 'json',
success: function(response) {
//$('.thanks').show();
$('.thanks').html(reponse);
$('form#submit-signup').hide();
$('.signup-title').hide();
},
error: function() {
$('.thanks').html('There was an error');
}
});
}