JavaScript - Formularfelder dynamisch hinzufügen?

Ich habe ein HTML-Formular. Darin soll man in eine Datenbank eine Frage mit x Antworten speichern kann. Habe folgendes als Vorlage benutzt, komme aber nicht weiter:

https://werner-zenk.de/javascript/formularfelder_dynamisch_hinzufuegen.php

Ich benötige aber neben einem Input-Feld für eine Antwort nur die Möglichkeit zur Definition, ob diese Antwort Richtig oder Falsch ist.

Habe jetzt folgendes Versucht... (Auszug für function feld_plus())

<script>
function feld_plus() {
 if (feld <= 9) {
  feld++;
 document.getElementById('dynamic_input').innerHTML = "";
  for (var counter = 1; counter <= feld; counter++) {
   var label = "Antwort " + counter;
   var inhalt = document.getElementById("antwort" + counter).value;
   document.getElementById('dynamic_input').innerHTML += "<label style=\"float: left;\">" + label + ": <input type='text' name='n_" + feld + "' value='" + inhalt + "' onInput='antwort(this.value, \"" + feld + "\")'></label><fieldset><input type='radio' id='true" + counter + "' name='statuscode' value='11'><label for='true" + counter + "'>Richtig</label> <input type='radio' id='false" + counter + "' name='statuscode' value='12'><label for='false" + counter + "'>Falsch</label></fieldset><br>";
  }
 }
}
function antwort(inhalt, feld) { document.getElementById("antwort" + feld).value = inhalt; } </script>
<a href="question_add.php"><button>Frage erstellen</button></a> <hr> <h2>Fragestellung</h2> <p>Nachfolgend die Frage eintragen...</p> <form id="question_add" action="question_action.php" method="POST" onsubmit="return confirm('Frage speichern?');"> <textarea form="question_add" name="questionText" wrap="soft" rows="2" placeholder="Wie lautet ...?" required></textarea><br> <hr> <h2>Antworten</h2> <p>Nachfolgend die Antwortmöglichkeiten angeben.</p> <p>Antworten hinzufügen <input type="button" value="-" onClick="feld_minus();"><input type="button" value="+" onClick="feld_plus();"></p>
<div id="dynamic_input"></div>
<!-- Antworten --> <input type="hidden" id="antwort1"> <input type="hidden" id="antwort2"> <input type="hidden" id="antwort3"> <input type="hidden" id="antwort4"> <input type="hidden" id="antwort5"> <input type="hidden" id="antwort6"> <input type="hidden" id="antwort7"> <input type="hidden" id="antwort8"> <input type="hidden" id="antwort9"> <input type="hidden" id="antwort10">

<hr>
<input type="submit" value="Frage speichern" >
</form>

...optisch passt dass... allerdings sind die Radio-Buttons buggy...

Definiere ist Antwort1 als richtig, und dann Antwort2 als falsch, so ist bei Antwort1 nicht mehr ausgewählt... als wenn das Fieldset nicht korrekt abgeschlossen wird.

Kennt sich damit jemand aus?

Bild zum Beitrag

1 Antwort

mastema666

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

25.11.2019, 10:29

name='statuscode'

Die Radiobuttons werden durch das gleiche "name" Attribut natürlich alle zusammengefasst, es kann also immer nur einer aktiv sein (wie das bei Radiobuttons eben so ist).

Müsste also eigentlich reichen, wenn du das "name" Attribut auch noch um den "counter" erweiterst.

XentriX5526

Beitragsersteller

25.11.2019, 10:36

WOW! ...hätte niemals gedacht, dass ich durch dieses WirrWarr an Code je eine Antwort bekomme die auch noch direkt der Lösung entspricht!!! MERCI! hat geklappt...

Ähnliche Beiträge

JavaScript - Formularfelder hinzufügen?

Guten Morgen,

ich suche einen Weg, um einem HTML-Formular ein weiteres "Paket" an Feldern hinzuzufügen.

