Przesłać formularz i pozostać na tej samej stronie?

Mam formę, która wygląda tak 

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

I chciałbym pozostać na tej samej stronie, po kliknięciu Submit, ale nadal mam receiver.pl wykonane.

Jak to zrobić?
Author: Sandra Schlichting, 2011-04-20
Source

5 answers

Najprostsza odpowiedź: jQuery. Zrób coś takiego: 

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

Jeśli chcesz dodawać treść dynamicznie i nadal potrzebujesz jej do działania, a także z więcej niż jednym formularzem, możesz to zrobić: 

   $('form').live('submit', function(){
      $.post($(this).attr('action'), $(this).serialize(), function(response){
            // do something here on success
      },'json');
      return false;
   });
 62
Author: Herman Schaaf,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-30 15:29:11

99% czasu używałbym XMLHttpRequest lub fetch do czegoś takiego. Istnieje jednak alternatywne rozwiązanie, które nie wymaga javascript...

Możesz umieścić Ukryty iframe na swojej stronie i ustawić atrybut docelowy formularza tak, aby wskazywał na ten 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>

Jest bardzo niewiele scenariuszy, w których wybrałbym tę trasę. Ogólnie obsługa javascript jest lepsza, ponieważ z javascript można może...

  • z gracją obsługuj błędy (np. retry)
    • [12]}podaj wskaźniki interfejsu użytkownika (np. Ładowanie, przetwarzanie, sukces, awaria)
  • Uruchom logikę przed wysłaniem żądania lub uruchom logikę po otrzymaniu odpowiedzi.
 54
Author: jessegavin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-24 21:42:55

Sposobem HTTP / CGI jest zwrócenie kodu statusu HTTP 204 (bez zawartości).

 31
Author: Dave Cross,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-30 16:37:48

Po naciśnięciu przycisku submit strona jest wysyłana na serwer. Jeśli chcesz wysłać go asynchronicznie, możesz to zrobić za pomocą ajax.

 4
Author: Eric Frick,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-03 10:29:08

Wystarczy użyć: action="". Nie ma takiej potrzeby jak javascript.

 -9
Author: user2251255,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-17 05:15:05