如何使用Javascript显示多个广播和文本输入的输出?

时间:2019-12-22 19:49:12

标签: javascript html css

我写了一个HTML表单,其中包含多个单选输入和几个文本框。

但是一旦单击“提交”按钮,我不知道如何使用Javascript显示输出。

我的目标是在同一页面中获得输出。

显示输出后,我想添加另一个Javascript函数,只需单击一下按钮即可复制输出。

感谢您的帮助。

<!DOCTYPE html>
<html>
<head>
	<title>Survey</title>
</head>
<body>
<label for="color"><b>Favorite color:</b></label>
<input type="radio" name="color" value="Orange" id="orange"/>
	<label for="orange">Orange</label>  
<input type="radio" name="color" value="Red" id="red"/>
  <label for="red">Red</label> 
 <input type="radio" name="color" value="Black" id="black"/>
  <label for="black">Black</label>
<input type="radio" name="color" value="Blue" id="blue"/>
  <label for="blue">blue</label>

<br>
<br>

<label for="season"><b>Season:</b></label>
<input type="radio" name="season" value="Summer" id="summer"/>
	<label for="summer">Summer</label>  
<input type="radio" name="season" value="Winter" id="winter"/>
  <label for="winter">Winter</label> 
 <input type="radio" name="season" value="Rainy" id="rainy"/>
  <label for="rainy">Rainy</label>
<br>
<br>

 <label for="rank"><b>Rank:</b></label>
<input type="radio" name="rank" value="one" id="one"/>
	<label for="one">1</label>  
<input type="radio" name="rank" value="two" id="two"/>
 	<label for="two">2</label> 
 <input type="radio" name="rank" value="three" id="three"/>
  <label for="three">3</label>
<input type="radio" name="rank" value="four" id="four"/>
  <label for="four">4</label>
<br>
<br>

<label for="firstname"><b>First Name:</b></label>
	<input type="text" name="firstname" value="" id="firstname"/>
<br>
<br>

<label for="phone"><b>Contact Phone # :</b></label>
	<input type="text" name="phone" value="NA" id="phone"/>
<br>
<br>

 	<label for="smoke"><b>Smoker :</b></label>
<input type="radio" name="smoke" value="Yes" id="yes"/>
	<label for="yes">Yes</label>  
<input type="radio" name="smoke" value="No" id="no"/>
  	<label for="no">No</label> 
<br>
<br>

<label for="comment"><b>Comments :</b></label>
  <br>
<textarea rows="6" columns="60" name="comment" value="" id="comment"/> </textarea><br>
<br>
<br>

<button onclick="getValue()">Submit</button>
<p id="result"></p>

</body>
</html>

1 个答案:

答案 0 :(得分:-1)

这应该让您开始做事

function display() {
  document.getElementById("output").innerHTML = "";
  var inputs = document.getElementsByTagName("input");

  for (i = 0; i < inputs.length; i++) {
    if ((inputs[i].type = "radio")) {
      if (inputs[i].checked)
        document.getElementById("output").innerHTML +=
          inputs[i].value ;
    }
  }
}
Programming Language: 
    <input type="radio" name="java" value="Java">Java
    <input type="radio" name="javascript" value="Javascript">Javascript 
    <input type="radio" name="other" value="Others">Others 

<div id="output"></div> 


<button type="button" onclick="display()"> 
        Submit 
    </button>