munich2010
New member
Hallo!
Ich will mir ein kleines Umfragesystem programmieren. Es soll möglich sein eine beliebige Anzahl an Fragen und Antworten zu genieren, zu beschriften und dann in eine MYSQL Datenbank zu schreiben.
Die Ausgabe soll vorerst vernachlässigt werden (bis das dynamische erstellen) erstmal richtig funktioniert.
Meine Idee war es das ganze mit PHP zu lösen. Wirklich gute, überschaubare, Lösungen sind hiermit aber anscheind nicht möglich. Daher nun die Idee das ganze mit JavaScript zu lösen. So ein bisschen was hab ich ja davon auch schonmal gehört und mich daher mal an die Arbeit gemacht.
Nun meine Fragen: 1. warum funktioniert meine bisherige Lösung nicht & 2. wie ist es möglich nach jeder neuen Fragen den Button anzeigen zu lassen um Antworten hinzufügen zu können?
Hier meine bisherige Idee:
<html>
<head>
<script language="Javascript" type="text/javascript">
var counter = 0;
var limit = 35;
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Frage " + (counter + 1) + " <br><input type='text' size='100' name='myInputs[]'><br><br>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>
<script language="Javascript" type="text/javascript">
var counterText = 0;
var counterRadioButton = 0;
var counterCheckBox = 0;
var counterTextArea = 0;
function addAnswer(anzahl, inputType){
var newdiv = document.forms.answer;
for(var x=0; x<newdiv.elements['anzahl[]'].length; x++) {
switch(document.forms['answer'].elements['itype[]'][x].value) {
case 'text':
newdiv.innerHTML = "Entry " + (counterText + 1) + " <br><input type='text' name='myInputs[]'>";
counterText++;
break;
case 'radio':
newdiv.innerHTML = "Entry " + (counterRadioButton + 1) + " <br><input type='radio' name='myRadioButtons[]'>";
counterRadioButton++;
break;
case 'checkbox':
newdiv.innerHTML = "Entry " + (counterCheckBox + 1) + " <br><input type='checkbox' name='myCheckBoxes[]'>";
counterCheckBox++;
break;
case 'textarea':
newdiv.innerHTML = "Entry " + (counterTextArea + 1) + " <br><textarea name='myTextAreas[]' value='Hier wird die Antwort eingegeben' size='100'>type here...</textarea>";
counterTextArea++;
break;
}
}
document.getElementById(answerName).appendChild(newdiv);
}
</script>
</head>
<body>
<form method="POST">
<div id="dynamicInput">
Titel der Umfrage<br><input type="text" name="myInputs[]" size="100" class="Auswahl" id="select3">
<br>
<br>
</div>
<input type="button" value="(weitere) Frage hinzufuegen" onClick="addInput('dynamicInput');">
</form>
<form method="GET" action="url" name="answer">
Antwortmöglichkeiten:
<select>
<option value="checkbox" name="itype[]">Checkbox</option>
<option value="radio" name="itype[]">Radio Button</option>
<option value="textarea" name="itype[]">Großes Textfeld</option>
</select>
<select>
<option value="1" name="anzahl[]">1</option>
<option value="2" name="anzahl[]">2</option>
<option value="3" name="anzahl[]">3</option>
<option value="4" name="anzahl[]">4</option>
</select>
<input type="button" value="Antwortmöglichkeit(en) hinzufuegen" onClick="addAnswer('anzahl[]','inputType[]');">
</form>
</body>
</html>
Ich will mir ein kleines Umfragesystem programmieren. Es soll möglich sein eine beliebige Anzahl an Fragen und Antworten zu genieren, zu beschriften und dann in eine MYSQL Datenbank zu schreiben.
Die Ausgabe soll vorerst vernachlässigt werden (bis das dynamische erstellen) erstmal richtig funktioniert.
Meine Idee war es das ganze mit PHP zu lösen. Wirklich gute, überschaubare, Lösungen sind hiermit aber anscheind nicht möglich. Daher nun die Idee das ganze mit JavaScript zu lösen. So ein bisschen was hab ich ja davon auch schonmal gehört und mich daher mal an die Arbeit gemacht.
Nun meine Fragen: 1. warum funktioniert meine bisherige Lösung nicht & 2. wie ist es möglich nach jeder neuen Fragen den Button anzeigen zu lassen um Antworten hinzufügen zu können?
Hier meine bisherige Idee:
<html>
<head>
<script language="Javascript" type="text/javascript">
var counter = 0;
var limit = 35;
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Frage " + (counter + 1) + " <br><input type='text' size='100' name='myInputs[]'><br><br>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>
<script language="Javascript" type="text/javascript">
var counterText = 0;
var counterRadioButton = 0;
var counterCheckBox = 0;
var counterTextArea = 0;
function addAnswer(anzahl, inputType){
var newdiv = document.forms.answer;
for(var x=0; x<newdiv.elements['anzahl[]'].length; x++) {
switch(document.forms['answer'].elements['itype[]'][x].value) {
case 'text':
newdiv.innerHTML = "Entry " + (counterText + 1) + " <br><input type='text' name='myInputs[]'>";
counterText++;
break;
case 'radio':
newdiv.innerHTML = "Entry " + (counterRadioButton + 1) + " <br><input type='radio' name='myRadioButtons[]'>";
counterRadioButton++;
break;
case 'checkbox':
newdiv.innerHTML = "Entry " + (counterCheckBox + 1) + " <br><input type='checkbox' name='myCheckBoxes[]'>";
counterCheckBox++;
break;
case 'textarea':
newdiv.innerHTML = "Entry " + (counterTextArea + 1) + " <br><textarea name='myTextAreas[]' value='Hier wird die Antwort eingegeben' size='100'>type here...</textarea>";
counterTextArea++;
break;
}
}
document.getElementById(answerName).appendChild(newdiv);
}
</script>
</head>
<body>
<form method="POST">
<div id="dynamicInput">
Titel der Umfrage<br><input type="text" name="myInputs[]" size="100" class="Auswahl" id="select3">
<br>
<br>
</div>
<input type="button" value="(weitere) Frage hinzufuegen" onClick="addInput('dynamicInput');">
</form>
<form method="GET" action="url" name="answer">
Antwortmöglichkeiten:
<select>
<option value="checkbox" name="itype[]">Checkbox</option>
<option value="radio" name="itype[]">Radio Button</option>
<option value="textarea" name="itype[]">Großes Textfeld</option>
</select>
<select>
<option value="1" name="anzahl[]">1</option>
<option value="2" name="anzahl[]">2</option>
<option value="3" name="anzahl[]">3</option>
<option value="4" name="anzahl[]">4</option>
</select>
<input type="button" value="Antwortmöglichkeit(en) hinzufuegen" onClick="addAnswer('anzahl[]','inputType[]');">
</form>
</body>
</html>
Zuletzt bearbeitet:
![Junkee[]](/data/avatars/m/26/26576.jpg?1671603977){kind=avatar}
