0

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 = "[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:

<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>
5
  • 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, 2015 at 13:42
  • @Rasclatt - Sorry I thought I included the form - NOW added
    – RandomMath
    Jun 14, 2015 at 13:45
  • @JohnConde - Without the ajax the form works and sends the email, however I want the refresh feature
    – RandomMath
    Jun 14, 2015 at 13:46
  • If you don't want it to be refreshed , got to do it with ajax.
    – Buendiadas
    Jun 14, 2015 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? Jun 14, 2015 at 13:55

3 Answers 3

1

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 = "[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;
3
  • I still keep getting a Refresh I cant seem to figure it out :/
    – RandomMath
    Jun 14, 2015 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, 2015 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, 2015 at 14:46
0

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.

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.