Printable View
Hello all. New user (and new to javascript) looking for some guidance.
I have a form with a radio button list that contains 4 selections (A,B,C and "Other"). The "Other" option has a textbox next to it that I want to make required if the "Other" option is selected from the list.
Any help would be greatly appreciated.
Thanks,
Mike
Try this:
Code:<html>
<head>
<title>RBtn Other Selection</title>
<script type="text/javascript">
function ShowSpan(IDS,flag) {
IDS += 'Other';
var sel = document.getElementById(IDS);
if (flag == true) { sel.style.display = 'inline'; }
else { sel.style.display = 'none'; }
}
/*
Validation function not coded
Process:
Look at status of each 'RBtnPick#'.
If checked, use value
If value is '', then use contents of 'RBtnPickOther#' instead
If other text value is blank, then fail validation until filled or 'other' button is NOT checked.
*/
</script>
</head>
<body>
Please choose one of the following:<br>
<input type="radio" value="A" name="RBtnPick1" onclick="ShowSpan(this.name,false)">A
<input type="radio" value="B" name="RBtnPick1" onclick="ShowSpan(this.name,false)">B
<input type="radio" value="C" name="RBtnPick1" onclick="ShowSpan(this.name,false)">C
<input type="radio" value="" name="RBtnPick1" onclick="ShowSpan(this.name,true)">Other
<span id="RBtnPick1Other" style="display:none">
Why? <input type="text" id="RBtnPickOther1" value="">
</span><p>
<input type="radio" value="A" name="RBtnPick2" onclick="ShowSpan(this.name,false)">A
<input type="radio" value="B" name="RBtnPick2" onclick="ShowSpan(this.name,false)">B
<input type="radio" value="C" name="RBtnPick2" onclick="ShowSpan(this.name,false)">C
<input type="radio" value="" name="RBtnPick2" onclick="ShowSpan(this.name,true)">Other
<span id="RBtnPick2Other" style="display:none">
Why? <input type="text" id="RBtnPickOther2" value="">
</span><p>
</body>
</html>
This may work. Not exactly as I thought, but it may do the job. If I make the input required, since the "Other" option has a null value it would fail upon submit...right?
Which 'input' are you referring to? The radio buttons or the text box?Quote:
Originally Posted by mcooley
Question: I thought you only wanted the 'Other' radio button to be
accepted if the text box has something other than a blank string.
All other cases should ignore the "Other" text information.
Has the requirements changed?
Here is the code. I apologize, the tool I am forced to use to make these forms throws in a lot of clunky code and I haven't cleaned it up yet:
<!--Begin Question 6 -->
<table class="space2" cellspacing="0" cellpadding="0" width="750" border="0">
<tbody>
<tr><td>My biggest obstacle to growth and success in 2009 is:</td></tr>
<input type="hidden" value="q132" name="qNo6">
<input type="hidden" value="radio" name="132QuestType">
<tr><td colspan="4"><input type="radio" value="1" name="q132"> Financial/Profitability<br />
<input style="HEIGHT: 20px" type="radio" value="2" name="q132"> Employee Management<br />
<input style="HEIGHT: 20px" type="radio" value="3" name="q132"> Infrastructure<br />
<input style="HEIGHT: 20px" type="radio" value="4" name="q132"> Other <---- Here is the Other radio button option. If it is selected I want to make the textbox a required input
<input style="HEIGHT: 20px" type="textbox" onchange="javascript: autocheckRadio(this,6,4) " size="25" value="" name="textBoxQ132Ans4"> <----The texbox
<br /></td></tr>
<tr><td style="WIDTH: 175px"> </td><td style="WIDTH: 150px"> </td><td style="WIDTH: 125px"> </td><td style="PADDING-RIGHT: 75px; WIDTH: 300px" nowrap="true"><input style="FLOAT: right; MARGIN-LEFT: 8px; POSITION: relative; HEIGHT: 31px" onclick="javascript: doSubmit();return false; " type="image" src="/uploadImages/SubmitButton.jpg" value="" name=""></td>
</tr>
</tbody>
</table>
<!-- END: Question 6 -->
OK, try this, and if you like it ... incorporate it into your code. :)
You left out some code, so I had to make do with some of my own.Code:<html>
<head>
<title>Required RBtn Textbox</title>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/newreply.php?do=postreply&t=209059
var QnoText = ['q132']; // add IDs here for questions with optional text input
function doSubmit() {
var ids = '';
flag = true;
for (i=0; i<QnoText.length; i++) {
CkStatus = document.getElementById(QnoText[i]).checked;
ids = QnoText[i]+'ans';
if (CkStatus && document.getElementById(ids).value == '') {
alert('Selecting this option requires a text input.');
document.getElementById(ids).focus();
flag = false;
}
}
return flag;
}
</script>
</head>
<body>
<form name="myForm" action="javascript:alert('Success')" onsubmit="return doSubmit()">
<!--Begin Question 6 -->
<table class="space2" cellspacing="0" cellpadding="0" width="750" border="0">
<tbody>
<tr>
<td colspan="4">My biggest obstacle to growth and success in 2009 is:</td></tr>
<input type="hidden" value="q132" name="qNo6">
<input type="hidden" value="radio" name="132QuestType">
<tr>
<td colspan="4"><input type="radio" value="1" name="q132"> Financial/Profitability<br />
<input style="HEIGHT: 20px" type="radio" value="2" name="q132"> Employee Management<br />
<input style="HEIGHT: 20px" type="radio" value="3" name="q132"> Infrastructure<br />
<!-- Here is the Other radio button option. If it is selected I want to make the textbox a required input -->
<input style="HEIGHT: 20px" type="radio" value="4" name="q132" id="q132"> Other
<!-- The texbox -->
<input style="HEIGHT: 20px" type="textbox" size="25" value="" name="q132ans" id="q132ans">
<br />
</td>
</tr>
<tr>
<td style="WIDTH: 175px"> </td>
<td style="WIDTH: 150px"> </td>
<td style="WIDTH: 125px"> </td>
<td style="PADDING-RIGHT: 75px; WIDTH: 300px" nowrap="true">
<!-- Don't have image for this button, so using simpler version
<input style="FLOAT: right; MARGIN-LEFT: 8px; POSITION: relative; HEIGHT: 31px"
onclick="doSubmit();return false;" type="image" src="/uploadImages/SubmitButton.jpg" value="" name="">
-->
<input type="submit" value="Submit">
</td>
</tr>
</tbody>
</table>
<!-- END: Question 6 -->
</form>
</body>
</html>
Note: action='' is just a test message during testing.
