Erste Lösung:
Was Sie mit Ihrer aktuellen Bedingung tun können, ist, die erforderlichen Parameter in die Funktion Ihres onclick einzufügen Tags.
onclick="javascript:createRadioElement('new option', 'checked');"
Problem:
Aber das Problem ist, dass die neue Option fix ist, abhängig davon, was Sie im ersten Parameter fest kodieren.
Neue Lösung:
Was Sie tun können, ist, ein Textfeld direkt vor Ihrer Schaltfläche hinzuzufügen, damit Sie dem Benutzer die Möglichkeit geben, seine bevorzugte Option einzugeben.
<div id="option-div"></div> <!-- THIS IS WHERE THE NEW RADIO BUTTONS WILL BE PUT -->
<input type="text" id="new-option" placeholder="Insert New Option">
<input type="button" id="create" value="Create New Equipment">
Erstellen Sie dann ein Skript, das ein neues Optionsfeld zusammen mit dem Eingabetext des Benutzers erstellt:
var optiondiv = document.getElementById('option-div'); /* GET THE DIV ELEMENT OF WHERE WE WILL PUT THE RADIO BUTTONS */
document.getElementById('create').onclick = function () { /* WHEN CREATE NEW EQUIPMENT BUTTON IS CLICKED */
var input = document.createElement('input'), /* CREATE NEW INPUT ELEMENT */
newopt = document.getElementById('new-option').value; /* GET THE INPUT OF THE USER */
label = document.createElement('label'); /* CREATE A NEW LABEL ELEMENT */
/* IF USER DID NOT INPUT A TEXT, 'No Entered Text' WILL BE THE DEFAULT VALUE */
newopt = (newopt == '')?'No Entered Text':newopt;
/* FILL OUT THE TAGS OF THE NEW INPUT ELEMENT */
input.type = "radio";
input.setAttribute("value", newopt);
input.setAttribute("checked", true);
input.setAttribute("name", "radio-name");
/* PUT THE INPUT ELEMENT/RADIO BUTTON INSIDE THE LABEL */
label.appendChild(input);
label.innerHTML += newopt+'<br>';
/* PUT THE LABEL ELEMENT INSIDE THE option-div DIV */
optiondiv.appendChild(label);
document.getElementById('new-option').value = ''; /* RESET THE TEXT FIELD */
};
Sie können diese Geige überprüfen für ein Beispiel.
Das eigentliche Problem:
Sie möchten die neu hinzugefügten Radiobuttons dauerhaft speichern, haben aber vorher in Javascript gegriffen.
Lösung:
Um die neu hinzugefügten Optionsfelder dauerhaft zu speichern, können Sie sie in Ihrer Datenbank speichern. Sie müssen eine Datenbank strukturieren, die Ihr Formular dynamisch macht.
Erstellen Sie eine Tabelle, sagen wir radio_tb :
radio_id | name |
---------+------+
1 | opt1 |
2 | opt2 |
3 | opt3 |
Versuchen Sie dann, sie als Optionsfelder anzuzeigen:
/* ASSUMING YOU ESTABLISH YOUR CONNECTION TO $connection VARIABLE */
$stmt = $connection->prepare("SELECT radio_id, name FROM radio_tb");
$stmt->execute();
$stmt->bind_result($radioid, $name);
while($stmt->fetch()){
echo '<label><input type="radio" name="equip" value="'.$radioid.'">'.$name.'</label>';
}
$stmt->close();
Sie können das von mir bereitgestellte Skript zum Einfügen eines neuen Optionsfelds weiterhin verwenden, müssen jedoch Ajax
