ユーザの選択に基づいて同じページに結果を出力

Question

私は、ユーザ入力を受け入れ、バックエンドのデータベースに問い合わせるHTMLページを作成しています。私はちょうどユーザーの出力を取って、クエリが同じページにどのように見えるかを表示しようとしています。 2つのラジオボタンがあります。 私はユーザーの選択肢を表示することができますが、今はラジオボタンの選択ではなく、すべてのボタンのテキストを表示しています。選択されているラジオボタンのみに基づいてテキストの表示を制限するにはどうすればよいですか？ここに私のコードがある - ここ

<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; 
} 

は、クエリが今どのように見えるかである - http://jsfiddle.net/mw6FB/104/ ありがとう！

Answer 1

これは、

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

あなたはラジオボタンで何もしていません。どのファイルが選択されているかを調べ、選択したファイルのinnerHtmlのみを割り当てます。他のものもクリアしたいかもしれません。あなたは単純なif()でこれを行うことができます。

たとえば、How to get value of selected radio button?を参照してください。

また、このフォームを実際に送信してその値を読み取ることができるようにするには、入力要素に名前を付ける必要があります。