My form like is this:

<form action=".php" method="post">
.....
<input type="submit" class="submit" />
</form>

When the user clicks the submit button, I want to popup a window which says "You have submitted the information..." and the information will be passed to the test.php page.

Should I use jQuery for this?

My form like is this:

<form action="http://example.com/test.php" method="post">
.....
<input type="submit" class="submit" />
</form>

When the user clicks the submit button, I want to popup a window which says "You have submitted the information..." and the information will be passed to the test.php page.

Should I use jQuery for this?

• javascript
• php
• jquery

• 3 You can just use ajax to submit your form with no need to redirect. api.jquery.com/jQuery.post – Alex Commented Dec 17, 2012 at 8:34
• w3schools.com/php/php_ajax_database.asp – Littlebobbydroptables Commented Dec 17, 2012 at 8:36
• <form action="http://example.com/test.php" method="post" target="_formResponseWindow"> would display the response in a new window/tab named like the target attribute (if you do not want to reuse the windows on new submit you can set target to _blank) – Hikaru-Shindo Commented Dec 17, 2012 at 8:38
• There is no other way to do it with jQuery as far as I know. ajax is just javascript and XMLHttpRequests. Even jQuery have functions like $.post to make it easier to use ajax. – Alex Commented Dec 17, 2012 at 8:38

4 Answers 4

You can do it without using AJAX if you want and you also don't even need jQuery. You'll need to place an IFRAME somewhere in your page (even a hidden one) and modify your form by adding a TARGET to the iframe.

<iframe name="formSending"></iframe>
<form action="http://example.com/test.php" method="post" target="formSending">
.....
<input type="submit" class="submit" />
</form>

In you test.php file you should have a line at the end (or after processing) like this:

<script>alert('you have submitted the information....');</script>

You can use ajax to achieve this. Try something like this:

<form action="http://example.com/test.php" method="post">
<input type="text" name="name" />
<input type="text" name="email" />
<input type="text" name="phone" />
<textarea name="message"></textarea>
<input type="submit" class="submit" onclick="formSubmit(event)" />
</form>

function formSubmit(e){

         e.preventDefault(); //This will prevent the default click action.

        // Create DataString
        var dataString = '&name=' + $('input[name=name]').val() +
                         '&email=' + $('input[name=email]').val() +
                         '&phone=' + $('input[name=phone]').val() +
                         '&message=' + $('textarea[name=message]').val() +

        $.ajax({
            type: "POST",
            url: "http://example.com/test.php",
            data: dataString,
            success: function() {
                alert('Form Successfully Submitted');
            },  
            error: function() {
                alert('There was an error submitting the form');
            }   
        }); 
        return false; // Returning false will stop page from reloading.
    }   
}

In your test.php file you can get the values using $_POST as the ajax will use the dataString we create to send POST value, so in your test.php file.

$name = $_POST['name']
$email = $_POST['email']
$phone = $_POST['phone']
$mssg = $_POST['message']

Yon can create an event for your form submit like

    var html_custom ='';
    $(document).ready(function(){
        $('#btn_submit').click(function(){
          html_custom+= "Name : " + $('#name').val();
          html_custom+= "Email : " + $('#email').val();
          html_custom+= "<a href='javascript:void(0);' id='form_submit'>Submit</a>";
          //now populate this custom html on the div which is going to be shown as pop up.
        });
       $('#form_submit').click(function(){
          $('form').submit();
        });

    });

and change

       <input type="submit" class="submit" />

to

       <input type="button" class="submit" name="btn_submit" />

Here is a very simple trick for the same: - Put your form in other file. - On your current page load that file in an iframe. - You will get your submitted data on the action of the form.

You will be able to access the parent window after submission of form from your action using javascript and vice-versa.