Creating RadioButton in Front end (PHP)

问题

Good Day!

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.

I a trying below code :

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;
}

In Div:

<input type="button" name="create" value="Create New Equipment" onclick="javascript:createRadioElement();"></label><br />

It is created in my div named form_div

Please Guide

Thanks

回答1:

First Solution:

What you can do, with your current condition, is to put the needed parameters inside the function of your onclick tags.

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.

New Solution:

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

};

You can check this fiddle for an example.

The real problem:

You want to store the newly added radio buttons permanently, but you resorted first in Javascript.

Solution:

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.

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();

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.

回答2:

Are you trying to create new element with jquery or something?

There is no single line of PHP code here or mySQL there.

If you're trying to append radio button on client side, you need jquery And if you need user to enter label / check or uncheck himself, you supposely need input text and checkbox.

If it's just about appending radio button, this should works

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

Here is the result

Before Click

After Click

Your question is hard to understand though, maybe you can elaborate more.

来源：https://stackoverflow.com/questions/39696907/creating-radiobutton-in-front-end-php

标签

php