Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Jun 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Radio Buttons that affect Text boxes.

    Hi guys,

    I have a form I am working on that has 4 text boxes in it, but I want to change it so that if a Radio button is selected it makes the 4th text box disappear, but still gives it a value of "0" when the form is submitted.

    Is this possible with Javascript?

    Here is what it looks like so far -

    Code:
    <FORM><table id='table_columns'>
                       <tr>
                    <td colspan="2" align="center">3 Columns <input name="3columns" type="radio" value="3columns">  4 Columns <input name="4columns" type="radio" value="3columns"></td></tr><tr>
                    <td align="right"><p>Column 1</p></td>
                    <td align="left"><input class="txt" size="2" maxlength="2" name="WIDTH1" size="20" Title="Insert the desired width" value="25" /></td>
                  </tr>
                       <tr>
                    <td align="right"><p>Column 2</p></td>
                    <td align="left"><input class="txt" size="2" maxlength="2" name="WIDTH2" size="20" Title="Insert the desired width" value="25" /></td>
                  </tr>
                       <tr>
                    <td align="right"><p>Column 3</p></td>
                    <td align="left"><input class="txt" size="2" maxlength="2" name="WIDTH3" size="20" Title="Insert the desired width" value="25" /></td>
                  </tr>
                       <tr>
                    <td align="right"><p>Column 4</p></td>
                    <td align="left"><input class="txt" size="2" maxlength="2" name="WIDTH4" size="20" Title="Insert the desired width" value="25" /></td>
                  </tr>
                     </table>
                <br />
                <input type="button" value="Save" Title="Save these Settings" onClick="updateSettings('COLUMNS');" /></FORM>
    If 3 Columns, WIDTH4 is not viewed and defaults to "0".
    If 4 Columns, all are visible and the number is then optional.

    Would love some assistance with this as my coding skills are pretty limited and my fingers have gone numb trying to google an answer.

  • #2
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    I'm pretty sure that with IE (at least older versions) you can't change the type attribute of an input, which is what you need to do in this case, using javascript.

    To play it safe, my suggestion is to just use dom methods when the radio button is clicked to create a hidden input with value of 0 and replace the visible input with the new hidden input using javascript. Hidden inputs are submited with the form when the submit button is clicked

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,148
    Thanks
    39
    Thanked 506 Times in 500 Posts

    Lightbulb Something else to consider ...

    I would suggest dumping the table display altogether and use CSS to accomplish the same task.
    You will still need to add the "hidden" element logic as well as some action for the form
    plus change the "onsubmit=" statement if any further validation is needed.
    (Note: onsubmit="return true" to submit the form information)
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Column Display </title>
    <style type="text/css">
    .cols { float: left; width:100px; }
    .clr  { clear: both; }
    </style>
    </head>
    <body>
    <FORM action="" method="POST" onsubmit="return false">
     3 Columns 
    <input name="columns" type="radio" onclick="document.getElementById('col4').style.display='none'">
     4 Columns
    <input name="columns" type="radio" onclick="document.getElementById('col4').style.display='block'"; checked>
    <p>
    
    <div id='table_columns'>
     <div align="right" class="cols"> <p>Column 1</p>
       <input class="txt" size="2" maxlength="2" name="WIDTH1" Title="Insert the desired width" value="25" />
     </div>
     <div align="right" class="cols"> <p>Column 2</p>
       <input class="txt" size="2" maxlength="2" name="WIDTH1" Title="Insert the desired width" value="25" />
     </div>
     <div align="right" class="cols"> <p>Column 3</p>
       <input class="txt" size="2" maxlength="2" name="WIDTH2" Title="Insert the desired width" value="25" />
     </div>
     <div align="right" class="cols" id="col4"> <p>Column 4</p>
       <input class="txt" size="2" maxlength="2" name="WIDTH3" Title="Insert the desired width" value="25" />
     </div>
    </div>
    <p class="clr" /> 
    <br>
    <input type="button" value="Save" Title="Save these Settings" />
    </FORM>
    </body>
    </html>

  • #4
    New Coder
    Join Date
    Jun 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I do not really see Internet Explorer as a functional browser anymore and ignore it completely. So long as it is functional in FireFox and Chrome, I'm happy!
    If people are still using it - it's there fault. My site warns before entering anyway as it's full of webkit stuff.

    Looks like jmrker is almost there, the hiding works well, but does not look like it changes the "value" to 0 of column 4 whilst it's hidden.

    Wouldn't clicking Save still generate the Value of 25 as it's still only hidden from view via CSS?
    25 is usually the default and needs changing to 0 if switched from 4 columns to 3.
    Last edited by DejaVu; 08-22-2011 at 12:53 PM.

  • #5
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by DejaVu View Post
    I do not really see Internet Explorer as a functional browser anymore and ignore it completely.
    I suppose this is a homework exercise otherwise you're potentially losing a huge number of visitors given IE is still by far the most used browser on the net.

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,148
    Thanks
    39
    Thanked 506 Times in 500 Posts

    Exclamation

    Quote Originally Posted by DejaVu View Post
    ...
    Looks like jmrker is almost there, the hiding works well, but does not look like it changes the "value" to 0 of column 4 whilst it's hidden.

    Wouldn't clicking Save still generate the Value of 25 as it's still only hidden from view via CSS?
    25 is usually the default and needs changing to 0 if switched from 4 columns to 3.
    As indicated in post #3, the script needed some additional code to handle the information passed
    but you did not have a valid form tag nor any validation checking, therefore, I only addressed
    the column display problem with an alternate solution to the table presented.

  • #7
    New Coder
    Join Date
    Jun 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by webdev1958 View Post
    given IE is still by far the most used browser on the net.
    Not so much.
    http://www.w3schools.com/browsers/browsers_stats.asp

    Since January, people have come to realise how rubbish it is and switching. Firefox has earned it's place at the top for the past three years, but even that is being caught up Google Chrome (My weapon of choice).

    Microsoft tried to revive it with IE9, but the damage is already done.

  • #8
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by DejaVu View Post
    A lot of people use that site for browser stats but if you read "the fine print" on that site you will see their stats apply to only their website and not the rest of the net.

    I prefer to use NetMarketShare which shows the number of IE users (at the time of this post) is more than double the number of FF users on the net.

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,313
    Thanks
    203
    Thanked 2,564 Times in 2,542 Posts
    Quote Originally Posted by webdev1958 View Post
    A lot of people use that site for browser stats but if you read "the fine print" on that site you will see their stats apply to only their website and not the rest of the net.

    I prefer to use NetMarketShare which shows the number of IE users (at the time of this post) is more than double the number of FF users on the net.
    The w3schools site gives a very sensible explanation for the apparant discrepancy:-

    W3Schools is a website for people with an interest for web technologies. These people are more interested in using alternative browsers than the average user. The average user tends to the browser that comes preinstalled with their computer, and do not seek out other browser alternatives.

    These facts indicate that the browser figures above are not 100% realistic. Other web sites have statistics showing that Internet Explorer is a more popular browser.


    For myself I am perfectly happy with IE8.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #10
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by Philip M View Post
    The w3schools site gives a very sensible explanation for the apparant discrepancy:-
    That's why I suggested reading "the fine print" and why I use NetMarketShare for browser stats as well as Google Analytics on the websites I have built.
    Last edited by webdev1958; 08-23-2011 at 09:24 AM.

  • #11
    New Coder
    Join Date
    Jun 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You make a very good point, the average user would not venture onto w3schools making my statement quite redundant.

    I may look into making my site a little more IE compatible, although I can see that being a very long drawn out process now.


    However, back to the my original post.

    I do not know if it makes much difference, but the input elements are all collected by PHP, in my understanding, further information is not really required. The Text fields are just passed to an ini file that keeps the settings are pulled and used elsewhere on other pages.

    I have a small script already in place that adds the totals together that shows the user the total size of the selections made (ensuring not going over 100%).

    I guess, what I'm getting at, can this be done, by using any means necessary? Or am I looking in the wrong place with Javascript?

    Here is the entire section (of a huge settings file).
    This project is not actually a website, it's locally hosted PHP program that integrates itself with other similar type programs.

    Code:
    <!-- Column Widths -->
                   <div id="COLUMNS" class="panel">
                <h3>Column Widths</h3>
                <img src="media/Programs/cwidths.png">
                <p align="justify" style="width: 500px;">This is to set the width of each column on the main widget page via a percentage. Do not exceed 100%. For 3 columns, leave column 4 as 0%. If you move to 3 columns make sure you move all widgets out of column 4 before you make the changes.</p>
                <table id='table_columns'>
                       <tr>
                    <td align="right"><p>Column 1</p></td>
                    <td align="left"><input class="txt" size="2" maxlength="2" name="WIDTH1" size="20" Title="Insert the desired width" value="<?php echo $config->get('WIDTH1','COLUMNS')?>" /></td>
                  </tr>
                       <tr>
                    <td align="right"><p>Column 2</p></td>
                    <td align="left"><input class="txt" size="2" maxlength="2" name="WIDTH2" size="20" Title="Insert the desired width" value="<?php echo $config->get('WIDTH2','COLUMNS')?>" /></td>
                  </tr>
                       <tr>
                    <td align="right"><p>Column 3</p></td>
                    <td align="left"><input class="txt" size="2" maxlength="2" name="WIDTH3" size="20" Title="Insert the desired width" value="<?php echo $config->get('WIDTH3','COLUMNS')?>" /></td>
                  </tr>
                       <tr>
                    <td align="right"><p>Column 4</p></td>
                    <td align="left"><input class="txt" size="2" maxlength="2" name="WIDTH4" size="20" Title="Insert the desired width" value="<?php echo $config->get('WIDTH4','COLUMNS')?>" /></td>
                  </tr>
                       <tr id="summation">
                    <td>&nbsp;</td>
                    <td align="right">Sum :</td>
                    <td align="center"><span id="sum">0</span></td>
                  </tr>
                     </table>
                <br />
                <input type="button" value="Activate/Deactivate Widgets" Title="Activate/Deactivate Widgets" onClick="window.location.href='#WIDGETS_ON/OFF'" />
                <br>
                <input type="button" value="Save" Title="Save these Settings" onClick="updateSettings('COLUMNS');" />
                <?php 
    //if ($sum <= 100) echo 
          
          //"<input type=\"button\" value=\"Save\" //onclick=\"updateSettings('COLUMNS');\" />" ?>
                <script>
        $(document).ready(function(){
     
            //iterate through each textboxes and add keyup
            //handler to trigger sum event
            $(".txt").each(function() {
     
                $(this).keyup(function(){
                    calculateSum();
                });
            });
     
        });
     
        function calculateSum() {
     
            var sum = 0;
            //iterate through each textboxes and add the values
            $(".txt").each(function() {
     
                //add only if the value is number
                if(!isNaN(this.value) && this.value.length!=0) {
                    sum += parseFloat(this.value);
                }
     
            });
            //.toFixed() method will roundoff the final sum to 2 decimal places
            $("#sum").html(sum.toFixed(0));
        }
    </script> 
              </div>
    I am what is affectionately known as a Copy coder and can grasp some bits. A lot of it is still double dutch though. Hope this can be done as people (surprisingly less knowledgeable than me! ) are having a few issues with this.


  •  

    Posting Permissions

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