Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Formularz kontaktowy
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
Mega_88
24.08.2011, 23:34:03
Hej wszystkim !
Mam do zrobienia troche problematyczny formularz nie tylko ze względu na jego wielkość, ale też ze względu na pojawiający się element, o którym mowa w Opisie tematu. Nie mam pojęcia jak to wykonać, czego użyć i nie przekombinować. Poniżej wklejam kod z formularzem i tam objaśnie jak ma się to zachowywać. Pomoże mi ktoś to ugryźć ? Bo troche mnie przytłoczył rozmiar tego formularza...

[PHP] pobierz, plaintext 
  1. if($id==8) 
  2.   echo '
  3. 	<div id="podstrony_left" style="width:550px;height:350px;margin-top:0px;margin-left:345px;">
  4.  
  5. 		<h1><span class="tytul-form">Formularz kontaktowy</h1>'
  6. 		.'<form method="post" action="formularz">
  7.  
  8. 		<table class="table">
  9. 		<tbody>
  10. 			<tr><td>Imię i Nazwisko:* &nbsp; </td><td><input type="text" name="nazwisko" class="input" /></td></tr>
  11. 			<tr><td>Nazwa Firmy: &nbsp; </td><td><input type="text" name="firma" class="input" /></td></tr>
  12. 			<tr><td>E-mail:* &nbsp; </td><td><input type="text" name="email" class="input" /></td></tr>
  13. 			<tr><td>Telefon Kontaktowy:* &nbsp; </td><td><input type="text" name="telefon" class="input" /></td></tr>
  14.  
  15.         Tutaj mamy pierwszą opcje wyboru. Od tego co wybierzemy zależy co pojawi nam się poniżej. Przypiszę tym opcjom numery
  16.  
  17.                                                  <tr><td>Czego dotyczy wiadomość:*</td>
  18. 			       <td><select name="rodzaj" class="rodzaj">
  19. 			       <option disabled="disabled">-- wybierz --</option>
  20. 		       1 --->     <option value="Catering dla firm">Catering dla firm</option>
  21. 		       2 --->     <option value="Impreza okolicznościowa">Impreza okolicznościowa</option>
  22. 	                     3 --->     <option value="Inne">Inne</option>
  23. 			       </select></td></tr>
  24.  
  25.                                   I tak w przypadku wyboru opcji "1" oraz "2" pojawiają nam się następujące pola. Pole "3" bedzie na samym koncu	
  26.  
  27. 					<tr><td>Rodzaj wydarzenia: &nbsp; </td><td><input type="text" name="firma" class="input" /></td></tr>
  28. 					<tr><td>Termin:* &nbsp; </td><td><input type="text" name="email" class="input" /></td></tr>
  29. 					<tr><td>Czas trwania:* &nbsp; </td><td><input type="text" name="telefon" class="input" /></td></tr>
  30. 					<tr><td>Liczba osób: &nbsp; </td><td><input type="text" name="firma" class="input" /></td></tr>
  31. 					<tr><td>Budżet:* &nbsp; </td><td><input type="text" name="email" class="input" /></td></tr>
  32. 					<tr><td>Miejsce:*</td>
  33. 					<td><select name="rodzaj" class="rodzaj">
  34.  
  35.                                          Tutaj mamy następną opcje wyboru, że tak to nazwę "pod opcje wyboru". Opcje też nazwe numerycznie dla ułatwienia
  36.  
  37.                                                                                     <option disabled="disabled">-- wybierz --</option>
  38. 					1a ---> <option value="Restuaracja">Restuaracja</option>
  39. 					2a ---> <option value="Inne">inne</option>
  40. 						</select></td></tr>
  41.  
  42.                                                                 Po wyborze opcji "1a" pojawiają nam się następujące pola:
  43.  
  44. 					<tr><td>Kategoria wiekowa gości:*</td></tr>
  45. 					<tr><td><input type="checkbox" name="nazwa" value="Dzieci" />&nbsp;Dzieci</td></tr>
  46. 					<tr><td><input type="checkbox" name="nazwa" value="Młodzież" />&nbsp;Młodzież</td></tr>
  47. 					<tr><td><input type="checkbox" name="nazwa" value="Dorośli" />&nbsp;Dorośli</td></tr>
  48. 					<tr><td>Forma podania:*</td>
  49. 					<td><select name="rodzaj" class="rodzaj">
  50. 					<option disabled="disabled">-- wybierz --</option>
  51. 					<option value="Szwedzki stół">Szwedzki stół</option>
  52. 					<option value="Potrawy serwowane do stołu">Potrawy serwowane do stołu</option>
  53. 					</select></td></tr>	
  54. 					<tr><td>Zawartość menu:*</td></tr>
  55. 					<tr><td><input type="checkbox" name="nazwa" value="" />&nbsp;przekąski </td></tr>
  56. 					<tr><td><input type="checkbox" name="nazwa" value="" />&nbsp;posiłek na ciepło </td></tr>
  57. 					<tr><td><input type="checkbox" name="nazwa" value="" />&nbsp;deser</td></tr>
  58. 					<tr><td><input type="checkbox" name="nazwa" value="" />&nbsp;owoce</td></tr>
  59. 					<tr><td><input type="checkbox" name="nazwa" value="" />&nbsp;kawa i herbata</td></tr>
  60. 					<tr><td><input type="checkbox" name="nazwa" value="" />&nbsp;zimne napoje bezalkoholowe</td></tr>
  61. 					<tr><td><input type="checkbox" name="nazwa" value="" />&nbsp;napoje alkoholowe</td></tr>
  62. 					<tr><td valign="top">Informacje dodatkowe:* &nbsp;</td><td><textarea type="wiadomosc" name="wiadomosc" class="textarea" /></textarea></tr>
  63.  
  64.                                                                Po wyborze opcji 2a pojawiają się nam następujące pola
  65.  
  66.  
  67. 					<tr><td valign="top">Jakie inne miejsce:* &nbsp;</td><td><textarea type="wiadomosc" name="wiadomosc" class="textarea" /></textarea></tr>
  68. 					<tr><td>Kategoria wiekowa gości:*</td></tr>
  69. 					<tr><td><input type="checkbox" name="nazwa" value="Dzieci" />&nbsp;Dzieci</td></tr>
  70. 					<tr><td><input type="checkbox" name="nazwa" value="Młodzież" />&nbsp;Młodzież</td></tr>
  71. 					<tr><td><input type="checkbox" name="nazwa" value="Dorośli" />&nbsp;Dorośli</td></tr>
  72. 					<tr><td>Forma podania:*</td>
  73. 					<td><select name="rodzaj" class="rodzaj">
  74. 					<option disabled="disabled">-- wybierz --</option>
  75. 					<option value="Szwedzki stół">Szwedzki stół</option>
  76. 					<option value="Potrawy serwowane do stołu">Potrawy serwowane do stołu</option>
  77. 					</select></td></tr>	
  78. 					<tr><td>Zawartość menu:*</td></tr>
  79. 					<tr><td><input type="checkbox" name="nazwa" value="" />&nbsp;przekąski </td></tr>
  80. 					<tr><td><input type="checkbox" name="nazwa" value="" />&nbsp;posiłek na ciepło </td></tr>
  81. 					<tr><td><input type="checkbox" name="nazwa" value="" />&nbsp;deser</td></tr>
  82. 					<tr><td><input type="checkbox" name="nazwa" value="" />&nbsp;owoce</td></tr>
  83. 					<tr><td><input type="checkbox" name="nazwa" value="" />&nbsp;kawa i herbata</td></tr>
  84. 					<tr><td><input type="checkbox" name="nazwa" value="" />&nbsp;zimne napoje bezalkoholowe</td></tr>
  85. 					<tr><td><input type="checkbox" name="nazwa" value="" />&nbsp;napoje alkoholowe</td></tr>
  86. 					<tr><td>Wyposażenie:*</td></tr>
  87. 					<tr><td><input type="checkbox" name="nazwa" value="" />&nbsp;stoły i krzesła bankietowe </td></tr>
  88. 					<tr><td><input type="checkbox" name="nazwa" value="" />&nbsp;stoły i ławy biesiadne </td></tr>
  89. 					<tr><td><input type="checkbox" name="nazwa" value="" />&nbsp;stoliki koktajlowe</td></tr>
  90. 					<tr><td><input type="checkbox" name="nazwa" value="" />&nbsp;namiot</td></tr>
  91. 					<tr><td><input type="checkbox" name="nazwa" value="" />&nbsp;zastawa</td></tr>
  92. 					<tr><td><input type="checkbox" name="nazwa" value="" />&nbsp;dekoracje stołów</td></tr>
  93. 					<tr><td>Obsługa kelnera:*</td>
  94. 					<td><select name="rodzaj" class="rodzaj">
  95. 					<option disabled="disabled">-- wybierz --</option>
  96. 					<option value="Tak">Tak</option>
  97. 					<option value="Nie">Nie</option>
  98. 					</select></td></tr>
  99.  
  100.                             Tutaj wracamy do samego początku formularza, ponieważ tylko te pole pojawia nam się po wybraniu opcji z numerem "3" (inne)
  102. 		          <tr><td valign="top">Treść:* &nbsp;</td><td><textarea type="wiadomosc" name="wiadomosc" class="textarea" /></textarea></tr>
  103.  
  104.  
  105. 					<tr><td><span class="pole">* pole obowiązkowe</span></td><td><input type="submit" class="submit" value=" Wyślij " /></td></tr>
  106.  
  107. 						</tbody>
  108. 					</table>'
  109. 					.'
  110.  
  111. 					</div>';
