Ostatnio dostałem (kolejne) zlecenie, na przeniesienie kalkulatora z pliku arkusza kalkulacyjnego, do formatu strony internetowej. Większość prac związana była z przebudową i uproszczeniem całości, tak by nie przenosić dość rozbudowanego arkusza kalkulacyjnego 1:1 na stronę internetową. Nie tylko dlatego, że taki formularz wyglądałby na bardzo skomplikowany, ale też dlatego, że tego typu konstrukcje średnio skalują się na ekranie np. telefonu. Pod kalkulatorem standardowy formularz kontaktowy, czyli element „form” HTMLa…

Przesyłanie w formularzu HTML danych z pól spoza formularza internetowego

I pewnie ten artykuł by nie powstał, gdyby nie pytanie, które przy tej okazji dostałem – skoro przygotowany kalkulator internetowy jest poza formularzem kontaktowym, którego wypełnienie i przesłanie na inną stronę powoduje dalsze operacje, to pola z tego kalkulatora, nie zostaną przesłane, co oczywiście byłoby bez sensu.

W standardowej sytuacji faktycznie tak by było. Ale po kolei, czyli najpierw prosty formularz kontaktowy:

<form action="email.php" method="post">
	<p><input type="text" id="imie" name="imie" value="" placeholder="Imie"></p>
	<p><input type="email" id="email" name="email" value=""placeholder="E-mail"></p>
	<input type="submit" value="Wyślij">
</form>

Nic nadzwyczajnego, w końcu to tylko przykład, czyli pola na imię i adres e-mail i przycisk wyślij, za pomocą którego wprowadzone dane zostaną wysłane na stronę email.php, gdzie nastąpi ich dalsza obróbka.

Teraz sytuację trochę komplikujemy, czyli dodajemy pole typu „input” poza formularzem:

<input type="text" id="id" name="id" value="" placeholder="ID">
<form action="email.php" method="post">
	<p><input type="text" id="imie" name="imie" value="" placeholder="Imie"></p>
	<p><input type="email" id="email" name="email" value=""placeholder="E-mail"></p>
	<input type="submit" value="Wyślij">
</form>

W tym momencie przesłanie formularza wyśle wartości z pól „imie” i „email”, ale nie prześle nic z pola „id”, bo jest ono poza formularze.

Oczywiście można by je wstawić wewnątrz formularza, ale uznajmy, że z jakiegoś powodu nie chcemy tego robić. I w takiej sytuacji, by przesłać również wartości z tego pola, musimy skorzystać z małej sztuczki.

Na początek w formularzu dodajemy nowe pole typu „input” (taki sam typ, jak pole „id”), ale ukryte, czyli takie, które nie będzie się wyświetlać:

<input type="hidden" id="idCopy" name="idCopy" value="">

Następnie umieszczamy na stronie kod JavaScript, który będzie w odpowiednim momencie kopiował zawartość z pola „id”, które jest poza formularzem, do ukrytego pola „idCopy”, które jest wewnątrz formularza:

<script>
function copyValues() {
	document.getElementById('idCopy').value = document.getElementById('id').value;
}
</script>

Na koniec jeszcze zmieniamy tag otwierający formularz, tak, by w momencie jego wysyłania, uruchomiła się funkcja „copyValue”, która tuż przed wysłaniem formularza, skopiuje zawartość z pola „id”, do pola „idCopy”:

<form action="email.php" method="post" onsubmit="copyValues()">

W ten oto prosty sposób, do strony docelowej formularza (w tym przypadku „email.php”), możemy przesłać dane z pól, które znajdują się poza formularzem.