javascript - Submit form and stay on same page? - Stack Overflow

admin管理员组

文章数量:1135065

I have a form that looks like this

<form action="receiver.pl" method="post">
  <input name="signed" type="checkbox">
  <input value="Save" type="submit">
</form>

and I would like to stay on the same page, when Submit is clicked, but still have receiver.pl executed.

How should that be done?

I have a form that looks like this

<form action="receiver.pl" method="post">
  <input name="signed" type="checkbox">
  <input value="Save" type="submit">
</form>

and I would like to stay on the same page, when Submit is clicked, but still have receiver.pl executed.

How should that be done?

• javascript
• html
• perl

Share Improve this question Follow asked Apr 20, 2011 at 16:48 Sandra SchlichtingSandra Schlichting 26k3737 gold badges120120 silver badges182182 bronze badges 2

• 3 simplest: add target="_blank" - less simple: ajax – mplungjan Commented Apr 20, 2011 at 16:51
• 2 So receiver.pl is opened in a new window/tab? – Sandra Schlichting Commented Apr 20, 2011 at 16:55

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 92

99% of the time I would use XMLHttpRequest or fetch for something like this. However, there's an alternative solution which doesn't require javascript...

You could include a hidden iframe on your page and set the target attribute of your form to point to that iframe.

<style>
  .hide { position:absolute; top:-1px; left:-1px; width:1px; height:1px; }
</style>

<iframe name="hiddenFrame" class="hide"></iframe>

<form action="receiver.pl" method="post" target="hiddenFrame">
  <input name="signed" type="checkbox">
  <input value="Save" type="submit">
</form>

There are very few scenarios where I would choose this route. Generally handling it with javascript is better because, with javascript you can...

• gracefully handle errors (e.g. retry)
• provide UI indicators (e.g. loading, processing, success, failure)
• run logic before the request is sent, or run logic after the response is received.

The easiest answer: jQuery. Do something like this:

$(document).ready(function(){
   var $form = $('form');
   $form.submit(function(){
      $.post($(this).attr('action'), $(this).serialize(), function(response){
            // do something here on success
      },'json');
      return false;
   });
});

If you want to add content dynamically and still need it to work, and also with more than one form, you can do this:

   $('form').live('submit', function(){
      $.post($(this).attr('action'), $(this).serialize(), function(response){
            // do something here on success
      },'json');
      return false;
   });

The HTTP/CGI way to do this would be for your program to return an HTTP status code of 204 (No Content).

When you hit on the submit button, the page is sent to the server. If you want to send it async, you can do it with ajax.

Use XMLHttpRequest

var xhr = new XMLHttpRequest();
xhr.open("POST", '/server', true);

//Send the proper header information along with the request
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = function() { // Call a function when the state changes.
    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
        // Request finished. Do processing here.
    }
}
xhr.send("foo=bar&lorem=ipsum");
// xhr.send(new Int8Array()); 
// xhr.send(document);

本文标签： javascriptSubmit form and stay on same pageStack Overflow