我无法找到要发布的表单。我使用的代码改编自过去使用的更简单的形式。我试图采用.js和.php来处理新表单,但是当我点击"提交"没有任何反应。
表单中添加了一些反垃圾邮件,包括在单击提交按钮后添加表单的操作。在原始的,简单的形式上,这非常有效,但在新的方面,按下提交时没有任何反应。
可以看到有问题的表单here
可以看到源自的简单表单here
谁能看到我在这里失踪的东西?我假设我也会发现更多问题,但现在我专注于尝试让表格发布。
真的非常感谢任何见解或信息!
谢谢大家, 杰森
修改 对不起没有代码人员的noob帖子...这里是:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<form role="ajaxExample" method="post" action="" enctype="multipart/form-data" id="agents">
<div id="response"></div>
<table cellpadding="2" cellspacing="3">
<tr>
<td><strong>Customer Information:</strong></td>
<td> </td>
<td><strong>Vehicle Information:</strong></td>
<td> </td>
</tr>
<tr>
<td>
<label for="name">Name:</label>
</td>
<td>
<input type="text" name="cusName" id="cusName">
</td>
<td><label for="year">Year:</label></td>
<td>
<select name="year" id="year" tabindex="9">
<option value="">Select Year...</option>
<?php
for ($x = date("Y") + 1; $x >= 1962; $x--)
{
echo '<option value="'.$x.'"'.'>'.$x."</option>";
}
?>
</select>
</td>
</tr>
<tr>
<td><label for="address">Address:</label></td>
<td><input type="text" name="cusAddress" id="cusAddress" /></td>
<td><label for="make">Make:</label></td>
<td><input type="text" name="make" id="make" /></td>
</tr>
<tr>
<td><label for="city">City:</label></td>
<td><input type="text" name="city" id="city" /></td>
<td><label for="model">Model:</label></td>
<td><input type="text" name="model" id="model" /></td>
</tr>
<tr>
<td><label for="state">State:</label></td>
<td><input type="text" name="state" id="state" /></td>
<td><label for="bodyStyle">Body Style:</label></td>
<td>
<select name="bodyStyle" id="bodyStyle">
<option value="" selected="selected">Select...</option>
<option value="2 Door">2 Door</option>
<option value="4 Door">4 Door</option>
<option value="Wagon">Wagon</option>
<option value="Hatchback">Hatchback</option>
<option value="Other">Other</option>
</select>
</td>
</tr>
<tr>
<td><label for="zip">Zip Code:</label></td>
<td><input type="text" name="zip" id="zip" /></td>
<td><label for="vin">VIN Number:</label></td>
<td><input type="text" name="vin" id="vin" maxlength="17" /></td>
</tr>
<tr>
<td><label for="homePhone">Home Phone:</label></td>
<td><input type="text" name="homePhone" id="homePhone" /></td>
<td><label for="damagedGlass">Damaged Glass:</label></td>
<td><input type="text" name="damagedGlass" id="damagedGlass" /></td>
</tr>
<tr>
<td><label for="workPhone">Work Phone:</label></td>
<td><input type="text" name="workPhone" id="workPhone" /></td>
<td></td>
<td></td>
</tr>
<tr>
<td><label for="cellPhone">Cell Phone:</label></td>
<td><input type="text" name="cellPhone" id="cellPhone" /></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<td><strong>Insurance Information:</strong></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><label for="insCompany">Ins. Company:</label></td>
<td><input type="text" name="insCompany" id="insCompany" /></td>
<td><label for="agency">Agency</label></td>
<td><input type="text" name="agency" id="agency" /></td>
</tr>
<tr>
<td><label for="policy">Policy#:</label></td>
<td><input type="text" name="policy" id="policy" /></td>
<td><label for="sentBy">Sent By:</label></td>
<td><input type="text" name="sentBy" id="sentBy" /></td>
</tr>
<tr>
<td><label for="compCoverage">Comp. Coverage:</label></td>
<td><input type="radio" name="compCoverage" id="compCoverage" value="YES" /> Yes <input type="radio" name="compCoverage" id="compCoverage" /></td>
<td><label for="deductible">Deductible:</label></td>
<td><input type="text" name="deductible" id="deductible" /></td>
</tr>
<tr>
<td><label for="dateOfLoss">Date Of Loss:</label></td>
<td><input type="text" name="dateOfLoss" id="dateOfLoss" /></td>
<td><label for="causeOfLoss">Cause Of Loss</label></td>
<td><input type="text" name="causeOfLoss" id="causeOfLoss" /></td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<td colspan="2" align="right"><label for="replyEmail">Reply Email Address:</label></td>
<td colspan="2"><input type="text" name="replyEmail" id="replyEmail" /></td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<td colspan="2"><label for="specialInstructions">Are There Any Special Instructions?</label></td>
<td colspan="2"><textarea name="specialInstructions" id="specialInstructions" cols="38" rows="6"></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="hidden" name="honeypot" id="honeypot" value="http://"></td>
<td colspan="2"><input type="hidden" name="humancheck" id="humanCheck" class="clear" value=""></td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<td colspan="4" align="center"><button type="submit" name="submit" id="submit">Submit Claim</button> <input type="reset" name="reset" value="Reset Form"/></td>
</tr>
</table>
</form>
</body>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/ajax_submit.js" type="text/javascript"></script>
</html>
JS
$(document).ready(function() {
$('#agents input:submit').click(function() {
$('#agents form').attr('action', 'http://' + document.domain + '/php/feedback.php');
$('#agents form').submit();
});
$('form #response').hide();
$('form #nameResponse').hide();
$('form #phoneResponse').hide();
$('form #emailResponse').hide();
$('form #messageResponse').hide();
$('#submit').click(function(e) {
// prevent forms default action until
// error check has been performed
e.preventDefault();
// grab form field values
var valid = '';
var nameResponse = '';
var addressResponse = '';
var cityResponse = '';
var stateResponse = '';
var zipResponse = '';
var phoneResponse = '';
var yearReponse = '';
var makeResponse = '';
var modelResponse = '';
var bodyStyleResponse = '';
var vinResponse = '';
var damagedGlassResponse = '';
var insCompanyResponse = '';
var agencyResponse = '';
var policyResponse = '';
var sentByResponse = '';
var compCoverageResponse = '';
var deductibleResponse = '';
var dateOfLossResponse = '';
var causeOfLossResponse = '';
var replyEmailResponse = '';
var specialInstructionsResponse = '';
var required = ' is required.';
//Custom Information
var name = $('form #cusName').val();
var address = $('form #cusAddress').val();
var city = $('form #city').val();
var state = $('form #state').val();
var zip = $('form #zip').val();
var homePhone = $('form #homePhone').val();
var workPhone = $('form #workPhone').val();
var cellPhone = $('form #cellPhone').val();
//Vehicle Information
var year = $('form #year').val();
var make = $('form #make').val();
var model = $('form #model').val();
var bodyStyle = $('form #bodyStyle').val();
var vin = $('form #vin').val();
var damageGlass = $('form #damagedGlass').val();
//Insurance Information
var insCompany = $('form #insCompany').val();
var agency = $('form #agency').val();
var policy = $('form #policy');
var sentBy = $('form #sentBy');
var compCoverage = $('form #compCoverage').val();
var deductible = $('form #deductible').val();
var dateOfLoss = $('form #dateOfLoss').val();
var causeOfLoss = $('form #causeOfLoss').val();
var replyEmail = $('form #replyEmail').val();
var specialInstructions = $('form #specialInstructions').val();
//Spam Info
var honeypot = $('form #honeypot').val();
var humanCheck = $('form #humanCheck').val();
// perform error checking
//Customer
if (name = '' || name.length <= 2) {
nameResponse += '<p>Customer name' + required +'</p>';
}
if (address = '' || address.length <= 5) {
addressResponse += '<p>Customer address' + required + '</p>';
}
if (city = '' || city.length <=2) {
cityResponse += '<p>Customer city' + required + '</p>';
}
if (state = '' || state.length < 2) {
stateResponse += '<p>Customer state' + required + '</p>';
}
if (zip = '' || zip.length <= 4) {
zipResponse += '<p>Customer zip code' + required + '</p>';
}
if (homePhone = '' || homePhone.length < 7) {
phoneResponse += '<p>Customer home phone' + required + '</p>';
}
//Vehicle
if (year = '' || year.length < 4) {
yearResponse += '<p>Vehicle year (ex: 2011)' + required + '</p>';
}
if (make = '' || make.length <=2) {
makeResponse += '<p>Vehicle make' + required + '</p>';
}
if (model = '' || model.length < 2) {
modelResponse += '<p>Vehicle model' + required + '</p>';
}
if (bodyStyle = '') {
bodyStyleReponse += '<p>Please select a body style</p>';
}
if (vin = '' || vin.length <= 16) {
vinResponse += '<p>Vin number' + required + '</p>';
}
if (damagedGlass = '' || damagedGlass <= 3) {
damagedGlassResponse += '<p>Damaged Glass' + required + '</p>';
}
//Insurance
if (insCompany = '' || insCompany.length <=2) {
insCompanyResponse += '<p>Insurance company' + required + '</p>';
}
if (agency = '' || agency.length <=3) {
agencyResponse += '<p>Agency' + required + '</p>';
}
if (policy = '' || policy.length <=5) {
policyResponse += '<p>Policy number' + required + '</p>';
}
if (sentBy = '' || sentBy.length <= 6) {
sentByResponse += '<p>Please include your name in the ' + '"Sent By"' + 'field</p>';
}
if (compCoverage = '') {
compCoverage += '<p>Comp Coverage' + required + '</p>';
}
if (deductible = '') {
deductibleResponse += '<p>Deductible' + required + '</p>';
}
if (dateOfLoss = '' || dateOfLoss.length <= 3) {
dateOfLoss += '<p>Date of loss' + required + '</p>';
}
if (causeOfLoss = '' || causeOfLoss.length <= 3) {
causeOfLoss += '<p>Cause of loss' + required + '</p>';
}
if (!replyEmail.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
replyEmailResponse += '<p>Your reply email' + required +'</p>';
}
if (specialInstructions = '' || specialInstructions.length <= 5) {
specialInstructionsResponse += '<p>A message' + required + '</p>';
}
if (honeypot != 'http://') {
valid += '<p>Spambots are not allowed.</p>';
}
if (humanCheck != '') {
valid += '<p>A human user' + required + '</p>';
}
// let the user know if there are erros with the form
if (valid != '') {
$('form #response').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
'<strong>Please correct the errors below.</strong>' + '</div>'
).fadeIn('fast');
if (nameResponse != '') {
$('form #nameResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
nameResponse + '</div>'
).fadeIn('fast');
}
if (addressResponse != '') {
$('form #addressResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
addressResponse + '</div>'
).fadeIn('fast');
}
if (cityResponse != '') {
$('form #cityResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
cityResponse + '</div>'
).fadeIn('fast');
}
if (stateResponse != '') {
$('form #stateResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
stateResponse + '</div>'
).fadeIn('fast');
}
if (zipResponse != '') {
$('form #zipResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
zipResponse + '</div>'
).fadeIn('fast');
}
if (phoneResponse != '') {
$('form #phoneResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
phoneResponse + '</div>'
).fadeIn('fast');
}
if (yearResponse != '') {
$('form #yearResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
yearResponse + '</div>'
).fadeIn('fast');
}
if (makeResponse != '') {
$('form #makeResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
makeResponse + '</div>'
).fadeIn('fast');
}
if (modelResponse != '') {
$('form #modelResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
modelResponse + '</div>'
).fadeIn('fast');
}
if (bodyStyleResponse != '') {
$('form #addressResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
bodyStyleResponse + '</div>'
).fadeIn('fast');
}
if (vinResponse != '') {
$('form #vinResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
vinResponse + '</div>'
).fadeIn('fast');
}
if (damagedGlassResponse != '') {
$('form #damagedGlassResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
damagedGlassResponse + '</div>'
).fadeIn('fast');
}
if (insCompanyResponse != '') {
$('form #insCompanyResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
insCompanyResponse + '</div>'
).fadeIn('fast');
}
if (agencyResponse != '') {
$('form #agencyResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
agencyResponse + '</div>'
).fadeIn('fast');
}
if (policyResponse != '') {
$('form #policyResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
policyResponse + '</div>'
).fadeIn('fast');
}
if (sentByResponse != '') {
$('form #sentByResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
sentByResponse + '</div>'
).fadeIn('fast');
}
if (compCoverageResponse != '') {
$('form #compCoverageResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
compCoverageResponse + '</div>'
).fadeIn('fast');
}
if (deductibleResponse != '') {
$('form #deductibleResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
deductibleResponse + '</div>'
).fadeIn('fast');
}
if (dateOfResponse != '') {
$('form #dateOfResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
dateOfResponse + '</div>'
).fadeIn('fast');
}
if (causeOfResponse != '') {
$('form #causeOfResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
causeOfResponse + '</div>'
).fadeIn('fast');
}
if (replyEmailResponse != '') {
$('form #replyEmailResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
replyEmailResponse + '</div>'
).fadeIn('fast');
}
if (specialInstructionsResponse != '') {
$('form #specialInstructionsResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
specialInstructionsResponse + '</div>'
).fadeIn('fast');
}
}
// let the user know something is happening behind the scenes
// serialize the form data and send to our ajax function
else {
$('form #response').removeClass().addClass('processing').html('Processing...').fadeIn('fast');
var formData = $('form').serialize();
submitForm(formData);
}
});
});
function submitForm(formData) {
$.ajax({
type: 'POST',
url: 'php/feedback.php',
data: formData,
dataType: 'json',
cache: false,
timeout: 7000,
success:
function(data) {
//we are getting data.error (from ajax, which is formData) and data.msg from our feedback.php
$('form #response').removeClass().addClass((data.error === true) ? 'error':'success')
.html(data.msg).fadeIn('fast');
if ($('form #response').hasClass('success')) {
setTimeout ("$('form #response').fadeOut('fast')",5000);
}
},
error:
function (XMLHttpRequest, textStatus, errorThrown) {
$('form #response').removeClass().addClass('error')
.html('<div class="alert alert-danger">' +
'<p>There was an <strong>' + errorThrown +
'</strong> error due to a <strong>' + textStatus +
'</strong> condition.</p>' +
'</div>').fadeIn('fast');
},
complete: function(XMLHttpRequest, status) {
$('form') [0].reset();
}
});
};
PHP:
<?php
sleep(.5);
//Sanitize incoming data and create variables
$name = trim(stripslashes(htmlspecialchars($_POST['name'])));
...
$humancheck = $_POST['humancheck'];
$honeypot = $_POST['honeypot'];
if ($honeypot == 'http://' && empty($humancheck)) {
//Validate data and return success or error message
$error_message = '';
$reg_exp = "/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,4}$/";
if (!preg_match($reg_exp, $email)) {
$error_message .= "<p>A valid email address is required.</p>";
}
if (empty($name)) {
$error_message .= "<p>Please provide your name.</p>";
}
if (empty($message)) {
$error_message .= "<p>A message is required.</p>";
}
if (!empty($error_message)) {
$return['error'] = true;
$return['msg'] = '<div class="alert alert-danger">'."<h4>Oops! The request was successful but your form is not filled out correctly.</h4>".$error_message;
echo json_encode($return);
exit();
}
else {
//mail variables
...
//send email and return a message to user
if(mail($to, $subject, $body, $headers)) {
$return['error'] = false;
$return['msg'] =
'<div class="alert alert-success">'.
"<h4>Thank you for using our form ".$sentBy ."</h4>".
"<p>We'll reply to you at ".$email." as soon as we can.</p>";
echo json_encode($return);
}
else {
$return['error'] = true;
$return['msg'] = "<h4>Oops! There was a problem sending the email. Please try again.</h4>";
echo json_encode($return);
}
}
}
else {
$return['error'] = true;
$return['msg'] = "<h4>Oops! There was a problem with your submission. Please try again.</h4>";
echo json_encode($return);
}
?>
答案 0 :(得分:3)
您的JavaScript中有拼写错误。您编写了变量名yearReponse
而不是yearResponse
。在使用JavaScript开发时检查错误控制台。