Javascript沒有被調用表單提交

Question

我有一個非常簡單的HTML格式，我試圖發送電子郵件。我在網上查了一些js的教程，但其中大部分都不起作用。這裏是我的代碼的形式是在那裏，但是當我按提交js function沒有得到調用，而不是在html表單上做任何事情。

<form class="form-inline" id="contact-form" onSubmit="return false"> 
<center><p><input style="height:3vw;width:40vw;font-size:1.2vw;" type="text" class="form-control" size="30" placeholder=" Name" name="name" id="name" required></p> 

<p><input style="height:3vw;width:40vw;font-size:1.2vw;" type="email" class="form-control" size="30" placeholder=" E-mail Address" name="email" id="email" required></p> 

<p><input style="height:3vw;width:40vw;font-size:1.2vw;" type="text" class="form-control" size="30" placeholder=" Subject" name="subject" id="subject" required></p> 

<p><textarea style="height:10vw;width:40vw;font-size:1.2vw;" placeholder=" Message..." class="form-control" name="message" id="message"></textarea></p> 

<p><button type="submit" class="button" name="btn_submit" id="btn_submit">Send</button></p></center> 

</form> 

我已經包含js文件，因爲它是形式的<div>結束後

<script src="js/jquery-2.1.4.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/functions.js"></script> 

functions.js文件如下

//Contact Us 
    $("#btn_submit").click(function() { 
     //get input field values 
     var user_name  = $('input[name=name]').val(); 
     var user_email  = $('input[name=email]').val(); 
     var user_message = $('textarea[name=message]').val(); 

     //simple validation at client's end 
     var proceed = true; 
     if(user_name==""){ 
      proceed = false; 
     } 
     if(user_email==""){ 
      proceed = false; 
     } 
     if(user_message=="") { 
      proceed = false; 
     } 

     //everything looks good! proceed... 
     if(proceed) 
     { 
      //data to be sent to server 
      post_data = {'userName':user_name, 'userEmail':user_email, 'userMessage':user_message}; 

      //Ajax post data to server 
      $.post('contact_me.php', post_data, function(response){ 

       //load json data from server and output message  
       if(response.type == 'error') 
       { 
        output = '<div class="alert-danger">'+response.text+'</div>'; 
       }else{ 
        output = '<div class="alert-success">'+response.text+'</div>'; 

        //reset values in all input fields 
        $('.form-inline input').val(''); 
        $('.form-inline textarea').val(''); 
       } 

       $("#result").hide().html(output).slideDown(); 
      }, 'json'); 

     } 
    }); 

和我的電子郵件的處理程序如下：

<?php 
if($_POST) 
{ 
    $to_Email  = "email.com"; //Replace with recipient email address 



    //check if its an ajax request, exit if not 
    if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') { 

     //exit script outputting json data 
     $output = json_encode(
     array(
      'type'=>'error', 
      'text' => 'Request must come from Ajax' 
     )); 

     die($output); 
    } 

    //check $_POST vars are set, exit if any missing 
    if(!isset($_POST["userName"]) || !isset($_POST["userSubject"]) || !isset($_POST["userEmail"]) || !isset($_POST["userMessage"])) 
    { 
     $output = json_encode(array('type'=>'error', 'text' => 'Input fields are empty!')); 
     die($output); 
    } 

    //Sanitize input data using PHP filter_var(). 
    $user_Name  = filter_var($_POST["userName"], FILTER_SANITIZE_STRING); 
    $user_Email  = filter_var($_POST["userEmail"], FILTER_SANITIZE_EMAIL); 
    $user_Subject  = filter_var($_POST["userSubject"], FILTER_SANITIZE_STRING); 
    $user_Message  = filter_var($_POST["userMessage"], FILTER_SANITIZE_STRING); 

    //additional php validation 
    if(strlen($user_Name)<3) // If length is less than 3 it will throw an HTTP error. 
    { 
     $output = json_encode(array('type'=>'error', 'text' => 'Name is too short or empty!')); 
     die($output); 
    } 
    if(!filter_var($user_Email, FILTER_VALIDATE_EMAIL)) //email validation 
    { 
     $output = json_encode(array('type'=>'error', 'text' => 'Please enter a valid email!')); 
     die($output); 
    } 

    if(strlen($user_Message)<5) //check emtpy message 
    { 
     $output = json_encode(array('type'=>'error', 'text' => 'Too short message! Please enter something.')); 
     die($output); 
    } 

    $subject = $user_Subject; 

    $message_Body = "<strong>Name: </strong>". $user_Name ."<br>"; 
    $message_Body .= "<strong>Email: </strong>". $user_Email ."<br>"; 
    $message_Body .= "<strong>Message: </strong>". $user_Message ."<br>"; 



    $headers = "From: " . strip_tags($user_Email) . "\r\n"; 
    $headers .= "Reply-To: ". strip_tags($user_Email) . "\r\n"; 
    $headers .= "MIME-Version: 1.0\r\n"; 
    $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n"; 



    //proceed with PHP email. 
    /*$headers = 'From: '.$user_Email.'' . "\r\n" . 
    'Reply-To: '.$user_Email.'' . "\r\n" . 
    'X-Mailer: PHP/' . phpversion(); 
    */ 


    $sentMail = @mail($to_Email, $subject, $message_Body, $headers); 

    if(!$sentMail) 
    { 
     $output = json_encode(array('type'=>'error', 'text' => 'Could not send mail! Please check your PHP mail configuration.')); 
     die($output); 
    }else{ 
     $output = json_encode(array('type'=>'message', 'text' => 'Hi '.$user_Name .' Thank you for contacting us.')); 
     die($output); 
    } 
} 
?> 

按提交時，js文件沒有被調用，控制檯也沒有錯誤。任何人都可以請幫我解決我犯的錯誤。謝謝。

Answer 1

您需要阻止用於刷新頁面的默認表單提交操作。

您需要添加參數傳遞給函數，可以跟蹤事件，然後調用preventDefault()從參數：

$("#btn_submit").click(function(e) { 
    e.preventDefault(); 

    ... 
} 

Answer 2

嘗試用

$(document).on("click,", "#btn_submit", function(){ 更換

$("#btn_submit").click(function() {

Answer 3

您需要阻止表單提交，否則它將直接提交併轉向服務器端。

你可以使用jQuery這樣一件事：

$("#btn_submit").click(function(e) { 
    e.preventDefault(); 
//your code goes here after preventing submission 
}