联系表格未过帐

时间:2014-06-10 15:04:20

标签: php jquery ajax contact-form

我无法找到要发布的表单。我使用的代码改编自过去使用的更简单的形式。我试图采用.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>&nbsp;</td>
              <td><strong>Vehicle Information:</strong></td>
              <td>&nbsp;</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">&nbsp;</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" />&nbsp;Yes&nbsp;&nbsp;&nbsp;<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">&nbsp;</td>
            </tr>
            <tr>
                <td colspan="4">&nbsp;</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">&nbsp;</td>
            </tr>
            <tr>
                <td colspan="4">&nbsp;</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">&nbsp;</td>
            </tr>
            <tr>
            <td colspan="4" align="center"><button type="submit" name="submit" id="submit">Submit Claim</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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);
}

?> 

1 个答案:

答案 0 :(得分:3)

您的JavaScript中有拼写错误。您编写了变量名yearReponse而不是yearResponse。在使用JavaScript开发时检查错误控制台。