PHP-форму электронной почты без обновления страницы

Я пытаюсь настроить свою страницу так, чтобы при отправке формы мне отправили электронные письма, и сообщение отображается без обновления страницы.PHP-форму электронной почты без обновления страницы

Я пытался сделать это с помощью JQuery/Ajax, однако я не могу получить любые сообщения электронной почты отправлено в настоящее время

Без Ajax/JQuery, то PHP работает просто отлично, но только не включает функции обновления

Любая помощь будет оценена

PHP (submitForm.php):

<?php 

    $name = isset($_POST['name']); 
    $email = isset($_POST['email']); 
    $phone = isset($_POST['phone']); 
    $message = isset($_POST['message']); 
    $feedback = ''; 

if($name && $email && $phone && $message) { 
    $name = ($_POST['name']); 
    $email = ($_POST['email']); 
    $phone = ($_POST['phone']); 
    $message = ($_POST['message']); 
} 

    $to = "[email protected]"; 
    $subject = 'Soni Repairs - Support Request'; 

    $body = <<<EMAIL 

Hi There! 

My name is $name. 

Message: $message. 

My email is: $email 
Phone Number: $phone 

Kind Regards 
EMAIL; 

$header = "From: $email"; 

if($_POST) { 
    if($name == '' || $email == '' || $phone == '' || $message == '') { 
     $feedback = "Nothing received!"; 
    } 
    else { 
     mail($to, $subject, $body, $header); 
     $feedback = '*Message Received! You will receive a reply shortly!'; 
    } 
} 

?>

JQuery/Ajax:

function submitForm() { 
       var name=document.getElementById('name').value; 
       var dataString = 'name'+ name; 

       $.ajax({ 

        type:"post", 
        url:"submitForm.php", 
        cache:false, 
        success: function(html) { 
         $('#feedback').html(html); 
        } 

       }); 
       return false; 
      }

ФОРМА:

<form id="contact" action="#"> 
          <h3>Get in Touch:</h3> 
          <h4><span id="star" class="glyphicon glyphicon-asterisk"></span>We aim to reply within 24 hours!</h4> 
          <fieldset> 
           <input name="name" placeholder="Your Name" type="text" tabindex="1" required> 
          </fieldset> 
          <fieldset> 
           <input name="email" placeholder="Your Email Address" type="email" tabindex="2" required> 
          </fieldset> 
          <fieldset> 
           <input name="phone" placeholder="Your Phone Number" type="tel" tabindex="3" required> 
          </fieldset> 
          <fieldset> 
           <textarea id="textarea" name="message" placeholder="Describe your problem...." tabindex="5" required></textarea> 
          </fieldset> 
          <fieldset> 
           <button name="submit" type="submit" id="contact-submit submitBtn" data-submit="...Sending" "return submitForm();">Submit</button> 
          </fieldset> 
         </form>

источник

2015-06-14 RandomMath

Где ваша форма? – Rasclatt

Какая отладка вы сделали. Вы должны быть в состоянии, по крайней мере, определить ошибку в вашем javascript или PHP-коде –

@Rasclatt - Извините, я думал, что включил форму - NOW добавлено – RandomMath

Вопросы:

если вы используете document.getElementById Вы должны использовать идентификатор на ваших элементов
Добавьте данные на Ajax запроса

HTML:

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script> 
$(document).ready(function(){ 

    $("#submitBtn").click(function(event) { 
    alert('pressed'); 
     //values 
     var name=document.getElementById('name').value; 
     var email=document.getElementById('email').value; 
     var phone=document.getElementById('phone').value; 
     var message=document.getElementById('message').value; 
     var dataString = {"name": name, "email":email, "phone": phone, "message":message} 

     $.ajax({ 
      type:"post", 
      url:"submitForm.php", 
      data: dataString, 
      success: function(html) { 
       $('#feedback').html(html); 
      } 
     }); 
     event.preventDefault(); 
    }); 
}); 
</script> 
</head> 
<body> 
<form id="contact" method="POST"> 
    <h3>Get in Touch:</h3> 
    <h4><span id="star" class="glyphicon glyphicon-asterisk"></span>We aim to reply within 24 hours!</h4> 
    <fieldset> 
     <input id="name" placeholder="Your Name" type="text" tabindex="1" required> 
    </fieldset> 
    <fieldset> 
     <input id="email" placeholder="Your Email Address" type="email" tabindex="2" required> 
    </fieldset> 
    <fieldset> 
     <input id="phone" placeholder="Your Phone Number" type="tel" tabindex="3" required> 
    </fieldset> 
    <fieldset> 
     <textarea id="message" placeholder="Describe your problem...." tabindex="5" required></textarea> 
    </fieldset> 
    <fieldset> 
     <button name="submit" id="submitBtn">Submit</button> 
    </fieldset> 
</form> 
<div id="feedback"></div> 
</body> 
</html>

PHP

<?php 
if(isset($_POST['name'], $_POST['email'], $_POST['phone'], $_POST['message'])){ 
    //Post data 
    $name = $_POST['name']; 
    $email = $_POST['email']; 
    $phone = $_POST['phone']; 
    $message = $_POST['message']; 
    //mail settings 
    $to = "[email protected]"; 
    $subject = 'Soni Repairs - Support Request'; 
    $body = <<<EMAIL 

Hi There! 

My name is $name. 

Message: $message. 

My email is: $email 
Phone Number: $phone 

Kind Regards 
EMAIL; 

    if(mail($to, $subject, $body, $header)){ 
     $feedback = '*Message sent! You will receive a reply shortly!'; 
    }else{ 
     $feedback = '*Message failed to send'; 
    } 
}else{ 
    $feedback = 'Missing Params'; 
} 

echo $feedback;

источник

2015-06-14 14:01:34 meda

Я все еще продолжаю получать Refresh Я не могу понять это:/ – RandomMath

PHP-код находится в собственном файле, и я удалил действие, и я не получаю никаких писем. – RandomMath

Был ли он протестирован и работает ли он с вашей стороны? По странной причине я все еще получаю обновление – RandomMath

Я не вижу, что вы отправлять данные в PHP файл в любом месте AJAX код

ПРИМЕЧАНИЕ: Используйте функцию serialize(), если вы хотите отправить все данные формы. Else отправить его отдельно, как

var formDatas = {name:"name",email:"emailID"}; 


function submitForm() { 
     var name=document.getElementById('name').value; 
     var dataString = 'name'+ name; 
     var formDatas = $('#formID').serialize(); // Send form data 
     $.ajax({ 
      type:"post", 
      url:"submitForm.php", 
      data : {datas : formDatas } 
      cache:false, 
      success: function(html) { 
       $('#feedback').html(html); 
      } 

      }); 
    return false; 
}

Ваши ссылки

источник

2015-06-14 13:54:33 Abhinav

Я протестировал этот код, однако обнаружил, что страница все еще обновляется? – RandomMath

Я не думаю, что вы отправляете данные через ajax .. вы действительно должны проверить это – Abhinav

Это ваш AJAX, где вы поступили не так

$.ajax({ 
    type:"post", 
    url:"submitForm.php", 
    cache:false, 
    success: function(html) { 
     $('#feedback').html(html); 
    } 
});

Вы забыли включить данные, которые должны быть размещены

$.ajax({ 
    type:"post", 
    url:"submitForm.php", 
    cache:false, 
    data { 
     name: $('#name').val(), 
     email: $('#email').val(), 
     phone: $('#phone').val(), 
     message: $('#msg').val() 
    } 
    success: function(html) { 
     $('#feedback').html(html); 
    } 
});

Ключей name, email, message и phone должен быть таким, как есть; потому что вы использовали $_POST['name'], $_POST['email'], $_POST['message'] и $_POST['phone'].

Призывы $('#name').val(), $('#email').val(), $('#phone').val(), $('#message').val() были сделаны в предположении, что ваши входные элементы имеют идентификаторы name, email, message и phone соответственно. JS использует идентификаторы, а не имена.

Для получения более подробной информации обратитесь к jQuery Ajax documentation.

источник

2015-06-14 14:04:31

PHP-форму электронной почты без обновления страницы

ответ

Смежные вопросы