2014-06-10 66 views
-2

我无法获得表格发布。我使用的代码是从我以前使用过的更简单的形式改编而来的。我试图采用.js和.php来处理新的表单,但是当我点击“提交”时,没有任何反应。联系表格不发布

表单中添加了一些反垃圾邮件,包括在点击提交按钮后添加表单的动作。在原始,简单的形式,这完美的作品,但在新的,按下提交时没有任何反应。

的形式与问题可以看出here

简单的形式是从可以看出衍生here

有人能看到什么,我在这里失踪?我想我会发现更多的问题,但现在我专注于试图让表单发布。

任何洞察或信息真的非常感谢!

谢谢大家, 杰森

编辑 对不起,小白不后的代码家伙...那就是:

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._-][email protected][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._%+-][email protected][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

如果您不发布一些代码,我们无法知道问题所在。 – markz

+1

正如@markz提到的,你的php代码对我们来说是不可见的。此外,总是建议将您的代码发布到您的问题中,以便将来可以用于其他具有相同问题的用户,从而避免您的网站出现故障或发生更改。 –

+0

我的坏家伙,我很低调。编辑包含代码。 – MainStWebGuy

回答

3

您在JavaScript中有错别字。您写了变量名称yearReponse而不是yearResponse。在开发w/JavaScript时检查错误控制台。

+0

谢谢,我一定会更彻底地检查。 – MainStWebGuy

+0

这解决了我的大部分问题!感谢您指出,韦恩, – MainStWebGuy

+0

我想#表单提交时,#应用程序div有焦点。我尝试在表单中添加[CODE] onsubmit =“$('form #response')。focus()”[/ CODE],但它似乎没有改变任何内容。有什么想法吗? – MainStWebGuy