[PHP] pobierz, plaintext
mortus
25.08.2011, 09:12:34
Na przykładzie opcji 3:
[HTML] pobierz, plaintext 
  1. <tr>
  2.  <td>Czego dotyczy wiadomość:*</td>
  3.  <td>
  4.   <select name="rodzaj" class="rodzaj" onchange="wybierzRodzaj(this.options[this.selectedIndex].value); return false;">
  5.    <option disabled="disabled">-- wybierz --</option>
  6.    <option value="1">Catering dla firm</option>
  7.    <option value="2">Impreza okolicznościowa</option>
  8.    <option value="3">Inne</option>
  9.   </select>
  10.  </td>
  11. </tr>
  12. <!-- HTML dla opcji 1 i 2 -->
  13. <tr class="rodzaj_3">
  14.  <td valign="top">Treść:* &nbsp;</td>
  15.  <td><textarea type="wiadomosc" name="wiadomosc" class="textarea" /></textarea>
  16. </tr>
[HTML] pobierz, plaintext

Domyślny CSS:
[CSS] pobierz, plaintext 
  1. .rodzaj_1, .rodzaj_2, .rodzaj_3, .miejsce_1, .miejsce_2 {
  2.  display: none;
  3. }
[CSS] pobierz, plaintext

I malutki skrypt w JavaScript (jQuery):
[JAVASCRIPT] pobierz, plaintext 
  1. function wybierzRodzaj(nr) {
  2.  // ukryjmy wszystkie wiersze <tr> dotyczące jakiegoś rodzaju wydarzenia
  3.  $("tr[class*=\"rodzaj\"]").hide();
  4.  $(".rodzaj_" + nr).show();
  5. }
[JAVASCRIPT] pobierz, plaintext

Użyłem tutaj jQuery, żeby pobrać interesujące nas elementy, ukryć je lub pokazać. Z jQuery jest łatwiej.
toaspzoo
25.08.2011, 13:57:07
Jeszcze musisz dać
<script src="jquery.js"></script>
przed wszystkim
Mega_88
6.09.2011, 17:01:10
Dziekuje wszystkim za pomoc formularz działa prawie tak jakbym tego chciał została mi jedna rzecz do zrobienia. Mianowicie przy wyborze pierwszych opcji "Catering dla Firma" i "Impreza Okolicznościowa" otwiera nam się lista kolejnych pól. Natomiast przy wyborze opcji Inne powinna nam się otworzyć tylko opcja z polem <textarea>, a mi się otwierają dodatkowe opcje z Catering dla Firma i Impreza okolicznościowa. Jak zrobić by po wyborze opcji Inne otwierało mi się tylko pole <textarea>. Pole <textarea> ma nadaną klase "rodzaj_3". Poniżej wklejam skrypt JS oraz kod formularza. W kodzie formularza opcja, która mi chodzi znajduje się na samym dole.

Skrypt nie jest cięzki, ale nie znam się na JS...
Cytat
<script type="text/javascript">
function wybierzRodzaj(nr) {
// ukryjmy wszystkie wiersze <tr> dotyczące jakiegoś rodzaju wydarzenia
$("tr[class*=\"rodzaj\"]").hide();
$(".rodzaj_" + nr).show();
$(".rodzaj_" + 1).show();


}
</script>


