Radio button Passing Values to Textbox by JS

Discussion in 'JavaScript' started by toototoo, Mar 22, 2010.

  1. #1
    Hello,

    I'd like to get a javascript function for my html form.

    By selecting a radio button which has 3 hidden values, the javascripts pass the 3 hidden values to the assigned 3 text boxes accordingly. I am just a newbie to js here and will very much appreciate your help.

    Many Thanks.
     
    toototoo, Mar 22, 2010 IP
  2. Nyu

    Nyu Peon

    Messages:
    79
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    That should be pretty easy. Create a function which will be called when you click on the radio button. To do so add the onclick attribute to the radio button e.g.
    <input type="radio" onclick="passValues()">
    Code (markup):
    Then within these function you just copy the values from your hidden fields to your textboxed like this:
    
    function passValues() {
        document.getElementbyId("textbox1").value = document.getElementById("hidden1").value
        // repeat the above line for the other fields and change the corresponding ids of your textboxes and hidden fields
    }
    
    Code (markup):
    Hope this helps ;)
     
    Nyu, Mar 23, 2010 IP
  3. toototoo

    toototoo Peon

    Messages:
    49
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks much.. Nyu.. Nice.. however..
    I also like to also try the following codes found on the net but I do not know how to pass multiple values into multiple text boxes in a single click.. i do not know how to do. kindly help.. thanks.

    <html>
    <head>
    <script language="JavaScript">
    // pass variable to field
    function passit(str)
    {document.adminForm.address_1.value=str}
    </script>
    </head>
    <body>
    <a href="javascript:passit('Main Office')">Main Office</a>
    |
    <a href="javascript:passit(' ')">Clear field and try again</a>
    <br>
    <form name="adminForm">
    <input type="text" maxlength="64" class="inputbox" value="" size="30" name="address_1" id="address_1_field">
    <input type="text" maxlength="64" class="inputbox" value="" size="30" name="address_2" id="address_2_field">
    </form>
    </body>
    </html>
    Code (markup):
     
    toototoo, Mar 23, 2010 IP
  4. Nyu

    Nyu Peon

    Messages:
    79
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Are these values fixed? If so then you can simply chang your code and edit the passit function to fill your values to the textboxes just as it already does with the one input field currently implemented. Copy the line "document.adminForm.address_1.value=str" and change the name of the input field to the others left.
     
    Nyu, Mar 24, 2010 IP
  5. toototoo

    toototoo Peon

    Messages:
    49
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thanks. .. Nyu.. yes.. fixed values. I was not able to try yr way. But i tried the below way around. it is working but it is not a proper one, i believe. please kindly suggest a better / cleaner way.
    <html>
    <head>
    <script language="JavaScript">
    // pass variable to field
    function pass_main_ad1(str)
    {document.adminForm.address_1.value=str}
    </script>
    <script language="JavaScript">
    function pass_main_ad2(str)
    {document.adminForm.address_2.value=str}
    </script>
    <script language="JavaScript">
    function pass_main_cty(str)
    {document.adminForm.city.value=str}
    </script>
    <script language="JavaScript">
    function pass_main_zip(str)
    {document.adminForm.zip.value=str}
    </script>
    </head>
    <body>
    <a href="javascript:pass_main_ad1('601 Sims Drive, #02-13');javascript:pass_main_ad2('Pan-I Complex');javascript:pass_main_cty('Singapore');javascript:pass_main_zip('387382')">Head Office</a>
    |
    <a href="javascript:pass_main_ad1(' ');javascript:pass_main_ad2(' ');javascript:pass_main_cty(' ');javascript:pass_main_zip(' ')">Clear</a>
    <br>
    <form name="adminForm">
    <input type="text" maxlength="64" class="inputbox" value="" size="30" name="address_1" id="address_1_field"><br><br>
    <input type="text" maxlength="64" class="inputbox" value="" size="30" name="address_2" id="address_2_field"><br><br>
    <input type="text" maxlength="32" class="inputbox" value="" size="30" name="city" id="city_field"><br><br>
    <input type="text" maxlength="32" class="inputbox" value="" size="30" name="zip" id="zip_field"><br>
    </form>				  
    </body>
    </html>
    Code (markup):
     
    toototoo, Mar 24, 2010 IP