sql >> Database >  >> RDS >> Mysql

RadioButton in frontend maken (PHP)

Eerste oplossing:

Wat u kunt doen, met uw huidige conditie, is om de benodigde parameters in de functie van uw onclick te plaatsen. tags.

onclick="javascript:createRadioElement('new option', 'checked');"

Probleem:

Maar het probleem is dat de nieuwe optie opgelost zal zijn, afhankelijk van wat je hard codeert in de eerste parameter.

Nieuwe oplossing:

Wat u kunt doen, is een tekstvak toevoegen vlak voor uw knop, zodat u de gebruiker de kans kunt geven om zijn voorkeursoptie in te voeren.

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

Maak vervolgens een script dat een nieuw keuzerondje maakt, samen met de invoertekst van de gebruiker:

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

};

Je kunt deze viool controleren voor een voorbeeld.

Het echte probleem:

U wilt de nieuw toegevoegde keuzerondjes permanent opslaan, maar u hebt eerst Javascript gebruikt.

Oplossing:

Om de nieuw toegevoegde keuzerondjes permanent op te slaan, kunt u deze in uw database opslaan. Je moet een database structureren die je formulier dynamisch maakt.

Maak een tabel, laten we zeggen radio_tb :

radio_id | name |
---------+------+
    1    | opt1 |
    2    | opt2 |
    3    | opt3 |

Probeer ze vervolgens als keuzerondjes weer te geven:

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

Je kunt het script blijven gebruiken dat ik heb verstrekt voor het invoegen van een nieuw keuzerondje, maar je moet Ajax om die nieuw toegevoegde opties in uw database in te voegen.



  1. Databases en tabellen weergeven in PostgreSQL

  2. MySQL ONLY IN() equivalente clausule

  3. Objecten vergelijken op waarde. Deel 6:Implementatie van structuurgelijkheid

  4. MySQLi:Meerdere rijen invoegen met één voorbereide instructie