...

View Full Version : Radio Buttons that affect Text boxes.



DejaVu
08-22-2011, 02:47 AM
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 -


<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. :(

webdev1958
08-22-2011, 02:52 AM
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
08-22-2011, 03:57 AM
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)


<!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
08-22-2011, 12:50 PM
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
08-22-2011, 12:55 PM
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
08-22-2011, 07:06 PM
...
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.
:rolleyes:

DejaVu
08-23-2011, 04:51 AM
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.

webdev1958
08-23-2011, 07:10 AM
Not so much.
http://www.w3schools.com/browsers/browsers_stats.asp


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 (http://marketshare.hitslink.com/browser-market-share.aspx?qprid=0)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
08-23-2011, 08:23 AM
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 (http://marketshare.hitslink.com/browser-market-share.aspx?qprid=0)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
08-23-2011, 09:16 AM
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
08-23-2011, 10: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.


<!-- 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! :D) are having a few issues with this.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum