아약스 문의 양식 작성

Question

연락처 양식을 아약스로 만들려면 어떻게해야합니까?

페이지를 새로 고치거나 URL을 변경하지 않고도 자바 스크립트 기능을 실행하고 싶습니다.

<?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

음, 양식을 게시해서는 안 :

<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)입니다 :

여기 내 HTML입니다. 사실 그것은 전혀 제출해서는 안됩니다.

뭘 원하는지, 양식 (제출 아님)에 버튼이 있습니다. 그러면 자바 스크립트를 사용하여 버튼을 클릭 할 때 onclick 핸들러가 필드의 값을 읽도록합니다. 폼을 생성하고 Ajax 요청을 통해 PHP 페이지로 보낸 다음 '성공/실패'를 사용자에게 표시합니다.

일반 자습서 인 jQuery를 사용합니다. 니스와 쉬운 다음과 같이하십시오 http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

Answer 2

매우 기본적인 예 :

편집 특정 요소에 ID를 추가하여 양식 :

<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와 아약스 요청 (당신은 포함해야합니다 이것을 사용하는 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 연락처 fo의 기본 예를 보여 드리겠습니다. rm. 당신은 당신이를 제출 한 후 무슨 일이 일어나고 있는지의 reponse

당신의 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 당신을 줄 것이다 원하는 방식으로 조작 ca를 양식