在前端(PHP)中创建RadioButton [英] Creating RadioButton in Front end (PHP)
问题描述
美好的一天!
我想要的是我有3个单选按钮,最后有一个按钮,单击该按钮可以创建新的单选按钮,用户可以在其中输入标签和值,然后自己检查/取消选中.
What I want is that I am having 3 radio buttons and a button in the end which is clicked to create new radio button where user enters label and value and check/uncheck himself.
我尝试下面的代码:
JS:
function createRadioElement( name, checked ) {
var radioInput;
try {
var radioHtml = '<input type="radio" name="' + name + '"';
if ( checked ) {
radioHtml += ' checked="checked"';
}
radioHtml += '/>';
radioInput = document.createElement(radioHtml);
} catch( err ) {
radioInput = document.createElement('input');
radioInput.setAttribute('type', 'radio');
radioInput.setAttribute('name', name);
if ( checked ) {
radioInput.setAttribute('checked', 'checked');
}
}
return radioInput;
}
部门:
<input type="button" name="create" value="Create New Equipment" onclick="javascript:createRadioElement();"></label><br />
它是在我的名为form_div的div中创建的
It is created in my div named form_div
请指导
谢谢
推荐答案
第一个解决方案:
在当前条件下,您可以做的是将所需的参数放入onclick
标记的功能内.
onclick="javascript:createRadioElement('new option', 'checked');"
问题:
但是问题在于,新选项将得到修复,具体取决于您在第一个参数中进行的硬编码.
Problem:
But the problem is that the new option will be fix, depending on what you hard-code in the first parameter.
您可以做的就是在按钮之前添加一个文本框,以便您可以让用户有机会输入他们的首选选项.
What you can do, is to add a text box right before your button, so you can give the user the chance to input their preferred option.
<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">
然后,创建一个脚本,该脚本将创建一个新的单选按钮以及用户的输入文本:
Then, create a script that will create a new radio button, along with the input text of the user:
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.
You want to store the newly added radio buttons permanently, but you resorted first in Javascript.
要永久存储新添加的单选按钮,可以将其存储在数据库中.您必须构建一个数据库,该数据库将使您的表单具有动态性.
To store the newly added radio buttons permanently, you can it store it in your database. You have to structure a database that will make your form dynamic.
创建一个表,让我们说radio_tb
:
Create a table, lets say radio_tb
:
radio_id | name |
---------+------+
1 | opt1 |
2 | opt2 |
3 | opt3 |
然后,尝试将其显示为单选按钮:
Then, try to display them as radio buttons:
/* 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 将这些新添加的选项插入数据库.
You can continue using the script I have provided for inserting new radio button, but you have to use Ajax to insert those newly added options into your database.
这篇关于在前端(PHP)中创建RadioButton的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!