www.webdeveloper.com
Results 1 to 6 of 6

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

  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
    TX
    Posts
    7,931

    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
    TX
    Posts
    7,931

    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
    TX
    Posts
    7,931

    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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.38181 seconds
  • Memory Usage 2,913KB
  • Queries Executed 15 (?)
More Information
Template Usage (34):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (2)bbcode_code
  • (1)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (6)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (6)postbit
  • (6)postbit_onlinestatus
  • (6)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (73):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates