PHP and Jquery How To

Question

The form is hidden when the page loads and shows up when the Send us mail is clicked, I've been able to do it in such a way that when a user clicks on the Send us mail button the form will slide down, using jquery. but the challenge am having now is that when I click the button Send Mail the page reloads and this makes the jquery to run again and the form is hidden again. Though I've check the fields to be sure if they contain a value before submitting. But now even when the fields contain a value or not after clicking the Send Mail button in the form the page reloads and make the form to hide again. Please can anybody tell me what I can do to solve this problem? Thanks in anticipation.

Below is my php and jquery code:

<script type="text/javascript">
$(function(){
    $("#contact_Holder").hide();
    slideDown();
});

function slideDown(){
    $("#slideDown").click(function() {
        $("#contact_Holder").slideDown("normal");
    });
    $("#sendmail").click(function() {
        $("#contact_Holder").show();
    });
}

<?php 
if(isset($_POST['sendmail']))
{
if(!(isset($_POST['txtname']) || ($_POST['txtsubject']) || ($_POST['txtmessage'])) || empty($_POST['txtname']) || empty($_POST['txtsubject']) || empty($_POST['txtmessage']))
    {
echo '<font color="#090" size="3" face="Palatino Linotype,serif">'."please fill all fields thank you!".'</font>';
    }
else
{
$to = 'info@mail.com';
$subject = $_POST['txtsubject'].' '.$_POST['txtname'];
                $body = $_POST['txtmessage'];

                if(mail($to,$subject,$body))
                {
                    echo('<font color="#090" size="3" face="Palatino Linotype,serif">'."Your message has been sent successfully".'</font>');
                }
                else{ echo('<font color="#090" size="3" face="Palatino Linotype,serif">'."Message Delivery Failed!".'</font>'); }
            }
        }
    ?>

You didn't post the final html markup, so we have to guess... But most likely you specified a target inside the form tag? Then the content is sent to that target, regardless of other things. Remove the target and use ajax instead to send the form. Then you can evaluate a json feedback from the server (success/failure) and display it as a replacement for the form. — arkascha, Feb 25 '13 at 08:38

score 2 · Answer 1 · edited May 23 '17 at 12:03

2

In short, you need to:

Attach a jQuery onClick to your submit button.
Call e.preventDefault() at the top of your click function (this will stop the default button behaviour).
Submit the form using jQuery Ajax

That should cover the steps needed to sort the issue.

edited May 23 '17 at 12:03

Community

1
1

answered Feb 25 '13 at 08:43

webnoob

15,747
13
83
165

score 0 · Answer 2 · answered Feb 25 '13 at 08:46

0

I think you didnt post data through ajax when send mail is clicked. So page reloads due to the submission of your form. You must send data through ajax and call the method

preventDefault()

inside your ajax send method to avoid page reload.

answered Feb 25 '13 at 08:46

Harish Ambady

12,525
4
29
54

PHP and Jquery How To

2 Answers2