"Paket" soll beinhalten:

<label style="float: left;">Antwort%: <input type="text" name="antwort%" </label><fieldset><input type="radio" id="true%" name="status" value="1"><label for="true%">Richtig</label> <input type="radio" id="false%" name="status" value="0"><label for="false%">Falsch</label></fieldset><br>

...dabei sollen die %-Zeichen durch einen Zähler ersetzt werden -> Neue Feld = counter++

Gibt es dafür ein einfaches(!) Skript...

Will nur einen Button zum hinzufügen... im Backend kann ich mit PHP prüfen ob von den 10 hinzugefügten Feldern auch wirklich alle ausgefüllt sind.

Wäre sehr dankbar wenn mir jemand helfen könnte

Skill:

HTML - ja

PHP - ja

JavaScript- Nein :(

...zum Beitrag

Java: Wie kann ich falsche Benutzereingaben (Strings) abfangen?

Hallo zusammen!

Ich bin gerade an meinem Programm, in dem ich einfach eine falsche Benutzereingabe abfangen und die Eingabe wiederholen möchte.

Da ich aber String-Variablen habe, kommen immer sehr komische Ergebnisse heraus.

In dem folgenden Beispiel wird halt der Scanner geöffnet, damit man eine Antwort eingeben kann. Wenn die Antwort nicht den drei möglichen Optionen (in do-while oder if) entspricht, soll "Sie können nur mi..." ausgegeben und der Scanner wieder zur erneuten Eingabe aktiviert werden. So lange, bis man eben eine von den drei Antworten eingibt.

Beispiel:

String antwort;

do {
  antwort = scan.next();

  if (antwort != "antwort1" && antwort != "antwort2" && "antwort3") {
    System.out.println("Sie können mit -antwort1-, -antwort2- oder -antwort3- antworten");
  }
}
while (antwort != "antwort1" && antwort != "antwort2" && "antwort3");

PS: Die Konsole überspringt meistens einfach den Code und macht beim nächsten weiter oder man kommt in eine "Sie können mit antw...."-Schleife, egal ob man das Richtige oder das Falsche eingibt.

Ich sitze schon seit einer Stunde an diesem Fehler und habe alles mögliche durchgelesen und probiert. Vielleicht ist es auch nur ein ganz einfacher Fehler aber ich brauch gerade echt Hilfe.

GLG

...zum Beitrag

Javascript-Fehler?

Hallo, ich habe ein Problem ich programmiere gerade einen "Vokabel-Trainer". Unteranderem brauche ich dafür Javascript, denn ich habe auch einen "Vokabel-Test" eingefügt, wo ein Deutsches Wort da steht und man das Englische Wort hinschreiben muss. Soweit funktioniert alles, aber ich möchte auch, dass "Falsch!" oder "Richtig!" da steht. Es steht aber immer nur "Falsch!" da, weil ja das gesuchte Wort in Deutsch steht und man das Englische schreiben muss. Wie übersetzt man das?

Hier der Code:

(Zur Klarstellung: "randomEnglishWord" ist Deutsch und "englishText.value" ist Englisch, und "dictionary" sind eben die Vokabeln in Deutsch und Englisch")

function nextVocab() {
    let obj_keys = Object.keys(dictionary);
    randomEnglishWord = obj_keys[Math.floor(Math.random() * obj_keys.length)];
    wort.innerHTML = `${randomEnglishWord}?`;
}

function comparezwei(){
    if (englishText.value == randomEnglishWord) {
        textzwei.innerHTML = 'Richtig!';
    } else {
        textzwei.innerHTML = 'Falsch!';
    }
    englishText.value = '';
    nextVocab();
}

...zum Beitrag

Gibt es einen weg das wider zu entschlüsseln?

ich habe auf der Seite https://obfuscator.io meinen JavaScript code verschlüsselt.

kann ich vom verschlüsselten code wieder zurück zum javascript code, wenn ja wie?

mein Code:

function be() {
    let eingabe = document.getElementById('password').value;
    if (eingabe == 'das ist gut') {
        re();
    } else {
        alert('Falsches Passwort');
    }
}

function re() {
    let feld = document.getElementById('pas');
    feld.remove();
}

function lock() {
    document.getElementById('bod').innerHTML += `<div class="pass" id="pas">
    <div class="pass-1">
        <div class="pass-2 pass-3">
            <h2>Passwort eingeben um fortzufahren</h2>
        </div>
        <div class="pass-2">
            <input type="password" id="password" placeholder="Passwort eingeben">
        </div>
        <div class="pass-2">
            <button class="pass-4" onclick="be()">Betätigen</button>
        </div>
    </div>
</div>`
}

...zum Beitrag

Javascript zu oberer Zeile springen?

Hey, ich habe ungefähr folgendes Script:

async function xy

*hier steht Script*

Blabla = watch

If watch = undefined

Problem123

Und zwar möchte ich, dass bei Problem123 wieder zum Start der function xy gesprungen wird. Wie geht das?

...zum Beitrag

JavaScript EventListener funktioniert nicht richtig?

Mein JS-Code:

'use strict'

let lines = document.getElementsByClassName("src-line");
let activeLine = -1;

for (let i1 = 0, i2 = lines.length; i1 < i2; i1++) {
  lines[i1].addEventListener("mouseover", function(){
    lines[i1].style.cursor = "text";
  });
  lines[i1].addEventListener("click", function(){
    activeLine = i1;
    console.log(activeLine);
  });
}
addEventListener("keydown", keypressed(e));

function keypressed(e) {
  if (activeLine != -1) {
    if (e.key == "Backspace") {
      console.log("Backspace");
      ediText[activeLine] = ediText[activeLine].substring(0, ediText[activeLine].length - 1);
    }
    else if (e.key == "Tab") {
      ediText[activeLine] += "&nbsp;&nbsp;&nbsp;&nbsp;";
    }
    else if (e.key == "Shift") {
      return;
    }
    else if (e.key == "Space") {
      ediText[activeLine] += "&nbsp;";
    }
    else {
      ediText[activeLine] += e.key;
    }

    console.log(e.key)
    charCompiler(ediText);
  }

  return 0;
};

Wenn ich nun auf ein Element mit der Klasse src-line klicke, wird in der Konsole immer der Listenindex angezeigt. Ich habe momentan zwei, also zeigt es immer 0 oder 1 an.

Wenn ich jetzt allerdings anfange, Buchstaben einzugeben, wird das zuletzt angeklickte Element verändert. Jedoch kann ich jetzt nicht mehr das Element wechseln, denn klicke ich jetzt auf das andere Element, wird das click-Event nicht mehr aufgerufen. D.h. activeLine wird nicht mehr geändert. Ich habe keinen Plan, warum.

Ist evtl. am Code was falsch, weil ich habe keine Ahnung warum das click-Event nach dem keydown einfach ignoriert wird, obwohl es davor ja noch ging. Btw wird auch in der Konsole beim Klicken danach nichts mehr angezeigt.

...zum Beitrag

JavaScript function beenden

Hallo zusammen,

folgende Codes:

function blabla(abbrechen) {

    if (abbrechen == "JA") {
    return;
    }

    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
    }
    
    else {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("ausgabe").innerHTML=xmlhttp.responseText;
        }
    }
    
    xmlhttp.open("GET","blablabla.php",true);
    xmlhttp.send();
    
}



