Primera solución:
Lo que puede hacer, con su condición actual, es poner los parámetros necesarios dentro de la función de su onclick etiquetas.
onclick="javascript:createRadioElement('new option', 'checked');"
Problema:
Pero el problema es que la nueva opción se arreglará, dependiendo de lo que codifiques en el primer parámetro.
Nueva solución:
Lo que puede hacer es agregar un cuadro de texto justo antes de su botón, para que pueda darle al usuario la oportunidad de ingresar su opción preferida.
<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">
Luego, cree un script que creará un nuevo botón de radio, junto con el texto de entrada del usuario:
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 */
};
Puedes consultar este fiddle para un ejemplo.
El verdadero problema:
Desea almacenar los botones de opción recién agregados de forma permanente, pero recurrió primero a Javascript.
Solución:
Para almacenar permanentemente los botones de radio recién agregados, puede almacenarlos en su base de datos. Tienes que estructurar una base de datos que hará que tu formulario sea dinámico.
Crea una tabla, digamos radio_tb :
radio_id | name |
---------+------+
1 | opt1 |
2 | opt2 |
3 | opt3 |
Luego, intente mostrarlos como botones de opción:
/* 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();
Puede continuar usando el script que proporcioné para insertar un nuevo botón de opción, pero debe usar Ajax para insertar esas opciones recién agregadas en su base de datos.
