Sending email by form without refreshing

Question

Im creating page with parallax scrolling, contact box is in last section. If I use simple html + php contact box, page will refresh to first section, so user will have to scroll back to contact section to see result. To correct this I am trying to make script that will send email without reloading page. (by Jquery)

This is how it looks like:

HTML:

<form method="post" enctype="multipart/form-data" id="formularz">
        <label  for="name">Imię</label><input type="text" name="name" id="formularz_name"/></br></br>
        <label  for="email">Email</label><input type="text" name="email" id="formularz_email"/></br></br>
        <label  for="phone">Telefon</label><input type="text" name="phone" id="formularz_phone"/></br></br>
        <label  for="enquiry">Zapytanie</label><textarea name="enquiry" cols="20" rows="10" id="formularz_text"></textarea></br></br>
        <input type="submit" id="contact_button" value="Wyślij" />
        </form>

Jquery:

$('#contact_button').click(function () {


    var name = $('#formularz_name').val();
    var email = $('#formularz_email').val();
    var phone = $('#formularz_phone').val();
    var text = $('#formularz_text').val();

          $.ajax({
            url: 'inc/contact.php',
            data: {'name': name, 'email': email, 'phone': phone, 'text': text},
            type: 'POST',
            success: function(odp){
                alert(odp);
            }

           });

});

PHP:

<?php





    if (!$name || !$email || !$phone || !$text) {
        $problem = TRUE;
       echo("<br><p>Musisz wypełnić wszystkie pola.</p>");
    }       

    if (!$problem){


    $data = date("d.m.y");


    $message = "
    <p>Name: $name</p>
    <p>Phone: $phone</p>
    <p>Email: $email</p>
    <br>
    <p>Enquiry: $text</p>";


$od = "$email";
$content = $message;
$header = "From: $od \r\n";
$header  .= 'MIME-Version: 1.0' . "\r\n";
$header .= 'Content-type: text/html; charset=UTF-8' . "\r\n";
 (mail('lethysek@gmail.com', 'New message from website Angelzena', $content, $header));



                     echo("<br><p>Wiadomość została wysłana.</p>");

    }else{
          echo("<p>Spróbuj ponownie</p>");
         }                    



?>

Why it doesn't work? When i click submit, page is refreshed and nothing happens.

The way you are trying to access request variables in your php script is incorrect. It should look like `$_REQUEST['name of the variable']` — mic4ael, Dec 06 '13 at 09:19
`if (!$name || !$email || !$phone || !$text)` Where come from these variables? Try `$_POST['name']` — FBHY, Dec 06 '13 at 09:19
My first impression is that you might have some redundant code. You surround your inputs with a
(which I believe forces a refresh) and usually runs a php script. You also have a jQuery ajax request. Try removing the
wrapper - your POST should still occur. As the two commenters above mentioned, you also need the $_POST[...] — Kevin Busch, Dec 06 '13 at 09:20
You should use .submit(). You can find everything here: http://stackoverflow.com/questions/1200266/submit-a-form-using-jquery — Lub, Dec 06 '13 at 09:22
Your full page refresh is performed by clicking `` button, which sends form data to your server using regular HTTP request. You can use another HTML element to trigger AJAX call to your server or prevent form submission using javascript, which is a good solution because of non-JS users. Anyway as it is written above, your PHP code needs a lot of revisions. — klimpond, Dec 06 '13 at 09:26
Btw. removing `
` element as Kyle Sum commented is a bad solution because of HTML validity. — klimpond, Dec 06 '13 at 09:31

score 1 · Accepted Answer · answered Dec 06 '13 at 09:30

1

First

Using button instead of submit to prevent refreshing.

Change <input type="submit" id="contact_button" value="Wyślij" /> To <input type="button" id="contact_button" value="Wyślij" />

answered Dec 06 '13 at 09:30

Richat CHHAYVANDY

597
4
11

score 1 · Answer 2 · answered Dec 06 '13 at 09:38

Try to serialize your form data to avoid unnecessary geting input values and prevent the default action of form (submit).

$("form").on("submit", function(event) {
    event.preventDefault();
    var formData = $(this).serialize();
    $.ajax({
        url: 'inc/contact.php',
        data: formData,
        type: 'POST',
        success: function(odp){
            alert(odp);
        }
    });
});

score 0 · Answer 3 · answered Dec 06 '13 at 09:22

0

Try removing the wrapper around the tags (you already have a jquery ajax() call to POST) and add the $_POST['name'] as others mentioned to actually initialize your php variables.

answered Dec 06 '13 at 09:22

Kevin Busch

712
1
6
8

David Jones · Answer 4 · 2013-12-06T09:36:39.137

You need to stop the form from submitting in your jquery. Try this:

$('#formularz').submit(function ( e ) {


    var name = $('#formularz_name').val();
    var email = $('#formularz_email').val();
    var phone = $('#formularz_phone').val();
    var text = $('#formularz_text').val();

          $.ajax({
            url: 'inc/contact.php',
            data: {'name': name, 'email': email, 'phone': phone, 'text': text},
            type: 'POST',
            success: function(odp){
                alert(odp);
            }

           });

    e.preventDefault();
});

score 0 · Answer 5 · answered Dec 06 '13 at 09:29

0

remove the form tag...its force your page to refresh.it will work for you.

answered Dec 06 '13 at 09:29

alok singh

19
2

Sending email by form without refreshing

5 Answers5