Tutaj kod formularza:

Cytat
<?php
if($id==8)
echo '
<div id="podstrony_left" style="width:550px;min-height:200px;margin-top:0px;margin-left:345px;">

<h1><span class="tytul-form">Formularz kontaktowy</h1>'
.'<form method="post" action="formularz" onsubmit="return validateForm()">

<br /><table class="table">
<tbody>
<tr><td span class="td-form">Imię i Nazwisko:* &nbsp; </td><td><input type="text" name="nazwisko" class="input" /></td></tr>
<tr><td>Nazwa Firmy: &nbsp; </td><td><input type="text" name="firma" class="input" /></td></tr>
<tr><td>E-mail:* &nbsp; </td><td><input type="text" name="email" class="input" /></td></tr>
<tr><td>Telefon Kontaktowy:* &nbsp; </td><td><input type="text" name="telefon" class="input" /></td></tr>



<tr>
<td>Temat:*</td>
<td>
<select name="rodzaj" class="rodzaj" onchange="wybierzRodzaj(this.options[this.selectedIndex].value); return false;">
<option>-- wybierz --</option>
<option value="1" name"catering">Catering dla firm</option>
<option value="1" name"impreza">Impreza okolicznościowa</option>
<option value="3" name"inne">Inne</option>
</select>
</td>
</tr>

<tr class="rodzaj_1"><td>Rodzaj wydarzenia: &nbsp; </td><td><input type="text" name="rodzaj1" class="input" value="np: konferencja / chrzciny" /></td></tr>
<tr class="rodzaj_1"><td>Termin:* &nbsp; </td><td><input type="text" name="termin" class="input" /></td></tr>
<tr class="rodzaj_1"><td>Czas trwania:* &nbsp; </td><td><input type="text" name="czas" class="input" /></td></tr>
<tr class="rodzaj_1"><td>Liczba osób: &nbsp; </td><td><input type="text" name="liczba" class="input" /></td></tr>
<tr class="rodzaj_1"><td>Budżet:* &nbsp; </td><td><input type="text" name="budzet" class="input" /></td></tr>

<tr class="rodzaj_1">
<td>Miejsce:*</td>
<td><select name="rodzaj2" class="rodzaj" onchange="wybierzRodzaj(this.options[this.selectedIndex].value); return false;">
<option>-- wybierz --</option>
<option value="2">Restuaracja Eureka</option>
<option value="5">inne</option>
</select></td>
</tr>

<tr class="rodzaj_2">
<tr class="rodzaj_2"><td><br />Kategoria wiekowa gości:</b></td></tr>
<tr class="rodzaj_2"><td><input type="checkbox" name="dzieci1" value="Tak" />&nbsp;Dzieci</td></tr>
<tr class="rodzaj_2"><td><input type="checkbox" name="mlodziez1" value="Tak" />&nbsp;Młodzież</td></tr>
<tr class="rodzaj_2"><td><input type="checkbox" name="dorosli1" value="Tak" />&nbsp;Dorośli</td></tr>
</tr>

<tr class="rodzaj_2"><td>Forma podania:</b></td>
<td><select name="rodzaj5" class="rodzaj">
<option>-- wybierz --</option>
<option value="Szwedzki stół">Szwedzki stół</option>
<option value="Potrawy serwowane do stołu">Potrawy serwowane do stołu</option>
</select></td>
</tr>

<tr class="rodzaj_2"><td>Zawartość menu:</b></td></tr>
<tr class="rodzaj_2"><td><input type="checkbox" name="przekaski" value="Tak" />&nbsp;przekąski </td></tr>
<tr class="rodzaj_2"><td><input type="checkbox" name="posilek" value="Tak" />&nbsp;posiłek na ciepło </td></tr>
<tr class="rodzaj_2"><td><input type="checkbox" name="deser" value="Tak" />&nbsp;deser</td></tr>
<tr class="rodzaj_2"><td><input type="checkbox" name="owoce" value="Tak" />&nbsp;owoce</td></tr>
<tr class="rodzaj_2"><td><input type="checkbox" name="kawa" value="Tak" />&nbsp;kawa i herbata</td></tr>
<tr class="rodzaj_2"><td><input type="checkbox" name="zimne" value="Tak" />&nbsp;zimne napoje bezalkoholowe</td></tr>
<tr class="rodzaj_2"><td><input type="checkbox" name="napoje" value="Tak" />&nbsp;napoje alkoholowe</td></tr>
<tr class="rodzaj_2"><td valign="top">Informacje dodatkowe:* &nbsp;</td><td><textarea type="wiadomosc2" name="wiadomosc2" class="textarea" /></textarea></tr>


