2016-10-24 98 views
0

我一直在調試這種形式的最後兩天,我只是無法弄清楚發生了什麼事情..!變量和表單ID都似乎檢查每個文件,但是當我上傳它..我得到的JS文件的錯誤代碼「對不起,'名稱',有一個問題」。無法獲得JS表格的工作

任何想法?

.HTML

<div class="col-md-6 padding-none"> 
        <div class="box-white padding-all"> 
         <h2 class="title-border right block-mobile">Contact Headquarters</h2> 
         <div class="data-form"> 
         <input type="hidden" name="qualform" id="qualform" value="Headquarters"> 
          <form action="post" name="sentMessage" id="contactForm" novalidate> 
          <div class="row"> 
           <div class="col-md-6 col-md-6 col-md-12 col-md-12"> 
            <label>Name</label> 
            <div class="form-field"> 
             <i class="fa fa-user"></i> 
             <input type="text" class="form-control" name="name" placeholder="Enter your name" id="name" required> 
            </div> 
           </div> 
           <div class="col-md-6 col-md-6 col-md-12 col-md-12"> 
            <label>Company</label> 
            <div class="form-field"> 
             <i class="fa fa-building-o"></i> 
             <input type="text" class="form-control" name="company" placeholder="Enter your company" id="company" required> 
            </div> 
           </div> 
          </div> 
          <div class="row"> 
           <div class="col-md-6 col-md-6 col-md-12 col-md-12"> 
            <label>Telephone</label> 
            <div class="form-field"> 
             <i class="fa fa-phone"></i> 
             <input type="tel" class="form-control" name="phone" placeholder="Enter your telephone" id="phone" required> 
            </div> 
           </div> 
           <div class="col-md-6 col-md-6 col-md-12 col-md-12"> 
            <label>E-Mail</label> 
            <div class="form-field"> 
             <i class="fa fa-envelope-o"></i> 
             <input type="email" class="form-control" name="email" placeholder="Enter your email" id="email" required> 
            </div> 
           </div> 
          </div> 

          <div class="row"> 
           <div class="col-md-6 col-md-6 col-md-12 col-md-12"> 
            <label>Website</label> 
            <div class="form-field"> 
             <i class="fa fa-globe"></i> 
             <input type="text" class="form-control" name="website" placeholder="Enter your website" id="website"> 
            </div> 
           </div> 
          </div> 

          <div class="row"> 
           <div class="col-lg-12 col-xs-12 col-xs-12 col-xs-12"> 
            <label>Message</label> 
            <div class="form-field"> 
             <i class="fa fa-pencil-square-o"></i> 
             <textarea class="form-control" name="message" placeholder="Enter your message" id="message" required></textarea> 
             <div id="success"></div> 
            </div> 
           </div> 
          </div> 
          <div class="row"> 
           <div class="col-lg-12 col-xs-12 col-xs-12 col-xs-12"> 
           <button type="submit" class="btn btn-dark">SEND YOUR MESSAGE</button> 
           </div> 
          </div> 
          </form> 
         </div></div> 
        </div> 
       </div> 

.JS

$(function() { 

    $("input,textarea").jqBootstrapValidation({ 
     preventSubmit: true, 
     submitError: function($form, event, errors) { 
      // additional error messages or events 
     }, 
     submitSuccess: function($form, event) { 
      event.preventDefault(); // prevent default submit behaviour 
      // get values from FORM 
      var name = $(".show input#name").val(); 
      var company = $(".show input#company").val(); 
      var email = $(".show input#email").val(); 
      var phone = $(".show input#phone").val(); 
      var website = $(".show input#website").val(); 
      var message = $(".show textarea#message").val(); 
      var qualform = $(".show input#qualform").val(); 
      var firstName = name; 

      // For Success/Failure Message 
      // Check for white space in name for Success/Fail message 
      if (firstName.indexOf(' ') >= 0) { 
       firstName = name.split(' ').slice(0, -1).join(' '); 
      } 
      $.ajax({ 
       url: '../mail/contact_me.php', 
       type: "POST", 
       data: { 
        name: name, 
        company: company, 
        phone: phone, 
        email: email, 
        website: website, 
        message: message, 
        qualform: qualform, 
       }, 
       cache: false, 
       success: function() { 
        // Success message 
        $('.show #success').html("<div class='alert alert-success'>"); 
        $('.show #success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;") 
         .append("</button>"); 
        $('.show #success > .alert-success') 
         .append(firstName + ", your e-mail was successfully sent."); 
        $('.show #success > .alert-success') 
         .append('</div>'); 

        //clear all fields 
        $('.show #contactForm').trigger("reset"); 
       }, 
       error: function() { 
        // Fail message 
        $('.show #success').html("<div class='alert alert-danger'>"); 
        $('.show #success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;") 
         .append("</button>"); 
        $('.show #success > .alert-danger').append("<strong>Sorry, " + firstName + ", it seems like there is a problem. Please try again"); 
        $('.show #success > .alert-danger').append('</div>'); 
        //clear all fields 
        $('.show #contactForm').trigger("reset"); 
       }, 
      }) 
     }, 
     filter: function() { 
      return $(this).is(":visible"); 
     }, 
    }); 

    $("a[data-toggle=\"tab\"]").click(function(e) { 
     e.preventDefault(); 
     $(this).tab("show"); 
    }); 
}); 


/*When clicking on Full hide fail/success boxes */ 
$('#name').focus(function() { 
    $('.show #success').html(''); 
}); 

.PHP

<?php 
// sanitize 
foreach ($_POST as $key => $value) { 
    if (ini_get('magic_quotes_gpc')) 
     $_POST[$key] = stripslashes($_POST[$key]); 

    $_POST[$key] = htmlspecialchars(strip_tags($_POST[$key])); 
} 

// Check for empty fields 
if (empty($_POST['name']) || empty($_POST['company']) || empty($_POST['phone']) || empty($_POST['message']) || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) { 
    echo "No arguments Provided!"; 
    return false; 
} 

$name   = $_POST['name']; 
$company  = $_POST['company']; 
$email   = $_POST['email']; 
$phone   = $_POST['phone']; 
$website  = $_POST['website']; 
$message  = $_POST['message']; 

$to   = '[email protected]'; 
$email_subject = "Contact from website website ($qualform)"; 
$email_body = "New form from $qualform.\n\n" . "User info:\n\nName: $name\n\nCompany: $company\n\nE-mail: $email\n\nTelephone: $phone\n\nWebsite: $website\n\nMessage: $message"; 
$headers  = "From: Form website <[email protected]>\r\n"; 
mail($to, $email_subject, $email_body, $headers); 
return true; 
?> 

謝謝!

+0

嗨,檢查,什麼是由PHP腳本(contact_me.php)通過瀏覽器開發人員功能 - 網絡選項卡返回。然後嘗試爲您的ajax調用設置dataType:json,可能會有所幫助 –

回答

0

您試圖從您的PHP代碼中的變量$qualform中獲取一個不存在的值,因此它會給您一個錯誤(這意味着一個錯誤的狀態碼),然後觸發JS中的錯誤函數。

嘗試在Chrome瀏覽器中使用網絡檢查器,您將能夠看到所有發送回數據的入站和出站請求。

我還建議使用像PHPStorm這樣的文本編輯器,它突出顯示語法錯誤或未解決的變量,並使用像xdebug這樣的調試器來暫停代碼以查看變量內部的內容。