157 users online (0 members and 157 guests)  


  Results 1 to 6 of 6

Related

  1. Positioning Textbox??    Forum: HTML Forum
    Replies: 3
  2. textbox to url    Forum: Javascript Forum
    Replies: 0
  3. Web Radio    Forum: HTML Forum
    Replies: 0
  4. web radio    Forum: Javascript Forum
    Replies: 2
  5. Web Radio    Forum: HTML Forum
    Replies: 5
  1. #1
    jeagerjr's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2008
    Posts
    6

    Form with textbox in radio group

    Thanks for viewing this thread. I've searched for this solution in the forum, but could not find an exact answer. I hope someone can help me understand how this is coded.

    I want to create a form asking favorite colors.

    I have a radio button group with four buttons. Buttons 1-3 have static values. Button 4 (other) should be open for the user to add text.

    Here is the code I have

    Code:
     <form id="MyColour">
      <input type="radio" value="red" name="FavColor" checked />red<br>
      <input type="radio" value="white" name="FavColor" />white<br>
      <input type="radio" value="blue" name="FavColor" />blue<br>
      <input type="radio" value="" name="FavColor" />other 
                                          <input type="text" size="12" /><br>
                <INPUT type="submit" value="Send"> <INPUT type="reset">
     </form>
    How do I pass the value of the textbox into the value of the radio button? And how do I force the radio button to be checked if someone start typing in the text box?

    I do appreciate any advice I can get.

    Thanks in advance.

    je

  2. #2
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: Form with textbox in radio group

    What do you mean by pass??..On what approach??..would this be on client side or server side?..
    ..this is just a basic change of your code:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <script type="text/javascript">
    function setFocus()
    {
    document.getElementById('other').checked=true;
    var process = document.colorme.accept.value;
    document.colorme.FavColor[3].value = process
    }
    </script>
    </head>
    <body>
    <form name="colorme" id="MyColour">
      <input type="radio" value="red" name="FavColor" checked />red<br>
      <input type="radio" value="white" name="FavColor" />white<br>
      <input type="radio" value="blue" name="FavColor" />blue<br>
      <input type="radio" value="" name="FavColor" id="other"/>other 
    <input type="text" size="12" name="accept" onClick="setFocus()"/><br>
    <INPUT type="submit" value="Send"> <INPUT type="reset">
    <br/>
    <input type="button" value="Show Value of Radio Box" onClick="alert('This value of the radio box is: '+document.colorme.accept.value)">
     </form>
     </body>
     </html>
    See if it helps

  3. #3
    jeagerjr's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2008
    Posts
    6

    Re: Form with textbox in radio group

    Rangana,

    Thanks. Wow, that did work. It makes sense to me as well.

    However, it only solved half my problem.

    When I use your code, I can get the value of the text box to show correctly in the dialog box. But what if I want the dialog box to show the value of the active radio button (including text box when selected)?

    So if the user clicks the radio button on red, the dialog box says, "Your Favorite Color is Red"

    And if they choose Blue, the dialog box says, "Your Favorite Color is Blue"

    And if they choose "other", and key in Orange, the dialog box says, "Your Favorite Color is Orange"

    I can't figure that out.

    Thanks again for posting a reply. I sincerely appreciate the advice.

    I don't believe there is a need for PHP or any need for a server. I only want to have the value of a text box be included in the value of the radio buttons group.

    I hope I have explained myself correctly.

    Regards,

    je

  4. #4
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: Form with textbox in radio group

    Okay, you want this client side, here it goes:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <script type="text/javascript">
    function setFocus()
    {
    document.colorme.FavColor[3].checked=true;
    }
    function red()
    {
    document.getElementById('answer').innerHTML = 'Your Favorite Color is <b>Red</b>';
    }
    function white()
    {
    document.getElementById('answer').innerHTML = 'Your Favorite Color is <b>White</b>';
    }
    function blue()
    {
    document.getElementById('answer').innerHTML = 'Your Favorite Color is <b>Blue</b>';
    }
    function other()
    {
    var concatenate = document.colorme.accept.value;
    document.getElementById('answer').innerHTML = 'Your Favorite Color is <b>'+concatenate+'</b>';
    }
    </script>
    <style type="text/css">
    html,body{padding:0;margin:10px; auto;font-family:Tahoma;font-size:10pt;}
    #answer
    {
    border:1px solid #222;
    width:300px;
    height:100px;
    margin:10px auto;
    padding:10px;
    }
    </style>
    </head>
    <body>
    <form name="colorme" id="MyColour">
      <input type="radio" value="red" name="FavColor" onClick="red()" />red<br/>
      <input type="radio" value="white" name="FavColor" onClick="white()" />white<br/>
      <input type="radio" value="blue" name="FavColor" onClick="blue()" />blue<br/>
      <input type="radio" value="other" name="FavColor"/>other 
    <input type="text" size="12" name="accept" onClick="setFocus()"/><br/>
    <input type="button" name="send" value="Send" onClick="other()"/>
    <input type="reset">
    <br/>
     </form>
     <div id="answer">
     You have not selected any color yet
     </div>
     </body>
     </html>
    See if it helps

  5. #5
    jeagerjr's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2008
    Posts
    6

    Re: Form with textbox in radio group

    rangana,

    Thank you. That is brilliant. Now I just have to understand how it worked.

    That is the best part.

    I appreciate the input.

    Again, thank you for your help.

    Regards,

    je

  6. #6
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: Form with textbox in radio group

    Welcome! Glad I could help



Tags for this Thread