<tr class="rodzaj_5"><td valign="top"><br />Jakie inne miejsce:*</b> &nbsp;</td><td><br /><input type="text" name="inne_miejsce" class="input" /></tr>

<tr class="rodzaj_5"><td><br />Kategoria wiekowa gości:</b></td></tr>
<tr class="rodzaj_5"><td><input type="checkbox" name="dzieci2" value="Tak" />&nbsp;Dzieci</td></tr>
<tr class="rodzaj_5"><td><input type="checkbox" name="mlodziez2" value="Tak" />&nbsp;Młodzież</td></tr>
<tr class="rodzaj_5"><td><input type="checkbox" name="dorosli2" value="Tak" />&nbsp;Dorośli</td></tr>


<tr class="rodzaj_5"><td>Forma podania:</td>
<td><select name="rodzaj6" class="rodzaj">
<option>-- wybierz --</option>
<option value="Szwedzki stół">Szwedzki stół</option>
<option value="Potrawy serwowane do stołu">Potrawy serwowane do stołu</option>
</select></td>
</tr>


<tr class="rodzaj_5"><td>Zawartość menu:*</b></td></tr>
<tr class="rodzaj_5"><td><input type="checkbox" name="przekaski1" value="Tak" />&nbsp;przekąski </td></tr>
<tr class="rodzaj_5"><td><input type="checkbox" name="posilek1" value="Tak" />&nbsp;posiłek na ciepło </td></tr>
<tr class="rodzaj_5"><td><input type="checkbox" name="deser1" value="Tak" />&nbsp;deser</td></tr>
<tr class="rodzaj_5"><td><input type="checkbox" name="owoce1" value="Tak" />&nbsp;owoce</td></tr>
<tr class="rodzaj_5"><td><input type="checkbox" name="kawa1" value="Tak" />&nbsp;kawa i herbata</td></tr>
<tr class="rodzaj_5"><td><input type="checkbox" name="zimne1" value="Tak" />&nbsp;zimne napoje bezalkoholowe</td></tr>
<tr class="rodzaj_5"><td><input type="checkbox" name="napoje1" value="Tak" />&nbsp;napoje alkoholowe</td></tr>

<tr class="rodzaj_5"><td>Wyposażenie:*</b></td></tr>
<tr class="rodzaj_5"><td><input type="checkbox" name="stoly" value="Tak" />&nbsp;stoły i krzesła bankietowe </td></tr>
<tr class="rodzaj_5"><td><input type="checkbox" name="krzesla" value="Tak" />&nbsp;stoły i ławy biesiadne </td></tr>
<tr class="rodzaj_5"><td><input type="checkbox" name="stoliki" value="Tak" />&nbsp;stoliki koktajlowe</td></tr>
<tr class="rodzaj_5"><td><input type="checkbox" name="namiot" value="Tak" />&nbsp;namiot</td></tr>
<tr class="rodzaj_5"><td><input type="checkbox" name="zastawa" value="Tak" />&nbsp;zastawa</td></tr>
<tr class="rodzaj_5"><td><input type="checkbox" name="dekoracje" value="Tak" />&nbsp;dekoracje stołów</td></tr>

<tr class="rodzaj_5"><td>Obsługa kelnera:*</td>
<td><select name="rodzaj7" class="rodzaj">
<option>-- wybierz --</option>
<option value="Tak">Tak</option>
<option value="Nie">Nie</option>
</select></td>
</tr>

<tr class="rodzaj_3">
<td valign="top">Treść:* &nbsp;</td>
<td><textarea type="wiadomosc" name="wiadomosc" class="textarea" /></textarea>
</tr>

<tr><td><span class="pole">* pole obowiązkowe</span></td><td><input type="submit" class="submit" value=" Wyślij " /></td></tr>

</tbody>
</table>'
.'

</div>';
?>
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.