Mazhar Iqbal Rana Mazhar Iqbal Rana - 2 months ago 8
MySQL Question

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

Answer

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.

Comments