How to prevent the page redirect but still submit the form

Question

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?

Answer 1

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>

Answer 2

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']

Answer 3

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" />

Answer 4

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.