mysql — Создание RadioButton в интерфейсе (PHP)

Question

mysql — Создание RadioButton в интерфейсе (PHP)

Хорошего дня!

Что я хочу, так это то, что у меня есть 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;
}

В Div:

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

Он создан в моем div с именем form_div

Пожалуйста, руководство

Спасибо

1

mysql php radio-button radiobuttonlist

Решение

Другие решения

Вы пытаетесь создать новый элемент с 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>

Вот результат

Перед кликом

После клика

Ваш вопрос трудно понять, хотя, может быть, вы можете уточнить подробнее.

1

Источник

Accepted Answer

Первое решение:

Что вы можете сделать, с вашим текущим состоянием, это поместить необходимые параметры в функцию вашего 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 */

};

Вы можете проверить это играть на скрипке для примера.

Настоящая проблема:

Вы хотите сохранить вновь добавленные радиокнопки постоянно, но сначала вы использовали 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 чтобы вставить эти новые опции в вашу базу данных.

1