Tytuł: Transfer danych z radio button do text Wiadomość wysłana przez: admin Kwiecień 27, 2016, 07:27:35 Zadanie 1. Wybór za pomocą radio button marki samochodu oraz koloru tła. Umieszczenie nazwy marki samochodu i koloru tła w polu text oraz zmiana koloru tła na zaznaczony za pomocą radio button.
<html> <head> <meta charset="UTF-8"> <script> var d=0;e=0; function kolor() { if(document.getElementById("c").checked == true) {document.body.style.backgroundColor = "red"; document.getElementById("nazkol").value="CZERWONY";}; if(document.getElementById("z").checked == true) {document.body.style.backgroundColor = "green"; document.getElementById("nazkol").value="ZIELONY";}; if(document.getElementById("m").checked == true) {document.body.style.backgroundColor = "magenta"; document.getElementById("nazkol").value="MAGENTA";}; if(document.getElementById("t").checked == true) {document.body.style.backgroundColor = "#AAFFAA"; document.getElementById("nazkol").value="TURKUSOWY";}; } function woz(E){document.getElementById("wybor").value=E;} </script> </head> <body> <font size="20"><b>Konfiguracja samochodu</b></font> <br><br> <table><td> <form style="width:200px" > <fieldset> <legend>Wybierz samochód</legend> <br> <input type="radio" name="E" id="1" value="OPEL" onclick="woz(this.value)"> OPEL <br> <input type="radio" name="E" id="2" value="FIAT" onclick="woz(this.value)"> FIAT<br> <input type="radio" name="E" id="3" value="TOYOTA" onclick="woz(this.value)"> TOYOTA <br> <input type="radio" name="E" id="4" value="MAZDA" onclick="woz(this.value)"> MAZDA <br> </fieldset> </form> <td> <td> <form style="width:200px" > <fieldset> <legend>Wybierz kolor</legend><br> <input type="radio" name="A" id="c" onclick="kolor()" > CZERWONY <br> <input type="radio" name="A" id="z" onclick="kolor()" > ZIELONY <br> <input type="radio" name="A" id="m" onclick="kolor()" > MAGENTA<br> <input type="radio" name="A" id="t" onclick="kolor()" > TURKUSOWY <br> </fieldset> </form> </td> <td> <form style="width:200px" > <fieldset> <legend>Wybrano model</legend><br> <input type="text" id="wybor" name="B" size="10"> <br><br> <input type="text" id="nazkol" name="B" size="10"> <br><br> </fieldset> </form> </td> </table> </body> </html> Tytuł: Odp: Transfer danych z radio button do text Wiadomość wysłana przez: admin Kwiecień 27, 2016, 09:15:04 Wersja z miastami i środkami transportu do wyboru.
<html> <head> <meta charset="UTF-8"> <script> var d=0;e=0; function kolor() { if(document.getElementById("au").checked == true) {document.getElementById("srodek").value="AUTOBUS";}; if(document.getElementById("poc").checked == true) {document.getElementById("srodek").value="POCIĄG";}; if(document.getElementById("sam").checked == true) {document.getElementById("srodek").value="SAMOCHÓD";}; if(document.getElementById("sl").checked == true) {document.getElementById("srodek").value="SAMOLOT";}; } function miasto(E){document.getElementById("wybor").value=E;} </script> </head> <body> <font size="10"><b>Zakup biletu</b></font> <br><br> <table><td> <form style="width:200px" > <fieldset> <legend>Dokąd jedziesz</legend> <br> <input type="radio" name="E" id="1" value="Gdańsk" onclick="miasto(this.value)"> GDAŃSK <br> <input type="radio" name="E" id="2" value="Pisz" onclick="miasto(this.value)"> PISZ<br> <input type="radio" name="E" id="3" value="Kosów Lacki" onclick="miasto(this.value)"> KOSÓW LACKI <br> <input type="radio" name="E" id="4" value="Białystok" onclick="miasto(this.value)"> BIAŁYSTOK <br> <input type="radio" name="E" id="5" value="Kraków" onclick="miasto(this.value)"> KRAKÓW <br> </fieldset> </form> </td> <td> <form style="width:200px" > <fieldset> <legend>Środek transportu</legend><br> <input type="radio" name="A" id="au" onclick="kolor()" > AUTOBUS <br> <input type="radio" name="A" id="poc" onclick="kolor()" > POCIĄG <br> <input type="radio" name="A" id="sam" onclick="kolor()" > SAMOCHÓD<br> <input type="radio" name="A" id="sl" onclick="kolor()" > SAMOLOT <br><br> </fieldset> </form> </td> <td> <form style="width:300px" > <fieldset> <legend>Warunki podróży</legend><br> Miejsce docelowe: <input type="text" id="wybor" name="B" size="10"> <br><br> Środek transportu: <input type="text" id="srodek" name="B" size="10"> <br><br><br> </fieldset> </form> </td> </table> </body> </html> Tytuł: Odp: Transfer danych z radio button do text Wiadomość wysłana przez: admin Kwiecień 27, 2016, 12:00:02 Zadanie 3. W zasadzie wszystko to samo co w poprzednim przykładzie, jednak zaznaczenie checkbox powoduje wyświetlenie tekstu w form ale bez udziału okienek tekstowych.
<html> <head> <meta charset="UTF-8"> <script> var d="ssas";e=0; function kolor() { if(document.getElementById("au").checked == true) {document.getElementById("srodek").value="AUTOBUS";}; if(document.getElementById("poc").checked == true) {document.getElementById("srodek").value="POCIĄG";}; if(document.getElementById("sam").checked == true) {document.getElementById("srodek").value="SAMOCHÓD";}; if(document.getElementById("sl").checked == true) {document.getElementById("srodek").value="SAMOLOT";}; } function miasto(E){document.getElementById("wybor").value=E;} function tekst(){location.reload(); } </script> </head> <body> <font size="10">Zakup biletu</font> <br><br> <table><td> <form style="width:200px" > <fieldset> <legend>Dokąd jedziesz</legend> <br> <input type="radio" name="E" id="1" value="Gdańsk" onclick="miasto(this.value)"> GDAŃSK <br> <input type="radio" name="E" id="2" value="Pisz" onclick="miasto(this.value)"> PISZ<br> <input type="radio" name="E" id="3" value="Kosów Lacki" onclick="miasto(this.value)"> KOSÓW LACKI <br> <input type="radio" name="E" id="4" value="Białystok" onclick="miasto(this.value)"> BIAŁYSTOK <br> <input type="radio" name="E" id="5" value="Kraków" onclick="miasto(this.value)"> KRAKÓW <br> </fieldset> </form> </td> <td> <form style="width:200px" > <fieldset> <legend>Środek transportu</legend><br> <input type="radio" name="A" id="au" onclick="kolor()" > AUTOBUS <br> <input type="radio" name="A" id="poc" onclick="kolor()" > POCIĄG <br> <input type="radio" name="A" id="sam" onclick="kolor()" > SAMOCHÓD<br> <input type="radio" name="A" id="sl" onclick="kolor()" > SAMOLOT <br> <input type="checkbox" name="B" id="ch" onclick="tekst()" > miejsce dla palących<br> </fieldset> </form> </td> <td> <form style="width:300px" id="for" > <fieldset> <legend>Warunki podróży</legend><br> Miejsce docelowe: <input type="text" id="wybor" name="B" size="10"> <br><br> Środek transportu: <input type="text" id="srodek" name="B" size="10"> <br><br> <script> if(document.getElementById("ch").checked == true) {document.writeln("Dla palących")} else {document.writeln(" Kuba chce dla niepalących");}; </script><br> </fieldset> </form> </td> </table> </body> </html> |