首页 > 解决方案 > 我需要添加一个消息框和电子邮件文本框,并在 msgresults 标记中显示我的表单中的所有内容

问题描述

我需要添加一个消息框和电子邮件文本框,并在“msgresults”标签中显示我表单中的所有内容。

我需要添加一个消息框和电子邮件文本框。然后我需要在 MsgResults 标记中显示所有信息。单选框已经以这种方式显示。

function validateForm(){
	var name = document.getElementById("name").value;
	var age = document.getElementById("age").value;
	if (name == "" || name == null){ 
		resultsMsg("We need your name please");
	}else{
		if(age == "" || name == null || isNaN(age)){
			resultsMsg("Please enter a number for your age");
		}else{
			if(!getSkill()){
				resultsMsg("Please select the type of problem you are having.");
			}else{
				resultsMsg("Type of Problem: " + getSkill());
			}//end else
		}// end function
	}
}
		function getSkill(){
			var isChecked = false;
			var theSelection;
			var skills = document.getElementsByName('skillset');
			for (var i=0; i < skills.length; i++){
				if(skills[i].checked){
					isChecked = true;
					theSelection = skills[i].value;
					break;
				}
			}
			if(isChecked){
				return theSelection;
			}else{
				return false;
			} // end else
	} // end function
		
	function resultsMsg(s){
		var resultsBox = document.getElementById("results");
		
		resultsBox.innerHTML=s;
	} // end function
<form name="form1" id="form1" action="" method="post">
	<label>Full Name:
	  <input type="text" id="name" name="name">
	</label>
	<br> <!-- new line here -->
		<label>Your Age: &nbsp;
		<input type="text" id="age" name="age">
	</label>
	<br> <!-- new line here -->
  	<input type="radio" name="skillset" value="Technical Issues">Technical Issues</br>
	<input type="radio" name="skillset" value="Recovery Issues">Recovery Issues</br>
	<input type="radio" name="skillset" value="Hardware Issues">Hardware Issues</br>
	<input type="radio" name="skillset" value="Software Issues">Software Issues</br>
	<input type="radio" name="skillset" value="Software Crashes">Software Crashes</br>
	<input type="radio" name="skillset" value="Hardware Malfunctions">Hardware Malfunctions</br>
	<input type="radio" name="skillset" value="General Problems">General Problems</br>
<input type="button" value="Submit" onClick="validateForm();">&nbsp; &nbsp;<input type="reset" value="Clear Form">
</form>
<div id="results"></div>

标签: javascriptforms

解决方案


如果我正确理解您的目标,您希望在已经显示的“问题类型”之上将给定的名称和年龄添加到结果 div。这可以通过在validateForm函数的最后一个 else 循环中添加正确的变量来轻松实现。以下内容可能会起作用:

resultsMsg("Name: "+name+ "<br>Age: " +age+ "<br>Type of Problem: " + getSkill());

推荐阅读