Първо решение:
Това, което можете да направите, с текущото си състояние, е да поставите необходимите параметри във функцията на вашия onclick тагове.
onclick="javascript:createRadioElement('new option', 'checked');"
Проблем:
Но проблемът е, че новата опция ще бъде коригирана в зависимост от това какво сте кодирали в първия параметър.
Ново решение:
Това, което можете да направите, е да добавите текстово поле точно преди вашия бутон, така че да можете да дадете възможност на потребителя да въведе предпочитаната от тях опция.
<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">
След това създайте скрипт, който ще създаде нов бутон за избор, заедно с въведения текст от потребителя:
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 */
};
Можете да проверите тази цигулка за пример.
Истинският проблем:
Искате да съхраните за постоянно новодобавените бутони за избор, но първо сте използвали Javascript.
Решение:
За да съхраните новодобавените радио бутони за постоянно, можете да ги съхраните във вашата база данни. Трябва да структурирате база данни, която ще направи вашия формуляр динамичен.
Създайте таблица, да речем radio_tb :
radio_id | name |
---------+------+
1 | opt1 |
2 | opt2 |
3 | opt3 |
След това опитайте да ги покажете като радио бутони:
/* 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();
Можете да продължите да използвате скрипта, който предоставих за вмъкване на нов бутон за избор, но трябва да използвате Ajax за да вмъкнете тези новодобавени опции във вашата база данни.