setInterval(function () {blabla()}, 5000);
var abbrechen = "JA";
setTimeout(function (){blabla(abbrechen)}, 10000);

Ich verstehe leider nicht, warum meine Function "blabla" nicht nach 10 Sekunden beendet wird. Immerhin gebe ich das mit

setTimeout(function (){blabla(abbrechen)}, 10000);

doch an?!

Über eine Aufklärung wäre ich dankbar!

-> Ich möchte einfach nur, dass die obige Funktion mit dem Interval alle 5 Sekunden ausgeführt wird, aber darunter nach 10 Sekunden mit TimeOut beendet wird. Was passt dem Programm nicht?

Grüße, Hummel

...zum Beitrag

BMI Rechner Programm in Javascript

Hallo,

wisst ihr, was ich in meinem JavaScript-Code falsch gemacht habe (Es sind zwei Eingabefelder da, Gewicht in kg und Grösse in cm; dann berechnet und sagt, ob der Anwender Über- oder Untergewicht hat).

...
function Bmi()
    {
        var Gewicht = document.BmiFormular.Gewicht.value;
        var Groesse = document.BmiFormular.Groesse.value / 100;

        var BmiZahl = Gewicht / (Groesse * Groesse);

        var Was = (BmiZahl < 18,5) ? "Untergewicht" :
        "Normalgewicht";

        alert (BmiZahl + "\n" + "Sie haben " + Was);
    }
