How to submit a form but load the php in a div

Question

In my website, i have a div with links and a div where i display the contents of the pages when corresponding link is clicked. Now i have a form which on submitting mails the data using mail() and displays that message is sent if mail() is successful. But the issue is that on submit, it sends the data and loads the page submit.php in the window. Instead of that i want the result to be shown in my contents div only.

I have browsed the net for the answer and found a lot of solutions, all using different ways.

I want to know which is the best way to do that.. which is most efficient?

note:the solutions i got were:

1) to make a ajax call jquery submit form and then show results in an existing div

2)making xmlHTTPheader request using javascript Submit form values to a script without loading a new page

3)using success handler and javascript show div on form submit with no redirect

4) make another redirect on the php script to the website

What obout setting the form action to your current page, and load the php function in that page? — veelen, Jun 09 '13 at 11:45
The solutions you got were: 1. Use Ajax. 2. Use Ajax. 3. Use Ajax. 4. No idea what that is supposed to mean. There isn't a whole lot to choose between them. — Quentin, Jun 09 '13 at 11:46

score 1 · Answer 1 · answered Jun 09 '13 at 13:52

hy Aman ... try this ..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#bt_sn").click(function(e) {
    var to=$("#to").val();
    var from=$("#from").val();
    var message=$("#message");
    //AJAX begins here
    $.post("mail.php",{to_rec:to,from_rec:from,message_rec:message},function(data)
    {
        if(data=="SUC")
        {
            $("#result").html("Your mail has being sent successfully");
        }
        if(data=="FAI")
        {
            $("#result").html("Sending failed");
        }
    });



    });
</script>
</head>
<body>
<input type="text" id="to" />
<input type="text" id="from" />
<textarea id="message">
<button id="bt_sn" >Send</button>

Send

</body>
</html>

Now at php side ...

<?php
$to=$_POST['to_rec'];
$from=$_POST['from_rec'];
$message=$_POST['message_rec'];
// Now use these variables in your mailing section
//Now if mailing is succedd at some part just echo the success or failure
if(mailed)
echo "SUC";
else
echo "FAI"
?>

Best of luck :P :)

score 0 · Answer 2 · answered Jun 09 '13 at 11:44

0

I would go for AJAX, it's te most widely used way to send new requests to your webserver without reloading the page.

answered Jun 09 '13 at 11:44

gitaarik

42,736
12
98
105

7stud · Answer 3 · 2013-06-09T12:05:48.320

0

1), 2), 3) are all the same thing. The word 'header' doesn't even appear in link 2). 'ajax' is a nickname for an XMLHttpRequest....(a synchronous) (ja vascript) (X MLHttpRequest).

XMLHttpRequest = ajax = all of jQuery's various methods for making an XMLHttpRequest

Asynchronous means that the user doesn't have to sit and wait for the ajax request to finish before doing other things on the page. The request will execute at the same time the user is doing other things. On the other hand, if you let the submit go through, the user can't do anything until the page reloads.

I don't understand 4). Do you mean let the submit go through then reload another page that is exactly the same as the current page but with the mail message displayed?

edited Jun 09 '13 at 12:05

answered Jun 09 '13 at 11:46

7stud

46,922
14
101
127

Okay, use jquery to make an ajax request--jquery handles all the differences in the various browsers for you. I don't think it matters efficiency wise: you will make one request either way. An ajax request does allow the user to continue doing other things while the results are fetched. – 7stud Jun 09 '13 at 11:55
ok thanks... i have never used jquery so i was quite a lot confused about it... Thanks for the explanation. I will try that. – Aman Gupta Jun 09 '13 at 11:59
jQuery is just javascript. Someone wrote a bunch of fancy functions in javascript, and they called the collection of functions jQuery. The nice thing is that the functions handle all the cross browser issues for you. – 7stud Jun 09 '13 at 12:01

How to submit a form but load the php in a div

3 Answers3