Select script

Vojko · Napísal **Vojko**: 06.08.2012 13:46

Zdravím,

potreboval by som pomôcť s formulárom.
Potrebujem, aby pri výbere položky Vlastná sa vytvoril nový input pod tým selectom.
Je to možné ?

Tu je kód toho selectu.

Kód:

                    <select style="width: 172px;" id="test" name="test">
              
              <option value="Nevybrané" selected="selected">Vyber</option>
              
              <option value="Vlastná">Vlastná</option>
              
              <option value="Test2" disabled="disabled">Test2</option>
              
              </select>

A potrebujem, aby po výbere Vlastná to vytvorilo pod tým tento imput:

Kód:

              <label for="Meno">Meno:</label></dt>
                  
                    <input class="form-input" id="Meno" name="Meno" type="text">

Ďakujem za každú pomoc

killer · Napísal **killer**: 06.08.2012 13:58

Ak to nebudeš najprv odosielať na server, v PHP to nespravíš - šlo by to v javascripte: Na select naviazať funkciu onChange a podľa hodnoty value vybraného selectu (options[element.selectedIndex].value) rozhodnúť v podmienke, či sa input zobrazí/odošle, alebo nie.

Presunuté do javascriptu.

Vojko · Napísal autor témy **Vojko**: 06.08.2012 14:07

No ja to odosielam na mail, čiže cez funckiu mail().
Takže to by nešlo ?

killer · Napísal **killer**: 06.08.2012 15:12

Spracovať to môžeš v PHP (po odoslaní formulára), akurát pokiaľ máš formulár v .html súbore, musíš pridať do <form> tagu časť action="tvoj_php_subor.php", kde prebehne spracovanie, ošetrenie vstupov a odoslanie cez funkciu mail() - ak máš formulár v php súbore, bez určenia action sa vráti obsah formulára do aktuálneho php súboru.
Teraz ide o to, zobraziť a odoslať input Meno iba ak je v select-e test vybratá možnosť Vlastné.
Tu sú dve javascript funkcie: (túto časť kódu vlož do <head></head> súboru s formulárom)

Kód:

<script type="text/javascript">
function getSelectValue(id){
   var element = document.getElementById(id);
   var str = element.options[element.selectedIndex].value;
   var meno = document.getElementById('Meno');
   if(str == "Vlastná"){
      if (meno.style.display=="none"){ 
         meno.style.display="block"; 
      }
   } else {
      meno.style.display="none";
   }
}
function control(){
   if(Meno.style.display=="none"){
      document.test1.Meno.disabled="true";
   }
}
</script>

Funkcia getSelectValue vyberie value vybraného selectu, ak je vybraná možnosť == "Vlastná", nastaví elementu s id('Meno') [to je ten dodatočne zobrazený input] display="block" (input bude zobrazený). Inak nastaví display="none", takže input nebude zobrazený. To by bolo ku riešeniu zobrazenia vstupu len pri výbere "Vlastná", teraz ešte zabezpečiť, aby sa vstup "Meno" odoslal iba ak je vybraná možnosť "Vlastná" zo select-u a na to slúži funkcia control, ktorá je naviazaná na onClick submit button-u a po odoslaní skontroluje, či je nastavený style="none". Ak áno, doplní do vstupu "Meno" disabled="true" a tým obmedzí odoslanie tohto vstupu (inak by bol normálne odoslaný, aj keď prázdny). V opačnom prípade je vstup "Meno" odoslaný spolu s formulárom.

Teraz html kód formuláru:

Kód:

<form name="test1" id="test1" action="tvoj_php_subor.php" method="get">
<select style="width: 172px;" onchange="getSelectValue('test')" id="test" name="test"> 
   <option value="Nevybrané" selected="selected">Vyber</option> 
   <option value="Vlastná">Vlastná</option> 
   <option value="Test2" disabled="disabled">Test2</option> 
</select>
<input style="display:none;" class="form-input" id="Meno" name="Meno" type="text">
<br /><input type="submit" value="odoslať" onclick='control();' />
</form>

Tu si nastav vlastný .php súbor, ktorý formulár spracuje (namiesto tvoj_php_subor.php) a metódu spracovania (method="get", alebo method="post") podľa toho, ako chceš v .php súbore ku hodnotám z formulára pristupovať ($_GET['premenna'], alebo $_POST['premenna']) a či potrebuješ vstupy odosielať v adrese (get), alebo nie (post).
Ak budeš meniť id, alebo name niektorého vstupu, treba podľa toho upraviť aj javascript funkcie.

Vojko · Napísal autor témy **Vojko**: 06.08.2012 16:03

Ďakujem veľmi pekne za pomoc, no nejak to nejde.
Po výbere v selecte "Vlastná" sa nič nestane.

killer · Napísal **killer**: 06.08.2012 16:08

Robil si nejaké zmeny v kóde z môjho príspevku? Daj sem celý zdroják tej stránky s formulárom.
Skús vložiť do nového súboru tento kód:

Kód:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test()
{
alert("TEST!");
}
</script>
</head>
<body>

<input type="button" onclick="test()" value="test" />

</body>
</html>