...

<form name="BmiFormular" action="">
<input type="text" name="Gewicht" value="Gewicht eingeben! (in kg)"        onClick="this.value=''" /><br />
<input type="text" name="Groesse" 
       value="Körpergrösse eingeben! (in cm)" 
       onClick="this.value=''" /><br /><br />

    <input type="button" width="60" value="BMI berechnen!" 
           onClick="Bmi()" />
  </form>

Die Variable BmiZahl erklärt sich von selbst, die Variable "Was" steht

...zum Beitrag

JavaScript/jQuery! Wie einen Loop einbinden?

Auch hier bin ich absoluter Newby!

Ich habe eine nette kleine Funktion:

--------------------------------------------------------------------------------------------------------------

$({ countNum: $('.code2').html() }).animate({ countNum: 5360 }, {

duration: 10000,

easing: 'linear',

step: function () {

$('.code2').html(Math.floor(this.countNum));

complete: function () {

$('.code2').html(this.countNum + "+");

//alert('finished');

}

});

--------------------------------------------------------------------------------------------------------------

Das funktioniert - alles supi - nun möchte ich, dass die Animation nach einem kleinen Zeitintervall erneut startet. Habe dazu über Google 'setInterval' gefunden und einen Code. Leider fehlt mir noch das Verständnis was ich wo einfügen muss.

Hier der Code von Google:

Edit: Ist der Code vielleicht falsch, javascript vs jquery???

function meineFunktion() { 
    // ... 
} 

setInterval(function() { 
    // alle 3 Sekunden ausführen 
    meineFunktion(); 
}, 3000);

Habe das so in meine Scriptdatei eingebunden:

--------------------------------------------------------------------------------------------------------------

$({ countNum: $('.code').html() }).animate({ countNum: 1295365}, {

duration: 10000,

easing: 'linear',

step: function () {

$('.code').html(Math.floor(this.countNum));

setInterval(function() {

// alle 3 Sekunden ausführen

meineFunktion();

}, 3000);

complete: function () {

$('.code').html(this.countNum + "+");

//alert('finished');

}

--------------------------------------------------------------------------------------------------------------

Ich nehme an mindestestens "meineFunktion()" ist nur ein Platzhalter, aber ich bin nicht sicher, was da vom Code rein soll.

Stört das complete eigentlich die Wiederholung oder zeigt das nur an, was passiert, wenn es fertig hochgezählt hat?

Freue mich wie immer über Antworten! :)

Aber auch über Links z.B. mit einer leicht verständlichen Übersicht der Anatomie eines Jquery Codes, damit ich zukünftig besser allgemeine Beispiele an meine anpassen kann.

Bonusfrage:

Ich würde ganz gerne zu der Zahl noch eine einfache sich drehende Grafik (Kreis, Pfeil oä) hinzufügen. Hat da jemand zufällig nen leicht verständlichen Link oä dazu?

...zum Beitrag

Javascript input zum rechnen?

Hallo,

ich habe bis hierher einen Taschenrechner gebaut. Bisher kann man folgendes tun: Man kann auf einen Button drücken und dieser Wert wird dann in einem textarea angezeigt. Nun ist es ja so, dass ich nicht einfach den value vom textarea nehmen kann und ihn einfach ausrechnen lassen kann. Deshalb meine Frage: Wie kann ich nun diesen Wert ausrechnen und anzeigen lassen? Mein bisheriger Code:

Html

<textarea name="displa" id="display" cols="40" rows="7"></textarea>
    <button value="1">1</button>
    <button value="2">2</button>
    <button value="3">3</button>
    <button value="4">4</button>
    <button value="5">5</button>
    <button value="6">6</button>
    <button value="7">7</button>
    <button value="8">8</button>
    <button value="9">9</button>
    <button value="+">+</button>
    <button value="-">-</button>
    <button value="*">*</button>
    <button value="/">/</button>
    <button onclick="summe">=</button>

Javascript

$("button").click(function() {
    const firedButtonValue = $(this).val();
    var show = $("#display").val($("#display").val() + firedButtonValue);
  });


  function summe() {
    $('#display').val() = Number(show);
  }

...zum Beitrag

Javascript "ReferenceError: Hex is not defined"?

Hallo,

ich will einen Byte-Hex-String generieren. Dazu habe ich folgenden Code:

function random_string()
{
    return Hex.encodeHexString(SecureRandom.getInstanceStrong().nextBytes(new byte[16]))
}

Aber es kommt der Fehler "ReferenceError: Hex is not defined"

Warum geht das nicht??

...zum Beitrag

Javascript verlinken funtioniert nicht?

Hallo,

Ich habe das seltsame Problem, dass ich eine Javascript Datei nicht verlinken kann. Bzw. dass der Inhalt auf der Javascript Datei nicht ausgeführt wird.

So habe ich die Datei im <head> Tag verlinkt:

Der Inhalt auf der Javascript Datei ist folgender:

"use strict"

$("#akzeptieren").click(function() {

$(".cookie").hide();

})

Wenn ich den Javascript Code allerdings in der selben HTML Datei ausführe mit

$("#akzeptieren").click(function() {

$(".cookie").hide();

})

</script>

funktioniert er.

Woran kann das liegen? Ich habe schließlich weitere Javascript Dateien verlinkt die alle funktionieren. Auch habe ich die JQuery Datei im <head> Tag verlinkt. Ich benutze den aktuellen Chrome Browser. Mit Firefox habe ich es auch schon probiert. Dort geht es auch nicht.

Als Editior verwende ich Visual-Studio-Code.

Ich bin gerade ziemlich verwirrt. Habe ich irgendwo einen Fehler gemacht?

...zum Beitrag

E-Mail Adresse bestätigen! HTML JavaScript Code?

Hallo zusammen, ich brauche einen JavaScript Code für die zwei E-Mail Adresse zu bestätigen. Wenn eine andere oder falsche mail Adresse eintippt wie oben soll eine Fehler Meldung erscheinen!

Habe zwar eine JavaScript Code, aber der geht nicht!

function check() {

if (document.forms['Check'].elements['Bestaetigungsmail'].value != document.forms['Check'].elements['Bestaetigungsmail_2'].value) {

alert("uups!");

}

else {document.forms['Check'].submit();}

}

...zum Beitrag

Visual Studio Code formatiert Javascript/React Code falsch?

Hallo! Ich habe eine neue React App gestartet und habe gerade angefangen zu coden, doch als ich das erste mal gespeichert habe, hat Visual Studio Code angefangen, die JS Files falsch zu formatieren.

Die Datei an sich ist übrigens eine beinahe unformatierte Datei die automatisch generiert wurde.

So will ich es formatiert haben:

function App() {
    return (
    <div className = "App" >
            <h1>yo</h1>
    </div >);
 }

Aber so wird es autoformatiert:

function App() {
    return ( <
        div className = "App" >
        <
        h1 > yo < /h1> < /
        div >
    );
}

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen