0

I want to execute a jQuery script after submitting a form. The jQuery script it's only a line that will fade In a hidden that will show if the e-mail have been sent or not sent.

The PHP code is at the top of the file and I don't know if staying the PHP code at the top is the problem but I tried moving de PHP above the jquery script but it doesn't work.

EDIT:

Now I have that code in my index.php

        $(document).ready(function) {
            $('form').submit(function) {
                $.ajax({
                    url: "mail.php",
                    type: "POST",
                    data: {
                        name: $('input[name="name"]').val(),
                        email: $('input[name="email"]').val(),
                        msg: $('input[name="msg"]').val()
                    },
                    cache: false,
                    success: function(response) {
                        $('#result').html(response);
                    }
                });
                return false;
            });
        });

In mail.php I have that other code

$name = $_POST['name'];
$mail = $_POST['email'];
$msg = $_POST['msg'];

if(mail('[email protected]', $name, $msg)) {
    echo 'Pass!';
} else {
    echo 'Fail!';
}

When I executed it nothing happens and the URL shows the data that I wrote in the inputs but any message appears.

Improve this question
3
  • 1
    can you please show us how your relevant jQuery code look like? Commented Jun 4, 2013 at 11:12
  • When the form is submitted, the page reloads, and all your javascript is basically lost. Commented Jun 4, 2013 at 11:12
  • 1
    Read about AJAX. submit button -> onClick="sendEmail()" -> prevent default -> get form data -> send it to the server side -> get the result and show the hidden element. Commented Jun 4, 2013 at 11:14

2 Answers 2

Reset to default
1

Here's a simple example for processing a form with AJAX. Notice the IDs: #emailForm is the ID of the form, and #out is the ID of some HTML element (such as a div or p) where you want to display the result. The function email.php is your server side script to send the email and return the result.

$(document).ready(function() {
    $('#emailForm').submit(function(){
        $.ajax({
        url: "email.php",
        type: 'POST',
        data: {
            name: $('input[name="name"]').val(),
            email: $('input[name="email"]').val(),
            msg: $('input[name="msg"]').val()
        },
        cache: false,
        success: function(responseText){
            $('#out').html(responseText);
        }
        });
        return false;
    });
});

On the server side, email.php (or whatever you want to call it) processes the data and sends the email. The data can be retrieved from the $_POST array. After sending or attempting to send the email, email.php can simply echo the result to be inserted in the HTML element with the id of "out."

$name = $_POST['name'];
$email = $_POST['email'];
$msg = $_POST['msg'];
//PUT CODE HERE FOR SENDING EMAIL

if ($success){
    echo "Email sent with success!";
} else {
    echo "Unable to send your email at this time. Please try again later.";
}

The output should appear in the HTML element:

<div id="out">Email sent with success!</div>
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I tried to use the example you said me but I don't receive anything from sendmail.php
@Alexbha - I updated my answer with new code that I tested, and it works. Please note that this code uses post, so the data must be retrieved from the $_POST array.
I edited my question to post the code that I have now, but I don't have any message as response
@Alexbha - Did you change the $_GETs to $_POSTs in the PHP file? Any error in your PHP code will cause it not to work. I ran the code that I posted, and it worked fine. Also it's good to use Firbug or Fiddler to see what's happening with your HTTP requests.
I wrote them. I found the problem, it was missing a parenthesis and now it works. Thanks for your help :)
0

you can use onSubmit attribute in form tag

e.g. 

  <form name="anything" id="anything" onSubmit="functionname();" >

or the other option is onClick of Submit button

  <input type="submit" onClick="functionname();" value="SUBMIT FORM" />

I personally preffer 1st method

Improve this answer

5 Comments

functionname() will be executed before the form is submited. BTW, submitting form will cause the page to refresh. But wait, maybe it is what OP is looking for after all.
why not use jQuery .on() or submit(), instead of inline script?
Mmm...and if I want execute it after submitting the form and when the function mail() was executed correctly?
And what will be the result? A blink before submitting. Something like "your email was sent." but maybe the email will be not sent successfully? And page refreshes without any information...
if you want to perform a jQuery only after the form submission then you have to use ajax for submission or the other way is to pass a extra parameter in submission and listen to that in jQuery and perform action

Your Answer

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