如下所示，我正在进行一项调查，我花了大部分时间让单选按钮工作，现在我遇到了一个新问题。当用户点击提交时，除了单选按钮外，如何获取要显示的文本字段和复选框。
目前，只记录并显示问题2的回复。谢谢
http://jsbin.com/zuxoqe/1/edit?html,output
HTML
<div id="container">
<div id="main" class="cf">
<div id="content">
<div id="text">
<form action="#" method="post" class="mySurvey" id="mySurveyID">
<fieldset>
<p>Personal Information:
<br>
First name: <label><input type="text" name="firstname" value=""></label>
<br>
Last name: <label><input type="text" name="lastname" value=""></label>
<br>
Gender:
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select></p>
<p>Question 1: How did you hear about us? Check ALL that apply</p>
<p>
<label><input type="checkbox" name="Q3" value="internet">Internet<label>
<label><input type="checkbox" name="Q3" value="tv">TV<label>
<label><input type="checkbox" name="Q3" value="radio">Radio<label>
<label><input type="checkbox" name="Q3" value="newspaper">Newspaper<label>
<label><input type="checkbox" name="Q3" value="mouth">Word of Mouth<label>
</p>
<p>Question 2: Overall HOW would you rate your Sales Representative?</p>
<p>
<label><input type="radio" name="ques5" value="Amazing"> Amazing</label>
<label><input type="radio" name="ques5" value="Very Good"> Very Good</label>
<label><input type="radio" name="ques5" value="Neutral"> Neutral</label>
<label><input type="radio" name="ques5" value="Fair"> Fair</label>
<label><input type="radio" name="ques5" value="Poor"> Poor</label>
</p>
<p>Question 3: What factors contributed to your purchase of this product?
<p>
<label><textarea name="Q2" rows="5" cols="60"></textarea><label>
</p>
<p><button type="button" name="getSelection">Submit</button></p>
</fieldset>
</form>
</div> <!-- end text -->
</div> <!-- end content -->
</div> <!-- end container div -->
</body>
</html>
JS
<script type="text/javascript">
// to remove from global namespace
(function() {
function getRadioSelection(form, name) {
var val;
var radios = form.elements[name];
for (var i=0, len=radios.length; i<len; i++) {
if ( radios[i].checked ) {
val = radios[i].value;
break;
}
}
return val;
}
document.forms['mySurveyID'].elements['getSelection'].onclick = function() {
alert( 'The selected radio button\'s value is: ' + getRadioSelection(this.form, 'ques5') );
};
// disable submission of all forms on this page
for (var i=0, len=document.forms.length; i<len; i++) {
document.forms[i].onsubmit = function() { return false; };
}
}());
</script>
答案 0 :(得分：1)
您无需使用自定义循环来检索选定的组合或复选框。
如果我有建议，您可以使用专为此设计的querySelector和querySelectorAll。
此外，您可能希望使用form.addEventListener("submit", callback);而不是form.onsubmit，这样您就可以为提交表单添加多个监听器，而且您不必破解按钮＆＃39; s onclick事件。
这是一个有效的例子：
// Avoid polluting global namespace.
(function() {
// Helpers
function forEach(list, callback){ return Array.prototype.forEach.call(list, callback); };
function map(list, callback){ return Array.prototype.map.call(list, callback); };
var survey = document.forms['mySurveyID'];
// Listen for submit events (need a "submit" input instead of
// "button", cf HTML).
survey.addEventListener("submit", function(eat){
// Retrieve question 1's checked inputs.
var q1CheckedInputs = survey.querySelectorAll("input[name=Q3]:checked");
// Extract inputs' values.
var q1Answers = map(q1CheckedInputs, function(inputNode){
return inputNode.value;
});
// Retrieve question 2's answer.
var q2Answer = survey.querySelector("input[name=ques5]:checked").value;
// Retrieve question 3's answer
var q3Answer = survey.querySelector("textarea[name=Q2]").value;
// Show results.
alert('Q1: "' + q1Answers.join('", "') + '\n' +
'Q2: "' + q2Answer + '\n' +
'Q3: "' + q3Answer + '"');
});
// Disable submission of all forms on this page.
forEach(document.forms, function(form){
form.addEventListener("submit", function(evt){
evt.preventDefault();
});
});
}());<!DOCTYPE html>
<body>
<div id="container">
<div id="main" class="cf">
<div id="content">
<div id="text">
<form action="#" method="post" class="mySurvey" id="mySurveyID">
<fieldset>
<p>Personal Information:
<br>
First name: <label><input type="text" name="firstname" value=""></label>
<br>
Last name: <label><input type="text" name="lastname" value=""></label>
<br>
Gender:
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select></p>
<p>Question 1: How did you hear about us? Check ALL that apply</p>
<p>
<label><input type="checkbox" name="Q3" value="internet">Internet<label>
<label><input type="checkbox" name="Q3" value="tv">TV<label>
<label><input type="checkbox" name="Q3" value="radio">Radio<label>
<label><input type="checkbox" name="Q3" value="newspaper">Newspaper<label>
<label><input type="checkbox" name="Q3" value="mouth">Word of Mouth<label>
</p>
<p>Question 2: Overall HOW would you rate your Sales Representative?</p>
<p>
<label><input type="radio" name="ques5" value="Amazing"> Amazing</label>
<label><input type="radio" name="ques5" value="Very Good"> Very Good</label>
<label><input type="radio" name="ques5" value="Neutral"> Neutral</label>
<label><input type="radio" name="ques5" value="Fair"> Fair</label>
<label><input type="radio" name="ques5" value="Poor"> Poor</label>
</p>
<p>Question 3: What factors contributed to your purchase of this product?
<p>
<label><textarea name="Q2" rows="5" cols="60"></textarea><label>
</p>
<p><button type="submit" name="getSelection">Submit</button></p>
</fieldset>
</form>
</div> <!-- end text -->
</div> <!-- end content -->
</div> <!-- end container div -->
</body>
</html>
答案 1 :(得分：0)
这可能有帮助，您只需更换表单点击事件
document.forms['mySurveyID'].elements['getSelection'].onclick = function() {
alert('The selected radio button\'s value is: ' + getRadioSelection(this.form, 'ques5') + " " + getRadioSelection(this.form, 'Q3') + " " + this.form.elements["Q2"].value);
};