A otvor ho v prehliadači. Po stlačení test button-u by ti mal zobraziť hlášku TEST! Funguje to?

Vojko · Napísal autor témy **Vojko**: 06.08.2012 17:09

Funguje ten TEST.
Alé ja potrebujem to, že vo formulári hneď po označení v selecte Vlastná sa mi hneď pridá ďalší input, nie až po stlačení submit tlačidla.

killer · Napísal **killer**: 06.08.2012 17:27

Presne tak to aj funguje, len som chcel vedieť, či náhodou nemáš zakázaný javascript. Vyskúšaj toto, je to kód z druhého príspevku a mne to normálne funguje.

Vojko · Napísal autor témy **Vojko**: 06.08.2012 17:45

Oh, trošku epic fail som spravil

Ďakujem veľmi pekne za pomoc.
Ešte keby som ťa mohol obťažovať, dá sa to nejak prepojiť s labelom ?
Pretože momentálne mám pod tým selectom napísané Test: a žiadny imput, až keď vyberiem Vlastná

Ale ďakujem veľmi pekne

killer · Napísal **killer**: 06.08.2012 17:59

Samozrejme že sa dá, priznám sa, na ten label som trochu zabudol :oops:

ale stačí doplniť do label tagu

Kód:

a javascript funkciu getSelectValue uprav na túto (funkciu control upravovať nemusíš)

Kód:

function getSelectValue(id){
   var element = document.getElementById(id);
   var str = element.options[element.selectedIndex].value;
   var meno = document.getElementById('Meno');
   var label = document.getElementById('label'); // doplnené
   if(str == "Vlastná"){
      if (meno.style.display=="none"){ 
         meno.style.display="block";
         label.style.display="block"; // doplnené
      }
   } else {
      meno.style.display="none";
      label.style.display="none"; // doplnené
   }
}

resp. stačí, ak doplníš riadky označené ako doplnené.
A nezabudni si pred odoslaním mailu vstupné premenné ošetriť.

Vojko · Napísal autor témy **Vojko**: 06.08.2012 19:17

Výborne

Ďakujem ti ešte raz veľmi pekne

Prejem príjemný zvyšok večera.
Môžete locknúť

// pridané po 15 minútach od posledného príspevku

Ááá ešte prosím ťa tie podmienky mám dopísať ako ?
Samozrejme mám podmienky k ostatným imputom napísané, ale pokiaľ uživ. nevyberie Vlastná tak nemôže vyplniť ten input, tak ako to tam mám zapísať ?

Ďakujem

killer · Napísal **killer**: 06.08.2012 19:24

Asi celkom nerozumiem, čo potrebuješ. Môžeš to vysvetliť na nejakom príklade, živej ukážke?

Vojko · Napísal autor témy **Vojko**: 06.08.2012 19:33

Noó ja mám teraz napísané podmienky pre jednotlivé inputy, že pokiaľ nebudú vyplnené tak neodošle.
Ále keďže teraz je tu ten JavaScript, ktorý po výbere vytvorí input, ktorý chcem tiež aby mal podmienku vyplnenia, aby keby bola vybraná možnosť Vlastná tak nech tam uživateľ musí niečo napísať.

killer · Napísal **killer**: 06.08.2012 19:44

Myslíš podmienky v PHP? Akože užívateľ vyplní formulár, odošle ho a potom overuješ, či sú jednotlivé vstupy zadané? Používaš na odoslanie metódu post, alebo get?
V PHP sa to dá vyriešiť jednoducho cez kombináciu podmienok. Najprv overíš, či je zo selectu (name="test") odoslaná hodnota "Vlastná", potom v prípade zhody overíš, či je "Meno" zadané, cez strlen() funkciu v PHP, takže nejak takto:

Pre metódu POST

Kód:

...
if($_POST['test'] == "Vlastná"){
   if(strlen($_POST['Meno'])>0){
      // Vybraný select: Vlastná && Dĺžka vstupného poľa "Meno" dlhšia, ako 0 znakov - úspech
   } else {
      // Vybraný select: Vlastná && Dĺžka vstupného poľa "Meno" == 0 znakov - chyba, nevyplnené vlastné "Meno"
   }
} else {
   // Vybraný select nieje "Vlastná" && Dĺžka vstupného poľa nás teda nezaujma
}
...

Pre metódu GET

Kód:

...
if($_GET['test'] == "Vlastná"){
   if(strlen($_GET['Meno'])>0){
      // Vybraný select: Vlastná && Dĺžka vstupného poľa "Meno" dlhšia, ako 0 znakov - úspech
   } else {
      // Vybraný select: Vlastná && Dĺžka vstupného poľa "Meno" == 0 znakov - chyba, nevyplnené vlastné "Meno"
   }
} else {
   // Vybraný select nieje "Vlastná" && Dĺžka vstupného poľa nás teda nezaujma
}
...

Výpis chýb si nahraď za komentáre, prípadne to nejak skombinuj s podmienkami ostatných vstupov.

Vojko · Napísal autor témy **Vojko**: 06.08.2012 23:51

Ďakujem ešte raz, funguje všetko perfektne

Môžete locknúť

Select script

Podobné témy