Need to make a textbox required if radio button is selected

**mcooley** · 05-14-2009, 01:11 PM

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

**JMRKER** · 05-14-2009, 02:54 PM

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>

**mcooley** · 05-14-2009, 03:20 PM

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?

**JMRKER** · 05-14-2009, 08:51 PM

Originally Posted by mcooley

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?

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?

**mcooley** · 05-15-2009, 09:16 AM

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:


<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>

**JMRKER** · 05-15-2009, 12:52 PM

OK, try this, and if you like it ... incorporate it into your code.

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">&nbsp;</td>
<td style="WIDTH: 150px">&nbsp;</td>
<td style="WIDTH: 125px">&nbsp;</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>

You left out some code, so I had to make do with some of my own.
Note: action='' is just a test message during testing.