 [jQuery] Dynamiczny formularz - da się ten kod zoptymalizować (skrócić)? |
  |
| [jQuery] Dynamiczny formularz - da się ten kod zoptymalizować (skrócić)? |
 15.02.2012, 22:57:46
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 26 Pomógł: 2 Dołączył: 21.05.2011 Skąd: Localhost Ostrzeżenie: (0%) 
 |
Witam,
napisałem działający dynamiczny formularz na podstawie materiałów z internetu, ale wydaje mi się że można go nieco skrócić a będzie działać tak samo (chodzi mi o kod w pliku formularz.js). index.html Kod <!DOCTYPE html> <html> <head> <title>Dynamiczny formularz</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="formularz.js"></script> </head> <body> <p>Jakiej muzyki słuchasz?</p> <a href="#" id="dodaj">Dodaj gatunek</a> <form name="formularz"></form> <p>Jakie znasz systemy operacyjne?</p> <a href="#" id="dodaj1">Dodaj system</a> <form name="formularz1"></form> <p>Imiona Twojego rodzeństwa?</p> <a href="#" id="dodaj2">Dodaj imię</a> <form name="formularz2"></form> <p>Jakie znasz przeglądarki internetowe?</p> <a href="#" id="dodaj3">Dodaj przeglądarkę</a> <form name="formularz3"></form> <br> Co preferujesz (wybierz): <input type="text" list="datalist"> <datalist id="datalist"> <option value="HTML4"> <option value="HTML5"> <option value="XHTML"> </datalist> <p>Podaj swój komentarz:</p> <textarea name="Komentarz" cols="50" rows="7">Proszę, wpisz tutaj jakiś komentarz...</textarea> <br /><br /><br /> <input type="submit" value="Wyślij formularz" /> <input type="reset" value="Wyczyść dane" /> </body> </html> formularz.js Kod $(document).ready( function() { $("#dodaj").click(function() { var new_label = $("<label>"); var new_input = $("<input>"); new_input.attr("type", "text"); var new_link = $("<a>"); new_link.attr("href", "#"); new_link.html("skasuj"); new_link.click(function() { $(this).parent("label").remove(); return false; }); new_label.append(new_input); new_label.append(new_link); $("form[name=formularz]").append(new_label); return false; }); $("#dodaj1").click(function() { var new_label = $("<label>"); var new_input = $("<input>"); new_input.attr("type", "text"); var new_link = $("<a>"); new_link.attr("href", "#"); new_link.html("skasuj"); new_link.click(function() { $(this).parent("label").remove(); return false; }); new_label.append(new_input); new_label.append(new_link); $("form[name=formularz1]").append(new_label); return false; }); $("#dodaj2").click(function() { var new_label = $("<label>"); var new_input = $("<input>"); new_input.attr("type", "text"); var new_link = $("<a>"); new_link.attr("href", "#"); new_link.html("skasuj"); new_link.click(function() { $(this).parent("label").remove(); return false; }); new_label.append(new_input); new_label.append(new_link); $("form[name=formularz2]").append(new_label); return false; }); $("#dodaj3").click(function() { var new_label = $("<label>"); var new_input = $("<input>"); new_input.attr("type", "text"); var new_link = $("<a>"); new_link.attr("href", "#"); new_link.html("skasuj"); new_link.click(function() { $(this).parent("label").remove(); return false; }); new_label.append(new_input); new_label.append(new_link); $("form[name=formularz3]").append(new_label); return false; }); }); style.css Kod label { display: block; } label a { color: #CC0000; text-decoration: none; margin-left: 5px; } label a:hover { text-decoration: underline; } PS. Jak zrobić kolorowanie składni w tych kodach wyżej? Ten post edytował adolek17 15.02.2012, 23:04:27 |
 |
 
|
|
|
Wersja Lo-Fi | Aktualny czas: 14.08.2025 - 12:26 |
