Soumettre le formulaire et rester sur la même page ?

Question

J'ai un formulaire qui ressemble à ceci

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

et je voudrais rester sur la même page, lorsque l'on clique sur Submit, mais avoir toujours receiver.pl exécuté.

Comment faire ?

Answer 1

99% du temps, j'utiliserais XMLHttpRequest o aller chercher pour quelque chose comme ça. Cependant, il existe une solution alternative qui ne nécessite pas de javascript...

Vous pourriez inclure une iframe cachée sur votre page et définir l'attribut cible de votre formulaire pour qu'il pointe vers cette 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>

Il y a très peu de scénarios où je choisirais cette voie. En général, il est préférable de le gérer avec javascript car, avec javascript, vous pouvez...

• gérer gracieusement les erreurs (par exemple, réessayer)
• fournir des indicateurs d'interface utilisateur (par exemple, chargement, traitement, succès, échec)
• exécuter la logique avant l'envoi de la demande, ou exécuter la logique après la réception de la réponse.

Answer 2

La réponse la plus simple : jQuery. Faites quelque chose comme ceci :

$(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;
   });
});

Si vous voulez ajouter du contenu de manière dynamique tout en ayant besoin que cela fonctionne, et aussi avec plus d'un formulaire, vous pouvez le faire :

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

Answer 3

La façon HTTP/CGI de faire cela serait que votre programme renvoie un code d'état HTTP de 204 (No Content).

Answer 4

Lorsque vous cliquez sur le bouton "Envoyer", la page est envoyée au serveur. Si vous voulez l'envoyer de manière asynchrone, vous pouvez le faire avec ajax.

Answer 5

Utilice 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);