Jak zrobić, żeby po przesłaniu formularza nie ładował się w przeglądarce plik z action="plik"?

Question

<form action="/action_page.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>

Chcę, żeby zebrane dane się gdzieś zapisały, ale niech się wszystko nie otwiera na nowej karcie. Jak zrobić żeby wysłało i nic więcej nie robiło?

Answer 1

Przechwyć zdarzenie submit na formularzu i wyślij dane przy wykorzystaniu technologii Ajax, jednocześnie dodając event.preventDefault() aby zapobiec akcji domyślnej, czyli w tym wypadku wejścia w plik z action i przeładowania strony.

Jak zrobić żeby wysłało i nic więcej nie robiło?

Ja uważam, że mimo wszystko user powinien dostać informację czy się udało wszystko poprawnie wysłać/zapisać w bazie itp. W odpowiedzi z serwera możesz np. rzucić jakiegoś JSON'a ze statusem ok/error i choćby na tej podstawie dać info userowi.

Do prostych requestów Ajaxowych polecam np. axios, natywne fetch albo ewentualnie jQuery jeśli masz to i tak już w kodzie, bo dla samego ajax to nie warto podciągać całej biblioteki. Ale jeśli to byłby Twój pierwszy raz z Ajax to polecam spróbować samodzielnie obsłużyć obiekt XMLHttpRequest aby dokładnie zrozumieć co i jak się tam dzieje i nie myśleć o jQuery.ajax() jako o jakieś czarnej magii :)

Comments

Ja uważam, że mimo wszystko user powinien dostać informację czy się udało 

Niekoniecznie. Robię quiz, na początku pobieram dane ile ma lat, płać itd. chce to sobie gdzieś wysłać i w momencie wysłania bym ajaxem (jeszcze w nim nie robiłem, ale tę stronę planuje w nim zrobić) podmienił bym zawartość tego fragmentu strony na na pytania. A co do pierwszego to nie dałoby się formularza tak edytować żeby php wysłać i nie ładowały się żadne nowe strony?

---

No właśnie, user coś podaje, to leci na sewrwer, tam mamy jakąś walidację i próbę zapisania np. w bazie. jeśli się uda to leci status OK i dane do quizu, jeśli nie to leci ERROR i user ma ładne info że coś poszło nie tak, a może pójść, może nie przejść walidacja, może być problem z bazą itp. itd. :)

---

Wszystko działa poza tym:

Przechwyć zdarzenie submit na formularzu i wyślij dane przy wykorzystaniu technologii Ajax

Nie wiem jak to przechwycić, próbowałem serialize() z marnym skutkiem.

---

Chodziło mi po prostu o obsłużenie eventu submit np.:

<form id="contact-form" ..... >
...

// i teraz;
const form = document.getElementById('contact-form');
form.addEventListener('submit', (e) => {
    e.preventDefault(); //zapobiegamy akcji domyślnej
    // i tutaj np. strzelamy do serwera poprzez Ajax
} );

 

---

Sory, ale nie rozumiem, w jaki sposób mam strzelić ajaxem do serwera?

---

Poczytaj w takim razie po prostu o technologii Ajax w JS to wszystko Ci się wyjaśni, było o tym wiele wątków na forum.

Answer 2

https://stackoverflow.com/questions/133925/javascript-post-request-like-a-form-submit