dcsimg
www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 24

Thread: Radio Buttons with "other" Text input option

  1. #1
    Join Date
    Mar 2017
    Posts
    12

    Radio Buttons with "other" Text input option

    I have a list of 5 radio buttons, with the last radio button to select a manual entry text (an "other" option). I can't seem to get the form to work for all 5 possibilities - either it returns the radio value or the written value (currently only the written value and not any of the preset radio values). Can't get it to work for all of 5 possible returns. Here's the javascript to either select text or clear it when unselected:

    <script type= "text/javascript" >
    function HandleRadioOtherBox(grp, txt)
    {
    var x, len = grp.length;
    for (x =0; x<len; ++x)
    {
    if (grp[x].checked) break;
    }
    if (x < len && grp[x].value == txt.name)
    {
    txt.disabled = false;
    txt.select();
    txt.focus();
    }
    else
    {
    txt.value = "";
    txt.disabled = true;
    }
    return true;
    }

    window.onload = function ()
    {
    var ele = document.forms[0].elements;
    return HandleRadioOtherBox(ele['OPS'], ele['Country']);
    }
    </script>
    And here, the HTML radio button portion:

    <tr valign="top">
    <td class="style3">Country: </td>
    <input type="radio" name="OPS" value="United States" checked="checked"
    onclick="return HandleRadioOtherBox(OPS, Country)" /> United States
    <input type="radio" name="OPS" value="Canada"
    onclick="return HandleRadioOtherBox(OPS, Country)" /> Canada
    <input type="radio" name="OPS" value="England"
    onclick="return HandleRadioOtherBox(OPS, Country)" /> England
    <input type="radio" name="OPS" value="Australia"
    onclick="return HandleRadioOtherBox(OPS, Country)" /> Australia <br />
    <input type="radio" name="OPS" value="Country"
    onclick="return HandleRadioOtherBox(OPS, Country)" /> Other Country:
    <input type='text' name="Country" id="Country" maxlength='80' />
    </td>
    </tr>
    Have spent many, many hours with not much of a hole made in the cement (yet). :-) Help!

  2. #2
    Join Date
    Dec 2012
    Posts
    1,307
    Check whether this is what you require:
    Code:
        <form method="post" action="testpost.php">
            <input type="radio" name="OPS" value="United States" checked="checked"" /> United States
            <input type="radio" name="OPS" value="Canada"  /> Canada
            <input type="radio" name="OPS" value="England" /> England
            <input type="radio" name="OPS" value="Australia" /> Australia
            <br />
            <input type="radio" name="OPS" id="rbother" value="Country" /> Other Country:
            <input type='text' name="Country" id="Country" oninput="setCountry(this)" maxlength='80' />
            <input type="submit" />
        </form>
        <script type="text/javascript">
            function setCountry(ele) {
                document.getElementById("rbother").value = ele.value;
            }
        </script>
    Last edited by Sempervivum; 03-18-2017 at 07:50 PM.

  3. #3
    Join Date
    Mar 2017
    Posts
    12
    Thanks, Sempervivum. This doesn't seem to return the radio button values as is, but may prove useful as an approach.

  4. #4
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,801

    Lightbulb

    Modified from 'Sempervivum's code and added some checks for blank entries.
    Left directions in for initial version if you prefer.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> RBtn / Text selection </title>
    <!-- From: http://www.webdeveloper.com/forum/showthread.php?362569-Radio-Buttons-with-quot-other-quot-Text-input-option -->
    
    </head>
    <body>
     <form method="post" onsubmit="update()" action="javascript:noop()"> <!-- javascript:alert(result)" -->
    
      <label><input type="radio" name="OPS" value="United States" checked="checked"" /> United States</label>
      <label><input type="radio" name="OPS" value="Canada"  /> Canada</label>
      <label><input type="radio" name="OPS" value="England" /> England</label>
      <label><input type="radio" name="OPS" value="Australia" /> Australia</label>
      <br />
      <label><input type="radio" name="OPS" id="rbother" value="" /> Other Country:</label>
    <!-- could set value='Country' as a default value without a 'blank' entry check -->
      <input type='text' name="Country" id="Country" oninput="setCountry(this)" />
      <input type="submit" />
     </form>
    
    <pre id="debug"></pre>
    
    <script type="text/javascript">
      function setCountry(ele) { document.getElementById("rbother").value = ele.value; }
    
    // var result;
    // function update() { result = getRBtnName('OPS'); document.getElementById('debug').innerHTML = result; }
      function update() { document.getElementById('debug').innerHTML = getRBtnName('OPS'); // update radio button
                          if (getRBtnName('OPS') == '') { alert('Blank entry not allowed'); }
                        }
    
      function noop() { null; } // No Operation for testing purposes only
    
    function getRBtnName(GrpName) {
      var sel = document.getElementsByName(GrpName);
      var fnd = -1, str = '';
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked) { str = sel[i].value;  fnd = i; }
      }
    //  return fnd;   // return option index of selection
    // comment out next line if option index used in line above  
      return str;
    } 
    </script>
    </body>
    </html>
    Good Luck!

  5. #5
    Join Date
    Mar 2017
    Posts
    12
    Thank you JMRKER! I haven't had a chance to try this out yet (a little toasted from OCD Coding on this - running some 3 days and no luck with my sorry attempts) but will try this out tomorrow when refreshed. Funny how simple I thought "4 radio buttons and an 'other' text field" would be to code. Seems like an almost everyday situation yet I could not find _one_ basic sample online. I did post to another forum as well and received excellent code to hide the text field when the other button was not selected, but it too would not return any of the straight radio button values. I'm sending them to a PHP script to email the results of the filled form, and so far that works to get all the other fields in the form for an alumni address update page I'm trying to get up and running, but this one field and entry method is driving me nuts. Thanks again -- it is greatly appreciated!

  6. #6
    Join Date
    Dec 2012
    Posts
    1,307
    This doesn't seem to return the radio button values as is, but may prove useful as an approach.
    Then I do not understand what you intend you do. I understood you in that way: The form should submit the value of the radio button currently selected. However for the 5th one not the original value ("Country") should be submitted but the value of the text field instead. Please tell me what's wrong in this understanding.

  7. #7
    Join Date
    Mar 2017
    Posts
    12
    Apologies for the confusion, Sempervivum. Here is the current page with the sample in context with what the php script returns. The way I have it now, the php script is returning the value submitted to the variable: Country. You'll see how it takes a typed in value but none of the correct radio values; returning only what has been typed into the Other Country field.
    www.bellowsfallsalumni.org/Update.html
    Here is the php script:
    <?php
    if(isset($_POST['submit']))
    {
    $to = "name@domain.com";
    $subject = "School Alumni Contact Update";
    $fname_field = $_POST['FirstName'];
    $lname_field = $_POST['LastName'];
    $class_field = $_POST['ClassYr'];
    $addr1_field = $_POST['Address'];
    $addr2_field = $_POST['Address2'];
    $city_field = $_POST['City'];
    $state_field = $_POST['State'];
    $zip_field = $_POST['Zip'];
    $country_field = $_POST['Country'];
    $email_field = $_POST['email'];
    $phone_field = $_POST['Phone'];
    $cell_field = $_POST['Cell'];
    $msg_field = $_POST['Comments'];
    $body = "\r\nFrom: $fname_field $lname_field, Class of: $class_field\r\nAddress:\r\n $addr1_field\r\n$addr2_field \r\n$city_field, $state_field $zip_field\r\n$country_field\r\ne-Mail: $email_field\r\nPhone: $phone_field\r\nCell: $cell_field\r\nComments: $msg_field" ;
    echo nl2br("Alumni Update Data will be submitted to $to\r\nRe: $subject\r\n$body");
    }
    else
    {
    echo "blarg!";
    }
    ?>

  8. #8
    Join Date
    Dec 2012
    Posts
    1,307
    I see! You neeed to use the value of the radio button group instead of the value of the text field:
    Code:
    $country_field = $_POST['OPS'];

  9. #9
    Join Date
    Mar 2017
    Posts
    12
    Thanks again, Sempervivum!
    Unfortunately, while the radio buttons are now working, the text field isn't, as it returns "Other" for whatever is typed into the Other Country text block.

  10. #10
    Join Date
    Dec 2012
    Posts
    1,307
    Hm, I tested my script and it worked fine for me. Did you try exactly what I posted? The page you posted contains a different script.

  11. #11
    Join Date
    Mar 2017
    Posts
    12
    Yes I did. What I did was make the change to the PHP file (swap out Country and put in OPS), changed the generic email addr to mine, changed the name of the PHP file to mailer.php which I updated in the html code as well (2 locations), and left the rest of the code as was.
    I have been trying mixing around variables in the html code for name and value in the 2 lines:
    <label><input type="radio" name="OPS" value="Note: value provided at input type radio is what gets returned for 'Other Country' radio button" /> Other Country
    <input type="text" name="Country" maxlength="60" size="35" />
    And you can see what's happening there.

  12. #12
    Join Date
    Mar 2017
    Posts
    12
    I do apologize again, Sempervivum - I realize now that I had originally posted an earlier variation on the javascript routine, but then updated it with the routine that allows the text entry box to be hidden unless the Other Country radio button is selected. At this point it appears that whatever value is provided in the Other Country radio button is what gets posted instead of what is typed in there. The other radio buttons work as they should and the hiding, revealing of the box work with the Other Country radio button, but all that's left is to figure out how to set the OPS variable to the value of the text.

  13. #13
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,801

    Lightbulb

    Nothing associated with the PHP here and still guessing as to the outcome you desire
    but this modified version does hide the text until the RB is selected
    and will pass the selection in the <form> tag when it is modified from the 'test' program settings.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> RBtn / Text selection </title>
    <!-- From: http://www.webdeveloper.com/forum/showthread.php?362569-Radio-Buttons-with-quot-other-quot-Text-input-option -->
    <style type="text/css">
     .hide { display: none; }
     .show { display: inline-block; }
    </style>
    
    </head>
    <body>
     <form method="post" onsubmit="update()" action="javascript:noop()"> <!-- javascript:alert(result)" -->
    
      <label><input type="radio" name="OPS" value="United States" checked="checked"" /> United States</label>
      <label><input type="radio" name="OPS" value="Canada"  /> Canada</label>
      <label><input type="radio" name="OPS" value="England" /> England</label>
      <label><input type="radio" name="OPS" value="Australia" /> Australia</label>
      <label><input type="radio" name="OPS" id="rbother" value="" onclick="toggle('Country')" /> Other Country:</label>
    <!-- could set value='Country' as a default value without a 'blank' entry check -->
      <input class="hide" type='text' name="Country" id="Country" oninput="setCountry(this)" />
      <br />
      <input type="submit" />
     </form>
    
    <pre id="debug"></pre>
    
    <script type="text/javascript">
      function setCountry(ele) { document.getElementById("rbother").value = ele.value; }
    
    // var result;
    // function update() { result = getRBtnName('OPS'); document.getElementById('debug').innerHTML = result; }
      function update() { document.getElementById('debug').innerHTML = getRBtnName('OPS'); // update radio button
                          if (getRBtnName('OPS') == '') { alert('Blank entry not allowed'); }
                        }
    
      function noop() { null; } // No Operation for testing purposes only
    
    function toggle(IDS) {
      var cls = document.getElementById(IDS).className;
      cls = (cls == 'hide') ? 'show' : 'hide';
      document.getElementById(IDS).className = cls;
    }
    function getRBtnName(GrpName) {
      var sel = document.getElementsByName(GrpName);
      var fnd = -1, str = '';
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked) { str = sel[i].value;  fnd = i; }
      }
    //  return fnd;   // return option index of selection
    // comment out next line if option index used in line above  
      return str;
    } 
    
    </script>
    </body>
    </html>
    Good Luck!

  14. #14
    Join Date
    Dec 2012
    Posts
    1,307
    When using my script the radio button for other country needs to have the id "rbother". However I cannot find this in the HTML of the page you posted:
    HTML Code:
    <input type="radio" name="OPS" value="Note: The string value provided at input type radio is what gets returned for 'Other Country' radio button" />

  15. #15
    Join Date
    Mar 2017
    Posts
    12
    I've tried the following:
    <label><input type="radio" name="OPS" value="This exact string." /> Other Country
    <input type="text" name="" value="" maxlength="60" size="35" />
    Yields-> Correct values for first 4 radio button values
    Incorrect Other Country value: This exact string.

    <label><input type="radio" name="OPS" value="This exact string." /> Other Country
    <input type="text" name="OPS" value="" maxlength="60" size="35" />
    Yields-> Incorrect values for first 4 radio button values (blank)
    Correct Other Country value: (whatever was typed in)

    <label><input type="radio" name="" value="This exact string." /> Other Country
    <input type="text" name="OPS" value="" maxlength="60" size="35" />
    Yields-> Incorrect values for first 4 radio button values (blank)
    Correct Other Country value: (whatever was typed in)

    <label><input type="radio" name="" value="OPS" /> Other Country
    <input type="text" name="" value="" maxlength="60" size="35" />
    Yields-> When Other Coutry button selected, Does not blank any radio buttons
    Correct values for first 4 radio button values
    Incorrect Other Country value: (value of unblanked radio button)

    <label><input type="radio" name="OPS" /> Other Country
    <input type="text" name="" value="" maxlength="60" size="35" />
    Yields-> Correct values for first 4 radio button values
    Incorrect Other Country value: on

    <label><input type="radio" name="OPS" value=" " /> Other Country
    <input type="text" name="" value="" maxlength="60" size="35" />
    Yields-> Correct values for first 4 radio button values
    Incorrect Other Country value: (blank) [same if value in radio is "" instead of " "]

    Any ideas if the problem can be resolved with the right combination of values within those two lines alone?
    Is there a quick java script that will take care of returning the value as it should instead?
    Here again is the link to the form (set up as the first option listed above) and what gets returned on submit (from value of $country_field = $_POST['OPS']; in the PHP script): http://www.bellowsfallsalumni.org/Update.html

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