Announcement

**webdev1958** · Aug 21, 2011, 08:52 PM

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

**jmrker** · Aug 21, 2011, 09:57 PM

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>

**DejaVu** · Aug 22, 2011, 06:50 AM

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.

**webdev1958** · Aug 22, 2011, 06:55 AM

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.

**jmrker** · Aug 22, 2011, 01:06 PM

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.

**DejaVu** · Aug 22, 2011, 10:51 PM

Originally posted by webdev1958 View Post

given IE is still by far the most used browser on the net.

Not so much.

Browser Statistics

http://www.w3schools.com/browsers/browsers_stats.asp

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

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.

**webdev1958** · Aug 23, 2011, 01:10 AM

Originally posted by DejaVu View Post

Not so much.

Browser Statistics

http://www.w3schools.com/browsers/browsers_stats.asp

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

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.

**Philip M** · Aug 23, 2011, 02:23 AM

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.

**webdev1958** · Aug 23, 2011, 03:16 AM

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.

**DejaVu** · Aug 23, 2011, 04:52 AM

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.

Announcement

Radio Buttons that affect Text boxes.

Radio Buttons that affect Text boxes.

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment