提交后留在页面上

Question

just a question --

How do i actually submit a form and still stay on the same page whilst the script is being executed?

I have a simple form that goes like this:

<form action="process.php" method="post" id="form">
    <label for="name">Name</label>
    <input type="text" name="name" id="name" required="required" />
    <label for="email">Email</label>
    <input type="email" name="email" id="email" required="required" />
    <label for="subject">Subject</label>
    <input type="text" name="subject" id="subject" required="required" />
    <label for="message">Message</label>
    <input type="text" name="message" id="message" required="required" />
    <input type="submit" id="button" value="Submit"/>
</form>

But everytime i submit the form it just goes to process.php. I don't want that, i want it to stay on the same page, maybe even have a jquery popup saying "thank you" or something.

How do i actually stay on the same page whilst the script is being run?

Answer 1

1. Put your form processing logic on the same page as the form
2. Use Ajax
3. Redirect back to that page when process.php is done processing the form

Answer 2

You have to use ajax in this case.

Basically, you need to post all data using ajax. In server side, you will need to get all parameters using $_POST['name'] like you normally do in server scripting.

FORM

<form action="process.php" method="post" id="form">
    <label for="name">Name</label>
    <input type="text" name="name" id="name" required="required" />
    <label for="email">Email</label>
    <input type="email" name="email" id="email" required="required" />
    <label for="subject">Subject</label>
    <input type="text" name="subject" id="subject" required="required" />
    <label for="message">Message</label>
    <input type="text" name="message" id="message" required="required" />
    <input type="button" id="button" value="Submit"/>
</form>

<div id="dialog-message" title="Thank You">
    <p>Your message here</p>
</div>

​

JQUERY

$(document).ready(function(){

    $('#dialog-message').dialog({
        modal: true,
        autoOpen: false,
        buttons: {
            Ok: function() {
                $(this).dialog("close");
            }
        }
    });



    $('#button').on('click', function() {
        var name = $('#name').val();
        var email = $('#email').val();
        var subject = $('#subject').val();
        var message = $('#message').val();
        var dataString = 'name=' + name + '&email=' + email + '&subject=' + subject + '&message=' + message;
        $.ajax({
            type: "POST",
            url: "process.php",
            data: dataString,
            success: function() {
                alert('');
                $('#dialog-message').dialog('open');
            }
        });
    });
});​

See the example here

Please note, dont forget to put jquery reference and also jquery ui reference

Answer 3

I think John Conde gave the best answer.

I would either make it so the php file that displays the form also handles the $_POST or if you can't do it that way then do it in Ajax with a code similar to this:

$("#form").bind("submit", function() { 

var nameTxt = $("#name").val();
var emailTxt = $("#email").val();
$.post('process.php', 
    {
        name: nameTxt,
        email: emailTxt
    }, 
    function(data) {
                if (data == 'ko')
                    alert('Could not submit...');
                else {
                    alert('Thank you for your message.');
                }
            });
return false;
}

What this does is that it "blocks" the regular submit of the form when you click the submit button, retrieve input values and sends them to the process.php script.

It assumes that your "process.php" does an

 echo "ko"; 

if there is an error. You can do some form cleanup after the form has been successfully sent by reseting the inputs:

$("#name").val('');
$("#email").val('');

Answer 4

Assuming you're using jquery:

$(document).ready(function(){
  $('#form').submit(function(e){
    // do some ajax request to process.php here...

    // stop the form doing its default action of submitting directly to process.php
    e.preventDefault();
  });
});

Answer 5

try something like this

      action="<?php print $_SERVER["PHP_SELF"]; ?>" (or) action=""

EDIT:

         <?php
         if(isset($_POST['Submit'])){
             //do your validation or something here
             header("location:Process.php");

             }

Answer 6

I targeted an iframe to solve the problem, and it worked perfectly.

 <form name="contact" role="form" method="post" action="contact.php" target="my_iframe"> Feild 1: <input name="feild1" id="feild1" type="text" placeholder="Lorem ipsum dolor"><br/><br/> Feild 2: <input name="feild2" id="feild2" type="text" placeholder="Lorem ipsum dolor"><br/><br/> Feild 3: <textarea name="feild3" id="feild3" rows="5" type="text" placeholder="Lorem ipsum dolor, sit amet."></textarea><br/><br/> <input type="submit"> </form> <!-- target iframe to prevent redirection to 'contact.php' --> <iframe name="my_iframe" width="1" height="1" style="border:none"></iframe> 

Answer 7

Literally:

<form action="process.php" method="post" id="form" target="_blank">
                                                   ^^^^^^^^^^^^^^^^

This will make the browser stay on the same page, even if the form is submitted.

But you will be more likely looking for AJAX instead, some Introduction .

Answer 8

要做到这一点，你需要jquery ajax，请看这里$ .post

Answer 9

You can do something like this (with jQuery, untested)

$(function() {
    $("#form").submit(e) {
        // Prevent regular form submission
        e.preventDefault();

        // Submit the form via AJAX
        var $form = $("#form");
        $.post(
            $form.attr("action"),
            $form.serialize(),
            function() { alert("Done!"); }
        );
   }
}