*gelöst* Frage zu Problem bei Javascript +- Sponsor-Board.de (https://www.sponsor-board.de) +-- Forum: Webmaster (/forumdisplay.php?fid=44) +--- Forum: Script-Check (/forumdisplay.php?fid=91) +--- Thema: *gelöst* Frage zu Problem bei Javascript (/showthread.php?tid=51163) |
*gelöst* Frage zu Problem bei Javascript - VarmintLP - 29.09.2014 13:25 Guten Tag liebe Community, Vor kurzem habe ich die Aufgabe bekommen einen Pizza Webshop (nur eine simple Version) zu erstellen. Ich bin jetzt bei der Abfrage der angaben. Ich hab bereits mehrere Foren durchsucht und keine funktionierenden Ergebnis gefunden. Leider habe ich auch keine isset() funktion gefunden, die unter Javascript funktioniert. Außerdem würde ich lieber mit PHP arbeiten, aber die Aufgabe sagt ausdrücklich nur Javascript. Allerdings habe ich ein Problem. Man kann zwischen 4 Pizzas auswählen. Zitat: <input type="radio" name="Pizza" value="Tonno" required>Tonno (Thunfisch, Zwiebel)<br>
<input type="radio" name="Pizza" value="Quattro" required>Quattro (Salami, Schinken)<br> <input type="radio" name="Pizza" value="Italia" required>Italia (Schinken, Artischoke)<br> <input type="radio" name="Pizza" value="Individuelle" required>Individuelle Zusammenstellung<br>
Zitat: <input type="checkbox" name="Belag1" value="Salami">Salami<br>
<input type="checkbox" name="Belag2" value="Schinken">Schinken<br> <input type="checkbox" name="Belag3" value="Champignon">Champignon<br> <input type="checkbox" name="Belag4" value="Käse">Käse<br>
Zitat: var Belag1 = document.getElementsByName("Belag1")[0].value;
Zitat: if (document.getElementsByName("Belag1").checked)
{ alert("Checked"); }
RE: Frage zu Problem bei Javascript - Aaron - 29.09.2014 14:01 [Link: Registrierung erforderlich] Natürlich musst du das ganze noch irgendwie auslösen/triggern - z.b. inline mit onclick() Steht aber auch auf der von mir verlinkten Seite. RE: Frage zu Problem bei Javascript - VarmintLP - 29.09.2014 14:10 Aaron schrieb: http://stackoverflow.com/questions/9887360/check-if-checkbox-is-checked-javascript
Natürlich musst du das ganze noch irgendwie auslösen/triggern - z.b. inline mit onclick() Steht aber auch auf der von mir verlinkten Seite.
Zitat: <!DOCTYPE html>
<html> <head> <meta charset="ISO-8859"> <title>Pizza Service</title> <link rel="stylesheet" type="text/css" href="Layout.css"> </head> <form action="Pizzashop.html" method="get"> <script> function Bestellung() { var Size = document.getElementsByName("Size")[0].value; var Pizza = document.getElementsByName("Pizza")[0].value; var Belag1 = document.getElementsByName("Belag1")[0].value; if (Pizza == "Individuelle") { var zusatz =""; //with(document.lol) // { // for (var) // } if (document.getElementsByName("Belag1").checked) { alert("Checked"); } else { var Check1 = 0; alert (Check1); } } var Belag2 = document.getElementsByName("Belag2")[0].value; var Belag3 = document.getElementsByName("Belag3")[0].value; var Belag4 = document.getElementsByName("Belag4")[0].value; var Name = document.getElementsByName("Name")[0].value; var Vorname = document.getElementsByName("Vorname")[0].value; var Straße = document.getElementsByName("Straße")[0].value; var PLZ = document.getElementsByName("PLZ")[0].value; var Ort = document.getElementsByName("Ort")[0].value; alert(Belag1); alert(Size); if (Belag2 == 1) { window.alert("Sie haben nicht sämtliche Angaben ausgefüllt!"); } else if (Belag1 == 1) { window.alert("Sie haben keine Zutat ausgewählt!"); } else { window.alert("Hallo Frau/Herr, \n\n"+Vorname+" "+Name+"\n"+Straße+"\n"+PLZ+" "+Ort+"\n\nSie haben folgende Pizza gewählt:\n\nGröße: "+Size+"\nArt der Pizza: "+Pizza+""); } } </script> <body> <h3>WWW-Pizza Service</h3> <p> <u>Bestellung:</u> <table border="0"> <tr bgcolor = 'skyblue'> <td> Größe </td> <td> <input type="radio" name="Size" value="klein (20 cm)" required>klein (20 cm)<br> <input type="radio" name="Size" value="mittel (24 cm)" required>mittel (24 cm)<br> <input type="radio" name="Size" value="groß (28 cm)" required>groß (28 cm)<br> </td> </tr> <tr bgcolor = 'lightgreen'> <td> Art der Pizza </td> <td> <input type="radio" name="Pizza" value="Tonno" required>Tonno (Thunfisch, Zwiebel)<br> <input type="radio" name="Pizza" value="Quattro" required>Quattro (Salami, Schinken)<br> <input type="radio" name="Pizza" value="Italia" required>Italia (Schinken, Artischoke)<br> </td> </tr> <tr bgcolor = 'lightblue'> <td> </td> <td> <input type="radio" name="Pizza" value="Individuelle" required>Individuelle Zusammenstellung<br> <input type="checkbox" name="Belag1" value="Salami">Salami<br> <input type="checkbox" name="Belag2" value="Schinken">Schinken<br> <input type="checkbox" name="Belag3" value="Champignon">Champignon<br> <input type="checkbox" name="Belag4" value="Käse">Käse<br> </td> </tr> <tr bgcolor = 'lightyellow'> <td> Name, Vorname<br> Straße<br> PLZ, Ort </td> <td> <input type="Text" name="Name" required><input type="Text" name="Vorname" required><br> <input type="Text" name="Straße" required><br> <input type="Text" name="PLZ" required><input type="Text" name="Ort" required><br> </td> </tr> </table> <button onclick="Bestellung()">Abschicken</button><button type="reset" value="Reset">Zurücksetzen</button> </p> </body> </form> </html>
RE: Frage zu Problem bei Javascript - DebianDEV - 29.09.2014 14:11 Hi, 1: -> Pizzen - nicht Pizzas ..... 2: -> onchange Eventhandler 3: Musterlösung für deine bereits umgesetzte Variante Code: if(document.getElementsByName("Belag1")[0].checked) {
RE: Frage zu Problem bei Javascript - Phinitris - 29.09.2014 14:20 Hey, hab dir gerade auch mal was auf die schnelle gebastelt ;D Wie Nico schon sagte, am besten per onChange Funktion machen. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
RE: Frage zu Problem bei Javascript - Aaron - 29.09.2014 14:27 Wo steht denn was von jQuery in dem von mir geposteten Link? RE: Frage zu Problem bei Javascript - VarmintLP - 29.09.2014 14:38 Phinitris schrieb: Hey,
hab dir gerade auch mal was auf die schnelle gebastelt ;D Wie Nico schon sagte, am besten per onChange Funktion machen. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
Ich blick da irgendwie nicht ganz durch @,@ Sorry
RE: Frage zu Problem bei Javascript - DebianDEV - 29.09.2014 14:39 Dann nimm doch dieses hier: Code: if(document.getElementsByName("Belag1")[0].checked) {
RE: Frage zu Problem bei Javascript - VarmintLP - 29.09.2014 14:46 CreativeDEV.de schrieb: Dann nimm doch dieses hier:
Code: if(document.getElementsByName("Belag1")[0].checked) {
RE: Frage zu Problem bei Javascript - sic_ - 29.09.2014 18:31 Zitat: Jetzt fällt mir asuf, dass egal was ich auswähle Size und Pizza sind immer klein und Tonno ^^'
Hab aktuell echt ein kleines Hindernis in meinem Denkapparat
Poste doch mal den aktuellen Stand.
RE: Frage zu Problem bei Javascript - VarmintLP - 30.09.2014 09:55 Sorry, dass ich dich habe warten lassen Zitat: <!DOCTYPE html>
<html> <head> <meta charset="ISO-8859"> <title>Pizza Service</title> <link rel="stylesheet" type="text/css" href="Layout.css"> </head> <form action="Pizzashop.html" method="get"> <script> function Bestellung() { var Size = document.getElementsByName("Size")[0].value; var Pizza = document.getElementsByName("Pizza")[0].value; if (Pizza == "Individuelle") { if(document.getElementsByName("Belag1")[0].checked) { var Belag1 = document.getElementsByName("Belag1")[0].value; } else { var Belag1 = ""; } if(document.getElementsByName("Belag2")[0].checked) { var Belag2 = document.getElementsByName("Belag2")[0].value; } else { var Belag2 = ""; } if(document.getElementsByName("Belag3")[0].checked) { var Belag3 = document.getElementsByName("Belag3")[0].value; } else { var Belag3 = ""; } if(document.getElementsByName("Belag4")[0].checked) { var Belag4 = document.getElementsByName("Belag4")[0].value; } else { var Belag4 = ""; } } var Name = document.getElementsByName("Name")[0].value; var Vorname = document.getElementsByName("Vorname")[0].value; var Straße = document.getElementsByName("Straße")[0].value; var PLZ = document.getElementsByName("PLZ")[0].value; var Ort = document.getElementsByName("Ort")[0].value; if (Vorname == "" ) if (Pizza == "Individuelle") { window.alert("Hallo Frau/Herr, \n\n"+Vorname+" "+Name+"\n"+Straße+"\n"+PLZ+" "+Ort+"\n\nSie haben folgende Pizza gewählt:\n\nGröße: "+Size+"\nArt der Pizza: Individuelle \nBelag: "+Belag1+" "+Belag2+" "+Belag3+" "+Belag4+""); } else { window.alert("Hallo Frau/Herr, \n\n"+Vorname+" "+Name+"\n"+Straße+"\n"+PLZ+" "+Ort+"\n\nSie haben folgende Pizza gewählt:\n\nGröße: "+Size+"\nArt der Pizza: "+Pizza+""); } } </script> <body> <h3>WWW-Pizza Service</h3> <p> <u>Bestellung:</u> <table border="0"> <tr bgcolor = 'skyblue'> <td> Größe </td> <td> <input type="radio" name="Size" value="klein (20 cm)">klein (20 cm)<br> <input type="radio" name="Size" value="mittel (24 cm)" checked>mittel (24 cm)<br> <input type="radio" name="Size" value="groß (28 cm)">groß (28 cm)<br> </td> </tr> <tr bgcolor = 'lightgreen'> <td> Art der Pizza </td> <td> <input type="radio" name="Pizza" value="Tonno">Tonno (Thunfisch, Zwiebel)<br> <input type="radio" name="Pizza" value="Quattro" checked>Quattro (Salami, Schinken)<br> <input type="radio" name="Pizza" value="Italia">Italia (Schinken, Artischoke)<br> </td> </tr> <tr bgcolor = 'lightblue'> <td> </td> <td> <input type="radio" name="Pizza" value="Individuelle">Individuelle Zusammenstellung<br> <input type="checkbox" name="Belag1" value="Salami">Salami<br> <input type="checkbox" name="Belag2" value="Schinken">Schinken<br> <input type="checkbox" name="Belag3" value="Champignon">Champignon<br> <input type="checkbox" name="Belag4" value="Käse">Käse<br> </td> </tr> <tr bgcolor = 'lightyellow'> <td> Name, Vorname<br> Straße<br> PLZ, Ort </td> <td> <input type="Text" name="Name" required><input type="Text" name="Vorname" required><br> <input type="Text" name="Straße" required><br> <input type="Text" name="PLZ" required><input type="Text" name="Ort" required><br> </td> </tr> </table> <button onclick="Bestellung()">Abschicken</button><button type="reset" value="Reset">Zurücksetzen</button> </p> </body> </form> </html>
RE: Frage zu Problem bei Javascript - sic_ - 30.09.2014 10:03 Anstatt value-Werte wie "klein (20 cm)" Code: <input type="radio" name="Size" value="klein (20 cm)">klein (20 cm)
solltest du sowas wie 1-3 oder "k", "m", "g" nehmen. Also IDs statt Bezeichnungen. Naja für das was du vor hast ist es wahrscheinlich nicht so wichtig. Code: var Size = document.getElementsByName("Size")[0].value;
Klar kommt da "klein" bei heraus. Denn dort steht: Gib mir den Wert des Value-Attribut des ersten Elements mit dem Namen "Size". Das ist ideales Einsatzgebiet für jQuery. Code: ...
Bedeutet: Von allen Elementen mit dem Wert "Size"/"Pizza" für das Attribut name, die checked sind, gib den Wert des value-Attributs zurück.
RE: Frage zu Problem bei Javascript - VarmintLP - 30.09.2014 17:54 sic_ schrieb: Bitte sehr, hier Ihre Bestellung mit extra scharfem jQuery:
RE: Frage zu Problem bei Javascript - sic_ - 30.09.2014 18:47 ------ RE: Frage zu Problem bei Javascript - VarmintLP - 03.10.2014 08:30 Ich möchte allen nochmal danken, die mir geholfen haben. Ich habe den Pizzashop nun fertig bekommen und schreibe hier die Lösung hin, falls irgendwann irgendjemand mal das gleiche Problem hat und auf dieses Problem stoßen sollte. Zitat: <!DOCTYPE html>
<html> <head> <meta charset="ISO-8859"> <title>Pizza Service</title> <link rel="stylesheet" type="text/css" href="Layout.css"> </head> <form action="Pizzashop.html" method="get"> <script> function Bestellung() { var Size = document.getElementsByName("Size").value; var Pizza = document.getElementsByName("Pizza")[0].value; var Pizza = document.getElementsByName('Pizza'); for (var i = 0, length = Pizza.length; i < length; i++) { if (Pizza[i].checked) { var PizzaX = Pizza[i].value; break; } } var Size = document.getElementsByName('Size'); for (var i = 0, length = Size.length; i < length; i++) { if (Size[i].checked) { var SizeX = Size[i].value; break; } } //Belag1 if(document.getElementsByName("Belag1")[0].checked) { var Belag1 = "Salami"; } else { var Belag1 = ""; } //Belag2 if(document.getElementsByName("Belag2")[0].checked) { if (Belag1 == "Salami") { var Belag2 = "\n Schinken"; } else { var Belag2 = "Salami"; } } else { var Belag2 = ""; } //Belag3 if(document.getElementsByName("Belag3")[0].checked) { if (Belag1 == "Salami" || Belag2 == "Schinken") { var Belag3 = "\n Champignon"; } else { var Belag3 = "Champignon"; } } else { var Belag3 = ""; } //Belag4 if(document.getElementsByName("Belag4")[0].checked) { if (Belag1 == "Salami" || Belag2 == "Schinken" || Belag3 == "Champignon") { var Belag4 = "\n Käse"; } else { var Belag4 = "Käse"; } } else { var Belag4 = ""; } //Kundendaten var Name = document.getElementsByName("Name")[0].value; var Vorname = document.getElementsByName("Vorname")[0].value; var Straße = document.getElementsByName("Straße")[0].value; var PLZ = document.getElementsByName("PLZ")[0].value; var Ort = document.getElementsByName("Ort")[0].value; if (Vorname == "" ) if (PizzaX == "Individuelle") { window.alert("Hallo Frau/Herr, \n\n"+Vorname+" "+Name+"\n"+Straße+"\n"+PLZ+" "+Ort+"\n\nSie haben folgende Pizza gewählt:\n\nGröße: "+SizeX+"\nArt der Pizza: Individuelle \nBelag: "+Belag1+" "+Belag2+" "+Belag3+" "+Belag4+""); } else { window.alert("Hallo Frau/Herr, \n\n"+Vorname+" "+Name+"\n"+Straße+"\n"+PLZ+" "+Ort+"\n\nSie haben folgende Pizza gewählt:\n\nGröße: "+SizeX+"\nArt der Pizza: "+PizzaX+""); } } </script> <body> <h3>WWW-Pizza Service</h3> <p> <u>Bestellung:</u> <table border="0"> <tr bgcolor = 'skyblue'> <td> Größe </td> <td> <input type="radio" name="Size" value="klein (20 cm)" checked>klein (20 cm)<br> <input type="radio" name="Size" value="mittel (24 cm)">mittel (24 cm)<br> <input type="radio" name="Size" value="groß (28 cm)">groß (28 cm)<br> </td> </tr> <tr bgcolor = 'lightgreen'> <td> Art der Pizza </td> <td> <input type="radio" name="Pizza" value="Tonno" checked>Tonno (Thunfisch, Zwiebel)<br> <input type="radio" name="Pizza" value="Quattro">Quattro (Salami, Schinken)<br> <input type="radio" name="Pizza" value="Italia">Italia (Schinken, Artischoke)<br> </td> </tr> <tr bgcolor = 'lightblue'> <td> </td> <td> <input type="radio" name="Pizza" value="Individuelle">Individuelle Zusammenstellung<br> <input type="checkbox" name="Belag1" value="Salami">Salami<br> <input type="checkbox" name="Belag2" value="Schinken">Schinken<br> <input type="checkbox" name="Belag3" value="Champignon">Champignon<br> <input type="checkbox" name="Belag4" value="Käse">Käse<br> </td> </tr> <tr bgcolor = 'lightyellow'> <td> Name, Vorname<br> Straße<br> PLZ, Ort </td> <td> <input type="Text" name="Name" required><input type="Text" name="Vorname" required><br> <input type="Text" name="Straße" required><br> <input type="Text" name="PLZ" required><input type="Text" name="Ort" required><br> </td> </tr> </table> <button onclick="Bestellung()">Abschicken</button><button type="reset" value="Reset">Zurücksetzen</button> </p> </body> </form> </html>
|