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

pytanie zadane 1 lipca 2018 w PHP przez GracjanDogg Użytkownik (840 p.)

<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?

2 odpowiedzi

odpowiedź 2 lipca 2018 przez Tomek Sochacki Ekspert (227,510 p.)
wybrane 2 lipca 2018 przez GracjanDogg

Najlepsza

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 :)

komentarz 2 lipca 2018 przez GracjanDogg Użytkownik (840 p.)

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?

komentarz 2 lipca 2018 przez Tomek Sochacki Ekspert (227,510 p.)

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. :)

komentarz 2 lipca 2018 przez GracjanDogg Użytkownik (840 p.)

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.

komentarz 2 lipca 2018 przez Tomek Sochacki Ekspert (227,510 p.)

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