在前端创建单选按钮 (PHP)
Creating RadioButton in Front end (PHP)
美好的一天!
我想要的是我有 3 个单选按钮和一个末尾的按钮,单击它可以创建新的单选按钮,用户可以在其中输入标签和值以及 check/uncheck 自己。
我正在尝试下面的代码:
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;
}
在Div中:
<input type="button" name="create" value="Create New Equipment" onclick="javascript:createRadioElement();"></label><br />
它是在我的 div 中创建的,名为 form_div
请指导
谢谢
您是否正在尝试使用 jquery 或其他方式创建新元素?
此处没有单行 PHP 代码,那里也没有 mySQL。
如果你想在客户端添加单选按钮,你需要 jquery
如果您需要用户输入标签/选中或取消选中自己,您可能需要输入文本和复选框。
如果只是附加单选按钮,这应该可行
<html>
<div id="data">
<!--THIS IS 3 YOUR 3 RADIO BUTTONS-->
<input type="radio" name="radiobutton" value="radiobutton">radiobutton</input><br />
<input type="radio" name="name" value="name">name</input><br />
<input type="radio" name="checked" value="checked">checked</input><br />
<input type="button" id="button" name="create" value="Create New Equipment">
</div>
<!--This is where you load your jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
//This is your Button Handler (if you use jquery you dont need to create a js function)
$("#button").click(function(){
var radioHtml = '<input type="radio" name="' + name + '"';
if ( $("#checked").checked ) {
radioHtml += ' checked="checked"';
}
radioHtml += '>test</name>';
//This is line where you append your code on your html on div with id data
$("#data").append(radioHtml);
});
</script>
</html>
这是结果
虽然你的问题很难理解,也许你可以详细说明一下。
第一个解决方案:
根据您目前的情况,您可以将所需的参数放入 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 */
};
您可以查看此 fiddle 作为示例。
真正的问题:
您想永久存储新添加的单选按钮,但您先在Javascript中使用了。
解决方案:
要永久存储新添加的单选按钮,您可以将其存储在您的数据库中。您必须构建一个数据库,使您的表单动态化。
创建一个 table,假设 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 将那些新添加的选项插入到您的数据库中。
美好的一天!
我想要的是我有 3 个单选按钮和一个末尾的按钮,单击它可以创建新的单选按钮,用户可以在其中输入标签和值以及 check/uncheck 自己。
我正在尝试下面的代码:
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;
}
在Div中:
<input type="button" name="create" value="Create New Equipment" onclick="javascript:createRadioElement();"></label><br />
它是在我的 div 中创建的,名为 form_div
请指导
谢谢
您是否正在尝试使用 jquery 或其他方式创建新元素?
此处没有单行 PHP 代码,那里也没有 mySQL。
如果你想在客户端添加单选按钮,你需要 jquery 如果您需要用户输入标签/选中或取消选中自己,您可能需要输入文本和复选框。
如果只是附加单选按钮,这应该可行
<html>
<div id="data">
<!--THIS IS 3 YOUR 3 RADIO BUTTONS-->
<input type="radio" name="radiobutton" value="radiobutton">radiobutton</input><br />
<input type="radio" name="name" value="name">name</input><br />
<input type="radio" name="checked" value="checked">checked</input><br />
<input type="button" id="button" name="create" value="Create New Equipment">
</div>
<!--This is where you load your jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
//This is your Button Handler (if you use jquery you dont need to create a js function)
$("#button").click(function(){
var radioHtml = '<input type="radio" name="' + name + '"';
if ( $("#checked").checked ) {
radioHtml += ' checked="checked"';
}
radioHtml += '>test</name>';
//This is line where you append your code on your html on div with id data
$("#data").append(radioHtml);
});
</script>
</html>
这是结果
虽然你的问题很难理解,也许你可以详细说明一下。
第一个解决方案:
根据您目前的情况,您可以将所需的参数放入 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 */
};
您可以查看此 fiddle 作为示例。
真正的问题:
您想永久存储新添加的单选按钮,但您先在Javascript中使用了。
解决方案:
要永久存储新添加的单选按钮,您可以将其存储在您的数据库中。您必须构建一个数据库,使您的表单动态化。
创建一个 table,假设 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 将那些新添加的选项插入到您的数据库中。