Ergebnisse auf derselben Seite basierend auf Benutzerauswahl ausgeben

Question

Ich erstelle eine HTML-Seite, die Benutzereingaben akzeptiert und eine Datenbank im Backend abfragt. Um zu beginnen, versuche ich nur, die Ausgabe des Benutzers zu nehmen und anzuzeigen, wie die Abfrage auf derselben Seite aussehen wird. Es hat zwei Radiobuttons. Ich kann die Benutzerauswahl anzeigen, aber jetzt zeigt es Text für alle Schaltflächen anstelle der Optionsfeldauswahl. Wie kann ich die Anzeige von Text nur anhand des ausgewählten Optionsfelds einschränken? Hier ist mein Code -

<form id="data" method="post"> 
<input type="radio" id="Name" > Name 
<input type = "text" id="value1"> <br> 
<input type="radio" id="Last"> Lastname 
<input type = "text" id="value2"> <br> 
<input type="submit" onclick="return query()" value="Get Total"> 
<p style="font-size:80%;"> <span id='boldStuff1'> </span> <br> <span id='boldStuff2' > </span> </p> 
</form> 
    <div id="display" style="height: 50px; width: 100%;"></div> 


function query(){ 
    var a = document.forms["data"]["value1"].value; 
    var b = document.forms["data"]["value2"].value; 
    var display=document.getElementById("display") 
    document.getElementById('boldStuff1').innerHTML= " SELECT * FROM table WHERE Name = " + a ; 
    document.getElementById('boldStuff2').innerHTML= " SELECT * FROM table WHERE Last = " + b ; 
    return false; 
} 

Hier ist, wie Abfrage wie jetzt aussieht - http://jsfiddle.net/mw6FB/104/ Dank!

Answer 1

Dies funktioniert,

function query(){ 
 
    //var a = document.forms["data"]["value1"].value; 
 
    //var b = document.forms["data"]["value2"].value; 
 
    //var display=document.getElementById("display") 
 
    //document.getElementById('boldStuff1').innerHTML= " SELECT * FROM table WHERE Name = " + a ; 
 
    //document.getElementById('boldStuff2').innerHTML= " SELECT * FROM table WHERE Last = " + b ; 
 
    
 
    var nameDisplay = document.getElementById('boldStuff1'); 
 
    var lastNameDisplay = document.getElementById('boldStuff2'); 
 
    
 
    if(document.getElementById('Name').checked) { 
 
     var a = document.forms["data"]["value1"].value; 
 
     nameDisplay.innerHTML= " SELECT * FROM table WHERE Name = '" + a + "'"; 
 
     lastNameDisplay.innerHTML= ""; 
 
    } else if(document.getElementById('Last').checked) { 
 
     var b = document.forms["data"]["value2"].value; 
 
     lastNameDisplay.innerHTML= " SELECT * FROM table WHERE Last = '" + b + "'"; 
 
     nameDisplay.innerHTML= ""; 
 
    } 
 
    
 
    return false; 
 
}

<form id="data" method="post"> 
 
<input type="radio" id="Name" name="radioQuery" checked > Name 
 
<input type = "text" id="value1"> <br> 
 
<input type="radio" id="Last" name="radioQuery"> Lastname 
 
<input type = "text" id="value2"> <br> 
 
<input type="submit" onclick="return query()" value="Get Total"> 
 
<p style="font-size:80%;"> <span id='boldStuff1'> </span> <br> <span id='boldStuff2' > </span> </p> 
 
</form> 
 
    <div id="display" style="height: 50px; width: 100%;"></div>

Answer 2

Sie tun nichts mit den Radiobuttons. Finden Sie heraus, welche ausgewählt ist (falls vorhanden), und weisen Sie nur das innere HTML des ausgewählten zu. Vielleicht möchten Sie auch den anderen löschen. Sie können dies mit einem einfachen if() tun.

Siehe zum Beispiel How to get value of selected radio button?.

Wenn Sie dieses Formular auch tatsächlich einreichen und seine Werte lesen möchten, sollten Sie Ihre Eingabeelemente benennen.