Output results on same page based on user selection - html

Question

I am creating an HTML page which will accept user inputs and queries a database at the backend. To start off I am just trying to take user's output and display how the query will look like on the same page.
It has two radio buttons.
I am able to display the user selections, but right now its shows text for all buttons instead of the radio button selection. How can I restrict the display of text based only on the radio button which is selected? Here is my 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;
}
Here is how query looks like right now -
http://jsfiddle.net/mw6FB/104/
Thanks!

Answer 1

This will work,
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

You're not doing anything with the radio buttons. Find out which one is selected (if any), and only assign the innerHtml of the selected one. You may want to clear the other one as well. You can do this with a simple if().
See for example How to get value of selected radio button?.
Also, if you want to be able to actually submit this form and read its values, you'll want to name your input elements.