Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][HTML]Formularz w JS
Forum PHP.pl > Forum > Przedszkole
David_Rook
18.09.2012, 23:32:49
Witam Panowie,

Jestem raczkujący jeżeli chodzi o JaveScript. Na potrzeby pewnej pracy musiałem zrobić formularz, którego zawartość zmienia się dynamicznie w zależności od wybranej opcji.
Po dłuższym czasie cel udało się osiągnąć.

Kod:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3.  
  4. <head>
  5.     <title>.:.: Wyszukiwarka Kredytów :.:.</title>
  6.     <meta content="text/html; charset=utf-8" http-equiv="content-type" /> 
  7.     <script type='text/javascript' src="js/jquery-1.7.2.min.js"></script>
  8.     <script type='text/javascript' src="js/jquery-ui-1.8.22.custom.min.js"></script>
  9.     <link rel="stylesheet" href="css/ui-darkness/jquery-ui-1.8.22.custom.css" />
  10.     <link type="text/css" rel="stylesheet" href="main.css" />
  11.     <!--Funkcja jQuery odpowiadająca za działanie zakładek-->
  12.     <script type='text/javascript'>
  13. 	$(function() {
  14. 		$( "#kredyty" ).tabs();
  15. 	});
  16.     </script>
  17.  
  18.     <script type='text/javascript'>
  19. 	function onSelect(objSelect)
  20.         {
  21.             if(objSelect.value=="2")
  22.                 {
  23.                     document.getElementById("zakup").style.display='block'; //Pokazuje opcje
  24.                 }
  25.                 else
  26.                 {
  27.                     document.getElementById("zakup").style.display='none'; //chowa
  28.                 } 
  29.  
  30.             if(objSelect.value=="3")
  31.                 {
  32.                     document.getElementById("refinansowanie").style.display='block'; //Pokazuje opcje
  33.                 }
  34.                 else
  35.                 {
  36.                     document.getElementById("refinansowanie").style.display='none'; //chowa
  37.                 }
  38.             if(objSelect.value=="4")
  39.                 {
  40.                     document.getElementById("konsolidacja").style.display='block'; //Pokazuje opcje
  41.                 }
  42.                 else
  43.                 {
  44.                     document.getElementById("konsolidacja").style.display='none'; //chowa
  45.                 }
  46.             if(objSelect.value=="5")
  47.                 {
  48.                     document.getElementById("pozyczka").style.display='block'; //Pokazuje opcje
  49.                 }
  50.                 else
  51.                 {
  52.                     document.getElementById("pozyczka").style.display='none'; //chowa
  53.                 }
  54.         }
  55.     </script>
  56.  
  57.  
  58. </head>
  59.  
  60. <body>
  61.     <h2><center>Wyszukiwarka kredytów</center></h2>  
  62.  
  63. <div id="kredyty">
  64.     <ul>
  65. 	<li><a href="#hipoteczny">Kredyt Hipoteczny</a></li>
  66. 	<li><a href="#samochodowy">Kredyt Samochodowy</a></li>
  67. 	<li><a href="#inwestycyjny">Kredyt Inwestycyjny</a></li>
  68.         <li><a href="#gotowkowy">Kredyt Gotówkowy</a></li>
  69.     </ul>
  70.  
  71. <div id="hipoteczny">
  72.     <form action="search.php" method="POST" id="form1" class="formularz">
  73.         <div>
  74.         Cel kredytu:
  75.  <select name="cel_kredytu" id="wybor" onchange="onSelect(this);">
  76.         <option value="1">Budowa domu</option>
  77. 	<option value="2">Zakup</option>
  78.         <option value="3">Refinansowanie</option>
  79.         <option value="4">Konsolidacja</option>
  80.         <option value="5">Pożyczka</option>
  81.  </select>
  82.         </div>
  83.         <div id="zakup">
  84.             <div>
  85.             Rynek:
  86.             <select name="cel_kredytu" id="wybor">
  87. 	<option>Pierwotny</option>
  88. 	<option>Wtórny</option>
  89.             </select>            
  90.             </div>
  91.             <div>
  92.             Przedmiot zakupu:
  93.             <select name="cel_kredytu">
  94.                 <option>Mieszkanie</option>
  95.                 <option>Dom</option>
  96.                 <option>Działka</option>
  97.             </select>  
  98.             </div>
  99.         </div>
  100.  
  101.          <div id="refinansowanie">
  102.             <div>
  103.             Przedmiot zakupu:
  104.             <select name="cel_kredytu">
  105.                 <option>Mieszkanie</option>
  106.                 <option>Dom</option>
  107.                 <option>Działka</option>
  108.             </select>  
  109.             </div>
  110.         </div>
  111.  
  112.            <div id="konsolidacja">
  113.             <div>
  114.             Rynek:
  115.             <select>
  116. 	<option>Pierwotny</option>
  117. 	<option>Wtórny</option>
  118.             </select>            
  119.             </div>
  120.             <div>
  121.             Przedmiot zakupu:
  122.             <select name="cel_kredytu">
  123.                 <option>Mieszkanie</option>
  124.                 <option>Dom</option>
  125.                 <option>Działka</option>
  126.             </select>  
  127.             </div>
  128.                <div>
  129.                    Suma kredytów konsumpcyjnych: <input type="text" name="okres" />
  130.                </div>
  131.         </div>
  132.  
  133.         <div id="pozyczka">
  134.             <div>
  135.             Przedmiot zabezpieczenia:
  136.             <select name="cel_kredytu">
  137.                 <option>Mieszkanie</option>
  138.                 <option>Dom</option>
  139.                 <option>Działka</option>
  140.             </select>  
  141.             </div>
  142.         </div>
  143.  
  144.         <div>
  145.  Wartość nieruchomości: <input type="text" name="wartosc" />
  146.         </div>
  147.  Kwota kredytu: <input type="text" name="kredyt" />
  148.  <br />
  149.  Waluta:
  150.  <select name="waluta">
  151. 	<option>PLN</option>
  152. 	<option>EURO</option>
  153.         <option>USD</option>
  154.         <option>CHF</option>
  155.  </select>
  156.  <br />
  157.   Rodzaj rat:
  158.  <select name="raty">
  159. 	<option>stałe</option>
  160. 	<option>malejące</option>
  161.  </select>
  162. <br />
  163.  Okres kredytowania: <input type="text" name="okres" />
  164.   <br />
  165.  Wiek najstarszego kredytobiorcy: <input type="text" name="wiek" />
  166.   <br />
  167.  <input type="submit" value="Szukaj!" />
  168. </form> 
  169.  
  170.  
  171. </div>    
  172. </body>
  173. </html>]
[HTML] pobierz, plaintext


Wszystko fajnie, pięknie, ale po pierwszym wejściu na stronę z tym formularzem pojawiają się wszystkie pola formularza, dopiero po wybraniu konkretnego celu kredytowanie pojawiają się/znikają odpowiednie pola formularza. To samo dzieje się po odświeżeniu strony.

Pytanie moje jest takie:
Czy da się w JS/HTML ustawić jakieś wartości by domyślnie nie wyświetlał wszystkich pól tylko to co trzeba.
Każdy pomysl się liczy.

Z góry dziękuję za sugestie.

Pozdrawiam! smile.gif
b4rt3kk
19.09.2012, 00:25:18
Te rzeczy, które na początku mają być ukryte to musza mieć ustawione w css display: none;
David_Rook
19.09.2012, 07:26:07
Ok, jak wrócę z pracy to przetestuje.

Czyli mam rozumieć, że kod JavaScript ma jakby wyższość nad CSS?
Jeśli dam atrybut 
[HTML] pobierz, plaintext 
  1. dispaly: none;
[HTML] pobierz, plaintext
to przy wybraniu odpowiedniego rodzaju kredytu kod JavaScript zamieni to? smile.gif
styryl
19.09.2012, 08:18:52
To nie jest kwestia "wyższości", przeczytaj

http://pl.wikipedia.org/wiki/JavaScript

Aby ułatwić sobie pracę zainteresuj się jakimś frameworkiem javascript np jquery.
zegarek84
19.09.2012, 09:30:46
jQ to on już ma dołączony ;]

na to co teraz zrobiłeś i widzę jak chcesz zrobić to wywołaj po prostu tą funkcję onSelect z odpowiednim atrybutem po zdefiniowaniu funkcji (czyli za nią), możesz to zrobić na 2 sposoby - albo wywołać tigger change w jq albo surową funkcję z atrybutem:
[JAVASCRIPT] pobierz, plaintext 
  1. $(function(){$('#wybor').change()});
[JAVASCRIPT] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
  1. $(function(){onSelect($('#wybor')[0])});
[JAVASCRIPT] pobierz, plaintext


z wywoływania $(function(){}) możesz zrezygnować o ile wywołujesz skrypt za tymi elementami DOM (będą już utworzone) - fakt, wszystko mogłeś ukryć na początku w CSS ale skoro masz do tego funkcję to możesz teraz z niej skożystać...
David_Rook
19.09.2012, 17:52:04
Tylko właśnie o to chodzi, że nie za bardzo znam jQuery... (Umiem tylko użyć gotowych szablonów ze strony jQuery UI...)

A tak jak mam teraz w JavaScript po prostu nie może być?

I dzięki za podpowiedź z tym ukrywaniem w css, wszystko działa smile.gif
b4rt3kk
20.09.2012, 17:07:28
Nie ma co kombinować, najprostsze rozwiązanie jest zazwyczaj najlepsze.
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.