Submit form without page reloading

Question

I have a classifieds website, and on the page where ads are showed, I am creating a "Send a tip to a friend" form...

So anybody who wants can send a tip of the ad to some friends email-adress.

I am guessing the form must be submitted to a php page right?

<form name='tip' method='post' action='tip.php'>
Tip somebody: <input name="tip_email" type="text" size="30" onfocus="tip_div(1);" onblur="tip_div(2);"/>
 <input type="submit" value="Skicka Tips"/>
 <input type="hidden" name="ad_id" />
 </form>

When submitting the form, the page gets reloaded... I don't want that...

Is there any way to make it not reload and still send the mail? Preferrably without ajax or jquery...

Thanks

Answer 1

Preferrably without ajax or jquery...

That is not possible as far as I know :( The way to go is with ajax (or iframe in your case as suggested by others), here are more details about it:

See this please:

http://www.simonerodriguez.com/ajax-form-submit-example/

and here is a good tutorial to get you started yourself:

http://www.yourhtmlsource.com/javascript/ajax.html http://www.w3schools.com/ajax/default.asp

You can do that easily with jquery too, here is the prototype:

$.ajax({
 url:'url',
 method:'post'
 data:data,
 success:function(response){
  alert(response);
 }
});

Answer 2

Here is some jQuery for posting to a php page and getting html back:

$('form').submit(function() {
    $.post('tip.php', function(html) {
       // do what you need in your success callback
    }
    return false;
});

Answer 3

The page will get reloaded if you don't want to use javascript

Answer 4

Why better without ajax or jquery? Jquery is very powerful and user-friendly and it is actually easy to learn, if you managed to learn php, jquery will be just fun.
Check this: http://api.jquery.com/jQuery.post/ , but before that, learn jquery basics: http://jquery.com/
Believe me, your visitors will like jquery!

Answer 5

You either use AJAX or you

• create and append an iframe to the document
• set the iframes name to 'foo'
• set the forms target to 'foo'
• submit
• have the forms action render javascript with 'parent.notify(...)' to give feedback
• optionally you can remove the iframe

Answer 6

You can try setting the target attribute of your form to a hidden iframe, so the page containing the form won't get reloaded.

I tried it with file uploads (which we know can't be done via AJAX), and it worked beautifully.

Answer 7

You will need to use JavaScript without resulting to an iframe (ugly approach).

You can do it in JavaScript; using jQuery will make it painless.

I suggest you check out AJAX and Posting.

Answer 8

You'll need to submit an ajax request to send the email without reloading the page. Take a look at http://api.jquery.com/jQuery.ajax/

and your code should be something along the lines of:

$('#submit').click(function(){
    $.ajax({
        url: send_email.php,
        type:'POST',
        data: {
            email: email_address,
            message: message
        },
        success: function(msg){
                alert("Email Sent');
            }                   
        });
    }
});

The form will submit in the background to the send_email.php page which will need to handle the request and send the email.

Answer 9

Have you tried using an iFrame? No ajax, and the original page will not load.

You can display the submit form as a separate page inside the iframe, and when it gets submitted the outer/container page will not reload. This solution will not make use of any kind of ajax.