フロントエンドでのラジオボタンの作成（PHP）

最初の解決策：

現在の状態でできることは、必要なパラメーターを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<を使用する必要があります。 / a> 新しく追加されたオプションをデータベースに挿入します。