2014-06-10 64 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