Show and Hide Table Column related to checked checkboxes

[rupak]

Hi!

I have a multiple selection of checkboxes

[HTML]<input type='checkbox' name='coffee' id='col1' value='Address'/>
<input type='checkbox' name='coffee' id='col2' value='Name'/>
<input type='checkbox' name='coffee' id='col3' value='ID'/>
<input type='checkbox' name='coffee' id='col4' value='UserName '/>
<input type='checkbox' name='coffee' id='col5' value='Code'/>
[/HTML]
Want to store them in array. On submit of button.
Then hide and show the table column with respect to selection of checkboxes. i.e. selected checkbox will show that columns in table resat will hide.

[HTML]<td id="col1">Addre ss</td>
<td id="col2">Name </td>
<td id="col3">ID</td>
<td id="col4">UserN ame</td>
<td id="col5">Code </td>[/HTML]

thus if checkbox for "Name" and "ID" are checked than it will show the Columns only for "Name" and "ID" rest will hide but will be done on submit of the button

[ronverdonk]

For a correct interpretation your ID's must be unique. In IE you will get away with it (most of the time) but not in FF.

ROnald

[rupak]

How can i proceed with the code for the same with the modified id for table cell ie. tcol1, tcol2.
[HTML]<form>
<input type='checkbox' name='coffee' id='col1' value='Address'/>
<input type='checkbox' name='coffee' id='col2' value='Name'/>
<input type='checkbox' name='coffee' id='col3' value='ID'/>
<input type='checkbox' name='coffee' id='col4' value='UserName '/>
<input type='checkbox' name='coffee' id='col5' value='Code'/>
<input type='button' onclick='show() ' value='Save'>
</form>

<td id="tcol1">Addr ess</td>
<td id="tcol2">Name </td>
<td id="tcol3">ID</td>
<td id="tcol4">User Name</td>
<td id="tcol5">Code </td>
[/HTML]
Onclick on Save button I should be able to store the checked checkbox an then show the related columns in table, rest hidden. In next cycle the modified checked checkboxes again stored new one and previous cleened and thus the show respected column.

[acoder]

You might not even need JavaScript for this if you're going to submit the form. Is the page going to be refreshed?

[rupak]

Yes need to refresh the page, thus only current set of the checkboxs will be stored on Save Button Clicked. Thus showing thoes colums only

[acoder]

Does this need to be done in JavaScript or will any language do?

[rupak]

it should be done with Javascript.

[acoder]

Then, in that case, it'd be better if this was done without refreshing the page, e.g. on clicking the checkbox.

[rupak]

It is already available at

http://www.fiendish.demon.co.uk/html/javascript/hidetablecols.html

[acoder]

So does that solve your problem?

[rupak]

this does not solve my problem,

as i had an Edit Button onclick it show and hide a div, which has all the checkboxes with submit button.

With tabuler columns.

Once we select the checkboxes Click on Submit Button then store all the checked checkboxes and hide the div

then the stored checkboxes show the respective column in ntable.

Again on Click Edit it should show all the checked checkboxes, if we edit them then we have to submit it again else it will show the same as previous.

[CODE=javascript]<script language="javas cript">

var fieldsArray = new Array();


var showMode = 'table-cell';
if (document.all) showMode='block ';
function show()
{

fieldsArray= new Array();
txt="";
cells="";
{
coffee=document .forms[0].coffee;
for (i=0;i<coffee.l ength;++ i)
{
if (coffee[i].checked)
{
txt=txt + coffee[i].id;
btn = 't'+ coffee[i].id;
cells = cells + btn;
fieldsArray[i]=btn;
}

}
toggleview('div 1');
}
mode = coffee.checked ? showMode : 'none';
}
function toggleview(elem ent1)
{
element1 = document.getEle mentById(elemen t1);
if (element1.style .display == 'block' || element1.style. display == '')
element1.style. display = 'none';
else
element1.style. display = 'block';
}
</script>[/CODE]

Not able to complete the Full funcnality as need you help on it.

[acoder]

Again on Click Edit it should show all the checked checkboxes, if we edit them then we have to submit it again else it will show the same as previous.

So, if I understand correctly, this is where the problem lies. If you don't submit, it won't be updated. Is that correct? If not, could you show the code that you call when clicking Edit.

[rupak]

Yes you got the problem, the code on Edit is

[CODE=javascript]<script type="text/javascript">
function toggleview(elem ent1)
{
element1 = document.getEle mentById(elemen t1);
if (element1.style .display == 'block' || element1.style. display == '')
element1.style. display = 'none';
else
element1.style. display = 'block';
}
</script>[/CODE]

[acoder]

So how do call this function?

PS. please use code tags when posting code. Thanks!