опубликовать ответ php в div с помощью ajax не работает

Question

Привет, я сейчас работаю над проектом. Когда пользователь отправляет форму, он загружает ответ в div, а не загружает новую страницу. Я посмотрел на другие примеры формы ajax, работающей вместе с PHP онлайн, но это не помогло мне решить мою проблему. (Я довольно новичок в этом).

Когда я нажимаю «отправить», вместо того, чтобы публиковать ответ на той же странице и отправлять электронное письмо на выбранный адрес электронной почты, он переносит меня в php-файл и отображает там ответ, но не отправляет никакого электронного письма.

Кто-нибудь может увидеть, где это идет не так?

Код формы:

<form name="contactform" id="contact-form" action="mailer.php">

            <input type="text" class="textbox" name="name" value="Name" required="required" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}">

            <input type="text" class="textbox" name="email" value="Email" required="required" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}">

            <textarea name="message" value="Message:" required="required" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message';}">Message</textarea>

           <input type="submit" value="Send Now">

</form>
                    <div id="response"></div>

Код Javascript:

<script>
 $("#contactform").submit(function(event) 
 {
     /* stop form from submitting normally */
     event.preventDefault();

     /* get some values from elements on the page: */
     var $form = $( this ),
         $submit = $form.find( 'button[type="submit"]' ),
         name_value = $form.find( 'input[name="name"]' ).val(),
         email_value = $form.find( 'input[name="email"]' ).val(),
         message_value = $form.find( 'textarea[name="message"]' ).val(),
         url = $form.attr('action');

     /* Send the data using post */
     var posting = $.post( url, { 
                       name: name_value, 
                       email: email_value, 
                       message: message_value 
                   });

     posting.done(function( data )
     {
         /* Put the results in a div */
         $( "#response" ).html(data);

     });
});
</script>

Код PHP: (мой php хранится в отдельном файле с именем mailer.php) Я пытаюсь получить ответную переменную PHP $, которая будет отправлена обратно и помещена в div ответа.

<?php


    // Get the form fields and remove whitespace.
    $name = $_POST["name"];
    $email = $_POST["email"];
    $message = $_POST["message"];

    $to = "your-emailaddresshere@email.com";
    $subject = "New DPS Email from $name";

    // Build the email content.
    $email_content = "Name: $name\n";
    $email_content .= "Email: $email\n\n";
    $email_content .= "Message:\n$message\n";

    // Build the email headers.
    $email_headers = "From: $name <$email>";

    $mailed = (mail($to, $subject, $email_content, $email_headers));

    if( isset($_POST['ajax']) )
    $response = ($mailed) ? "1" : "0";
    else
    $response = ($mailed) ? "<h2>Thank You! Your message has been sent.</h2>" : "<h2>Oops! Something went wrong and we couldn't send your message.</h2>";

    echo $response; 

?>

Заранее благодарю за любую помощь!

javascript php jquery html ajax

4

Hip Hip Array 16 Дек 2015 в 18:42

Answer 1

Вот что вы можете сделать: Код формы

<form name="contactform" id="contact-form">
    <!--Your form elements here -->
</form>

Код JavaScript (используйте # контактную форму , а не #contactform )

<script>
$("#contact-form").submit(function(event) 
{
 /* stop form from submitting normally */
 event.preventDefault();

 /* get some values from elements on the page: */
 var $form = $( this ),
     $submit = $form.find( 'button[type="submit"]' ),
     name_value = $form.find( 'input[name="name"]' ).val(),
     email_value = $form.find( 'input[name="email"]' ).val(),
     message_value = $form.find( 'textarea[name="message"]' ).val(),
     url = 'your_url_here';

 /* Send the data using post */
 var posting = $.post( url, { 
                   name: name_value, 
                   email: email_value, 
                   message: message_value 
               });

 posting.done(function( data )
 {
     /* Parse JSON */
     var response = JSON.parse(data);
     $("#response").html(response.msg);

    });
 });
</script>

Ваш код PHP:

<?php


// Get the form fields and remove whitespace.
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];

$to = "your-emailaddresshere@email.com";
$subject = "New DPS Email from $name";

// Build the email content.
$email_content = "Name: $name\n";
$email_content .= "Email: $email\n\n";
$email_content .= "Message:\n$message\n";

// Build the email headers.
$email_headers = "From: $name <$email>";

$mailed = mail($to, $subject, $email_content, $email_headers);

if( $mailed )
$response = json_encode(array("status"=>true,"msg"=>"<h2>Thank You! Your message has been sent.</h2>"));
else
$response = json_encode(array("status"=>false,"msg"=>"<h2>Oops! Something went wrong and we couldn't send your message.</h2>"));

echo $response; 

?>

1

eminence_majesty 16 Дек 2015 в 16:29

Answer 2

Это потому, что вы вызываете функцию post, а не ajax.

Попробуй это:

$.ajax({
   url: <your_url>,
   type:'GET',
   data: {'name': name_value, 'email' : email_value, 'message': message_value},
   success: function(data){
        yourdivcontent =  eval(data)
        $( "#response" ).html(yourdivcontent);
   }, 
   error: function(){
        console.log("error");
   }
})

В вашей функции PHP просто закодируйте свой ответ в JSON

Вернуть json_encode (ответ);

0

SZD 16 Дек 2015 в 16:15

Answer 3

Исправить это и сообщить, что случилось,

Ваш идентификатор формы - «контактная форма», а селектор JQ установлен на «контактную форму».

$("#contactform")

К

$("#contact-form")

2

Pooya Mobasher Behrooz 16 Дек 2015 в 16:17

Answer 4

echo json_encode($response) в конце функции php

0

Farhad 16 Дек 2015 в 16:17

опубликовать ответ php в div с помощью ajax не работает

4 ответа

Похожие вопросы

Новые вопросы

javascript