Tạo RadioButton trong Front end (PHP)

Giải pháp đầu tiên:

Những gì bạn có thể làm, với tình trạng hiện tại của mình, là đặt các thông số cần thiết vào bên trong hàm của onclick thẻ.

onclick="javascript:createRadioElement('new option', 'checked');"

Vấn đề:

Nhưng vấn đề là tùy chọn mới sẽ được khắc phục, tùy thuộc vào những gì bạn mã hóa cứng trong tham số đầu tiên.

Giải pháp mới:

Những gì bạn có thể làm là thêm một hộp văn bản ngay trước nút của bạn, để bạn có thể cho người dùng cơ hội nhập tùy chọn ưa thích của họ.

<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">

Sau đó, tạo một tập lệnh sẽ tạo một nút radio mới, cùng với văn bản đầu vào của người dùng:

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 */

};

Bạn có thể kiểm tra fiddle này để làm ví dụ.

Vấn đề thực sự:

Bạn muốn lưu trữ vĩnh viễn các nút radio mới được thêm vào, nhưng trước tiên bạn đã sử dụng Javascript.

Giải pháp:

Để lưu trữ vĩnh viễn các nút radio mới được thêm vào, bạn có thể lưu trữ nó trong cơ sở dữ liệu của mình. Bạn phải cấu trúc một cơ sở dữ liệu để làm cho biểu mẫu của bạn động.

Tạo bảng, giả sử radio_tb :

radio_id | name |
---------+------+
    1    | opt1 |
    2    | opt2 |
    3    | opt3 |

Sau đó, cố gắng hiển thị chúng dưới dạng các nút 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();

Bạn có thể tiếp tục sử dụng tập lệnh mà tôi đã cung cấp để chèn nút radio mới, nhưng bạn phải sử dụng Ajax để chèn những tùy chọn mới được thêm vào cơ sở dữ liệu của bạn.