AnkP AnkP - 27 days ago 11
HTML Question

Output results on same page based on user selection

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

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>

Comments