Première solution :
Ce que vous pouvez faire, avec votre état actuel, est de mettre les paramètres nécessaires dans la fonction de votre onclick balises.
onclick="javascript:createRadioElement('new option', 'checked');"
Problème :
Mais le problème est que la nouvelle option sera corrigée, en fonction de ce que vous codez en dur dans le premier paramètre.
Nouvelle solution :
Ce que vous pouvez faire, c'est ajouter une zone de texte juste avant votre bouton, afin que vous puissiez donner à l'utilisateur la possibilité de saisir son option préférée.
<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">
Ensuite, créez un script qui créera un nouveau bouton radio, ainsi que le texte d'entrée de l'utilisateur :
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 */
};
Vous pouvez vérifier ce violon pour un exemple.
Le vrai problème :
Vous souhaitez stocker les boutons radio nouvellement ajoutés de manière permanente, mais vous avez d'abord eu recours à Javascript.
Solution :
Pour stocker les boutons radio nouvellement ajoutés de manière permanente, vous pouvez le stocker dans votre base de données. Vous devez structurer une base de données qui rendra votre formulaire dynamique.
Créez une table, disons radio_tb :
radio_id | name |
---------+------+
1 | opt1 |
2 | opt2 |
3 | opt3 |
Ensuite, essayez de les afficher sous forme de boutons radio :
/* 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();
Vous pouvez continuer à utiliser le script que j'ai fourni pour insérer un nouveau bouton radio, mais vous devez utiliser Ajax pour insérer ces options nouvellement ajoutées dans votre base de données.
