PHP email form without Refreshing Page

Question

I am trying to set up my page so that when I a form is submitted it emails and a message is displayed without refreshing the page.

I have tried to do this using jQuery/Ajax however I cannot get any emails sent now

Without the Ajax/jQuery, the PHP works just fine but just doesnt include the refresh feature

Any help would be appreciated

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 = "arshdsoni@gmail.com";
    $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:

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

What debugging have you done. You should be able to at least determine of the error is in your javascript or PHP code — John Conde, Jun 14 '15 at 13:42
@JohnConde - Without the ajax the form works and sends the email, however I want the refresh feature — RandomMath, Jun 14 '15 at 13:46
If you don't want it to be refreshed , got to do it with ajax. — Buendiadas, Jun 14 '15 at 13:55
Can you put an echo of name, e-mail, phone and message and tell as if all of them get a value? Let us know, what is the feedback you get? — Gerasimos Pap, Jun 14 '15 at 13:55

meda · Accepted Answer · 2015-06-14T15:30:00.130

Issues:

if you usedocument.getElementById you must use id on your elements
Add the data to your ajax request

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 = "arshdsoni@gmail.com";
    $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;

I still keep getting a Refresh I cant seem to figure it out :/ — RandomMath, Jun 14 '15 at 14:05
The php code is in its own file and I have removed the action and I dont get any emails — RandomMath, Jun 14 '15 at 14:07
Has it been tested and is it working from your side? For a strange reason Im still getting a refresh — RandomMath, Jun 14 '15 at 14:46

score 0 · Answer 2 · edited Apr 30 '16 at 07:49

0

I do not see you sending the data to PHP file anywhere in your AJAX code

NOTE: Use serialize() function if you want to send all the form data. Else send it separately like

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;
}

Your references

edited Apr 30 '16 at 07:49

marc_s

732,580
175
1,330
1,459

answered Jun 14 '15 at 13:54

Abhinav

8,028
12
48
89

I have tested this code, however I find that the page still refreshes? – RandomMath Jun 14 '15 at 13:59
I dont think you are sending the datas via ajax..you really have to check on that – Abhinav Jun 14 '15 at 14:05

score 0 · Answer 3 · answered Jun 14 '15 at 14:04

This is your ajax, where you went wrong

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

You forgot to include the data to be posted

$.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);
    }
});

The keys name, email, message and phone should be as is; because you used $_POST['name'], $_POST['email'], $_POST['message'] and $_POST['phone'].

The calls$('#name').val(), $('#email').val(), $('#phone').val(), $('#message').val() have been made assuming that your input elements have ids name, email, message and phone respectively. JS uses ids rather than names.

Refer to jQuery Ajax documentation for more details.

PHP email form without Refreshing Page

3 Answers3