Question

我正在创建一个HTML页面，它将接受用户输入并在后端查询数据库。首先，我只是尝试获取用户的输出并显示查询在同一页面上的外观。它有两个单选按钮。我能够显示用户选择，但现在它显示所有按钮的文本而不是单选按钮选择。如何仅根据所选的单选按钮限制文本显示？这是我的代码 -

<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

你没有用单选按钮做任何事情。找出哪一个被选中（如果有的话），并且只分配所选择的一个的innerHtml。您可能还想清除另一个。您可以使用简单的if()来完成此操作。

请参阅示例How to get value of selected radio button?。

此外，如果您希望能够实际提交此表单并阅读其值，则需要为输入元素命名。

Answer 2

这将有效，

＆＃13;

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

＆＃13;

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

＆＃13;

根据用户选择在同一页面上输出结果

2 个答案: