如何使聯繫形式ajax

Question

我如何使我的聯繫形式ajax？

我想運行任何JavaScript函數，無需刷新頁面或更改網址。

這裏是我的HTML：

<form action="mailer.php" method="post" class="contactform" /> 
    <input type="text" placeholder="Name" name="name" class="input-textarea"/> 
    <input type="text" placeholder="Email" name="email" class="input-textarea"/> 
    <textarea name="message" cols="8" rows="5" placeholder="Message"></textarea> 
    <input name="Submit" type="submit" value="Submit" class="input-submit" /> 
</form> 

這是我的PHP（mailer.php）：

<?PHP 
$to = "name@domain.com"; 
$subject = "Messsage from website"; 
$headers = "Name: Form Mailer"; 
$date = date ("l, F jS, Y"); 
$time = date ("h:i A"); 
$msg = "Message sent from website on date $date, hour: $time.\n\n\n\n"; 
if ($_SERVER['REQUEST_METHOD'] == "POST") { 
    foreach ($_POST as $key => $value) { 
     $msg .= ucfirst ($key) ." : ". $value . "\n\n"; 
    } 
} 
else { 
    foreach ($_GET as $key => $value) { 
     $msg .= ucfirst ($key) ." : ". $value . "\n\n"; 
    } 
} 
mail($to, $subject, $msg); 
echo "<script>alert(\"test\")</script>"; 

?> 

Answer 1

好，形式不應發佈。事實上，它不應該提交。

你想做什麼，在表單上有一個按鈕（不是提交），然後使用一點javascript，這樣當點擊按鈕時，會有一個onclick處理函數，它讀取字段值表單並通過Ajax請求將它們發送到php頁面，然後向用戶顯示「成功/失敗」。

繼承人通用教程，使用jQuery。尼斯和易於遵循： http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

Answer 2

一個非常簡單的例子：

編輯您的形式加入到IDS某些元素：

<form class="contactform" id="contactform" /> 
    <input type="text" placeholder="Name" name="name" id="name" class="input-textarea"/> 
    <input type="text" placeholder="Email" name="email" id="email" class="input-textarea"/> 
    <textarea name="message" id="message" cols="8" rows="5" placeholder="Message"></textarea> 
    <input name="Submit" type="submit" value="Submit" class="input-submit" id="submit_contact_form" /> 
</form> 

JQuery的Ajax請求（您需要包括jQuery使用這個）：

$("#submit_contact_form").click(function() { 
    $.ajax({ 
     url: "mailer.php", 
     data: { 
       name: $('#name').val(), 
       email: $('#email').val(), 
       message: $('#message').val() 
     }, 
     type: "POST", 
     success: function(data) { 
       console.log(data); //debug, do whatever here.    
     } 
    }) 
}); 

Answer 3

讓我告訴你一個基本的Ajax接觸示例R M。您CA的方式操縱你想

您example.html的文件

<script src="js/jquery.min.js"></script> 
<form id="contactForm" action="/" method="post"> 
<input type="text" placeholder="name" name="name"> 
<input type="text" placeholder="email" name="email"> 
<input type="text" placeholder="subject" name="subject"> 
<input type="text" placeholder="phone number" name="phonenum"> 
<input type="text" placeholder="message" name="message"> 
<input type="submit"> 
</form> 
<div id="result"></div> 

<script> 
// Attach a submit handler to the form 
$("#contactForm").submit(function(event) { 

    // Stop form from submitting normally 
    event.preventDefault(); 

    // Get some values from elements on the page: 
    var $form = $(this), 
    serializedData = $form.serialize(), 
    url = $form.attr("action"); 

    request = $.ajax({ 
     url: "php-form.php", 
     type: "post", 
     data: serializedData 
    }); 

    request.done(function (response, textStatus, jqXHR){ 
     // log a message to the console 
     console.log(textStatus); 
     $('#result').html(response); 
    }); 

     // callback handler that will be called on failure 
    request.fail(function (jqXHR, textStatus, errorThrown){ 
     // log the error to the console 
     console.error(
      "The following error occured: "+ 
      textStatus, errorThrown 
     ); 
    }); 
}); 
</script> 

PHP-form.php的

<?php 


    $name = $_POST['name']; 
    $email = $_POST['email']; 
    $subject = $_POST['subject']; 
    $num = $_POST['phonenum']; 
    $msg = $_POST['message']; 
    $formcontent=" From : $name \n Email : $email \n Subject : $subject \n Phone number : $num \n \n Message : $msg"; 
    $recipient = "ajeet.lakhani@hotmail.com"; 
    $mailheader = "From: $email \r\n"; 

    echo 'name:'.$name .'<br>email:' . $email . '<br>subject:'. $subject . '<br>number:' . $num . '<br>message:'. $msg; 

    mail($recipient, $subject, $formcontent, $mailheader) or die("Error encountered! Please try again or write directly to the mentioned email address."); 

?> 

的div id爲結果會給你的效應初探什麼提交後發生形式