点击button后，文本框显示刚才用户所选的信息

Question

我希望能够实现这样的功能：
1) 用户输入name(文本框)：Susan
2) 用户选择一个level(radio button): Level 1
3) 用户点击按钮Submit
4) 显示内容“Susan level 1”到文本框以下是我的代码，但是有问题，在这里请教各位高手，谢谢！！<script  language=javascript>
function displayPayload(){
var name = document.getElementById("name").value;
var level= document.getElementById("level").value;
        
        var displayValue = name + level; document.getElementById("displaylevel").value= displayValue; 
}
</script>
<form name="qform" method="post" action="page.jsp">
Name: <input name="name" type="text" id="name" tabindex="1">
<br/>
<input type="radio" id="level" name="level" value="level 1" checked/> Level is 1
<input type="radio" id="level" name="level" value="level 2"/> Level is 2
<input type="radio" id="level" name="level" value="level 3"/> Level is 3
<br/>
<input type="button" name="Submit" value="Submit" onsubmit="displayUserLevel()">
<input type="text" id="displaylevel" name="displaylevel"  value="">
</form>

Answer 1

<input type="radio" id="level" name="level" value="level 1" checked/> Level is 1
<input type="radio" id="level" name="level" value="level 2"/> Level is 2
<input type="radio" id="level" name="level" value="level 3"/> Level is 3
同一个页面里相同的ID只能出现一次，像这种radio,checkbox之类的，只需要定义name就行了 
<input type="radio"  name="level" value="level 1" checked/> Level is 1
<input type="radio"  name="level" value="level 2"/> Level is 2
<input type="radio"  name="level" value="level 3"/> Level is 3要获取选取的是哪个。用document.getElementsByName来获取他们的值，然后for循环去判断哪个的checked==true,然后获取那个的值。

Answer 2

<script language=javascript>
function displayPayload(){
var name = document.getElementById("name").value;
var level = document.getElementsByName("level");
var displayValue = "";
for(var i=0;i<level.length;i++){    
    if(level[i].checked){
     displayValue = name + " " + level[i].value;
     break;
    }
}    
  document.getElementById("displaylevel").value= displayValue;  
}
</script>
<form name="qform" method="post" action="page.jsp">
Name: <input name="name" type="text" id="name" tabindex="1">
<br/>
<input type="radio" id="level" name="level" value="level 1" checked/> Level is 1
<input type="radio" id="level" name="level" value="level 2"/> Level is 2
<input type="radio" id="level" name="level" value="level 3"/> Level is 3
<br/>
<input type="button" name="Submit" value="Submit" onclick="displayPayload()">
<input type="text" id="displaylevel" name="displaylevel" value="">
</form>

Answer 3

主要是判断level是否选中，然后追加到显示数据的地方

Answer 4

var displayValue = name +"" + level;