Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript][HTML]Formularz w JS, Problem
David_Rook
post 18.09.2012, 23:32:49
Post #1





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 14.08.2012

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
b4rt3kk
post 19.09.2012, 00:25:18
Post #2





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

Ostrzeżenie: (0%)
-----

Te rzeczy, które na początku mają być ukryte to musza mieć ustawione w css display: none;


--------------------
Jeśli pomogłem, kliknij proszę 'pomógł'. Dzięki.
Go to the top of the page
+Quote Post
David_Rook
post 19.09.2012, 07:26:07
Post #3





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 14.08.2012

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
styryl
post 19.09.2012, 08:18:52
Post #4





Grupa: Zarejestrowani
Postów: 223
Pomógł: 27
Dołączył: 16.04.2008
Skąd: Bakutilu

Ostrzeżenie: (0%)
-----

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.

Ten post edytował styryl 19.09.2012, 08:19:50
Go to the top of the page
+Quote Post
zegarek84
post 19.09.2012, 09:30:46
Post #5





Grupa: Zarejestrowani
Postów: 1 332
Pomógł: 294
Dołączył: 12.10.2008
Skąd: Olkusz

Ostrzeżenie: (0%)
-----

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ć...


--------------------
Jeśli twoja ręka rusza do przodu powstrzymaj swój gniew; gdy wyprzedza cię twój gniew - wycofaj rękę.
Go to the top of the page
+Quote Post
David_Rook
post 19.09.2012, 17:52:04
Post #6





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 14.08.2012

Ostrzeżenie: (0%)
-----

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

Ten post edytował David_Rook 19.09.2012, 18:05:23
Go to the top of the page
+Quote Post
b4rt3kk
post 20.09.2012, 17:07:28
Post #7





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

Ostrzeżenie: (0%)
-----

Nie ma co kombinować, najprostsze rozwiązanie jest zazwyczaj najlepsze.


--------------------
Jeśli pomogłem, kliknij proszę 'pomógł'. Dzięki.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 31.07.2025 - 10:48
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn