www.webdeveloper.com
Results 1 to 6 of 6

Thread: Need to make a textbox required if radio button is selected

Hybrid View

  1. #1
    Join Date
    May 2009
    Posts
    3

    Need to make a textbox required if radio button is selected

    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

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Lightbulb Consider this ...

    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>

  3. #3
    Join Date
    May 2009
    Posts
    3
    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?

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Question More questions ...

    Quote Originally Posted by mcooley View Post
    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?

  5. #5
    Join Date
    May 2009
    Posts
    3

    Here's the code I am going to work with...

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

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Lightbulb Consider this ...

    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles