在前端创建 RadioButton (PHP)答案

【问题标题】：Creating RadioButton in Front end (PHP)在前端创建 RadioButton (PHP)
【发布时间】：2017-02-03 10:43:54
【问题描述】：

美好的一天！

我想要的是我有 3 个单选按钮，最后一个按钮被点击以创建新的单选按钮，用户在其中输入标签和值并检查/取消选中自己。

我尝试了下面的代码：

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 中创建的

请指导

谢谢

【问题讨论】：

您遇到了什么错误？
无错误但未创建单选按钮
我认为您的createRadioElement() 函数正在寻找两个参数，而您的onclick="javascript:createRadioElement();" 中没有提供这些参数
@MazharIqbalRana Logan 有道理。
这是说..我想创建带有标签本身的单选按钮，但不知道如何将它放在 js 和 div 中

标签： php mysql radio-button radiobuttonlist

【解决方案1】：

第一个解决方案：

根据您目前的情况，您可以将所需的参数放入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。

解决方案：

要永久存储新添加的单选按钮，您可以将其存储在数据库中。您必须构建一个数据库，使您的表单动态化。

创建一个表，比如说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 将这些新添加的选项插入到您的数据库中。

【讨论】：

文本框在那里并带有一个按钮。当我点击按钮时，什么也没发生
@MazharIqbalRana - 你在说小提琴吗？尝试刷新页面。等待它正确加载。然后，尝试测试程序。
我提供的JSfiddle？我提供的链接？这很奇怪。我在 Chrome 和 IE 上都试过了，都可以工作。或者您是否与我提供的代码有关您的本地工作？这不适用于您的浏览器 - https://jsfiddle.net/Logan_Wayne/k3vuwf2v/?
我正在获取文本框和按钮，当我在文本框中输入 abc 之类的值时，假设单击按钮后，没有任何反应，没有添加单选按钮。我在下添加了脚本
OI 明白了。我复制了
并没有添加此处的单选按钮 :) 让我再试一次 :)

【解决方案2】：

您是否尝试使用 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>

这是结果

Before Click

After Click

你的问题很难理解，也许你可以详细说明。

【讨论】：

好吧，我能做到这一点，但问题是。它应该保留。尝试您的代码并重新加载页面。创建的将丢失..
@fadeltd - OP 使用的是标准 Javascript，而不是 Javascript 库 - jQuery。
@MazharIqbalRana 是的，该对象是在单击而不是在页面加载时创建的，因此一旦您重新加载页面，它就会消失，您实际上想要哪一个？您想在哪里输入您的标签？所以你需要输入文本？
@fadeltd 是的那么它们将如何显示或保存在数据库中？我想要它显示但不保存在数据库中