showing form contents when a checkbox is checked

**thedash** · 05-19-2009, 06:31 AM

Hey guys! So what I'm trying to design is kind of difficult to explain but i'll do my best.

So basically, I'm trying to design a form that's a bunch of checkboxes, and then when you click a checkbox, another form comes up with inputs for username / password, a submit button and a cancel button. When you type in the username and password and hit submit, it will submit the data (i can do that in php later) and close the form. OR you can hit the 'cancel' button and the form will also close, but it will also uncheck the checkbox you selected.

The kicker is i'd like the form with the username / pass to come up aligned with wherever on the page the check box is. A picture describing what I'm talking about is shown below:

So basically, as shown above, there will be two rows of check boxes. As can be seen from the images, when you check a box, id like a form to come up to the left and aligned with the check box if the check box is located in the left column, or to the right and lined up with the check box if the check box is located in the right column. Hitting the cancel button should close the form and uncheck the box. Hitting the submit button should just close the form.

Obviously once someone checks a box and fills out the form and hits submit, the check mark should stay next in that box (as shown in the bottom figure) regardless of what else goes on..

Oh also only one form with submit/cancel/etc can be open at a time. So if a form is open and you try and click another checkbox, it should just uncheck that box and not do anything (or keep the box checked if it previously was checked and not do anything)

This is a really long post but thank you so much for your help ahead of time!! I'm new to JS and don't really know where to get started on this one...

**vwphillips** · 05-19-2009, 01:19 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

#tst1 {
  position:absolute;visibility:hidden;z-Index:101;top:50px;left:150px;width:150px;height:100px;background-Color:#FFFFCC;border-Left:solid black 1px;border-Top:solid black 1px;border-Bottom:solid black 1px;
}

#tst2 {
  position:absolute;visibility:hidden;z-Index:101;top:200px;left:150px;width:150px;height:100px;background-Color:#FFFFCC;border-Right:solid black 1px;border-Top:solid black 1px;border-Bottom:solid black 1px;
}

#form {
 position:absolute;top:5px;left:5px;font-Size:12px;
}

#form INPUT {
 font-Size:12px;
}

#table {
  width:300px;height:300px;background-Color:#99CC66;
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/

function Draw(mde,id,col,bcol){
 var obj=document.getElementById(id);
 var w=zxcSVInt(obj,'width'),h=zxcSVInt(obj,'height');
 var box=zxcES('DIV',{position:'absolute',left:(mde=='left'?w:-h/2)+'px',top:'0px',width:h/2+'px',height:h+'px'},obj);
 var ary=[];
 if (mde=='left') ary=ary.concat(zxcLine(box,[0,0],[h/2,h/2],[0,0],bcol),zxcLine(box,[0,h],[h/2,h/2],[0,h],bcol));
 else ary=ary.concat(zxcLine(box,[h/2,0],[0,h/2],[h/2,0],bcol),zxcLine(box,[h/2,h],[0,h/2],[h/2,h],bcol));
 ary=ary.sort(function(a,b){ return a[0]-b[0]; });
 for (var z0=0;z0<ary.length;z0+=2){
  zxcES('DIV',{position:'absolute',left:ary[z0][0]-(mde=='left'?0:h/2)+'px',top:Math.min(ary[z0+1][1],ary[z0][1])+'px',width:'1px',height:Math.max(Math.abs(ary[z0+1][1]-ary[z0][1])-h,0)+'px',backgroundColor:col},box);
 }
}

function zxcLine(obj,srt,fin,os,bcol){
 var w=fin[0]-srt[0],h=fin[1]-srt[1],hyp=Math.sqrt(w*w+h*h),xr=w/hyp,yr=h/hyp;
 for (var ary=[],z0=0;z0<hyp;z0++){
  ary[z0]=[Math.floor(z0*xr+srt[0]+os[0]),Math.floor(z0*yr+srt[1]+os[1])];
  zxcES('DIV',{position:'absolute',overflow:'hidden',zIndex:'1',left:z0*xr+os[0]+'px',top:z0*yr+os[1]+'px',width:'1px',height:'1px',backgroundColor:bcol},obj);
 }
 for (var rary=[ary[0]],z1=1;z1<ary.length;z1++){
  if (ary[z1][0]!=ary[z1-1][0]) rary.push(ary[z1]);
 }


 return rary;
}

function zxcES(ele,style,par,txt){
 if (typeof(ele)=='string') ele=document.createElement(ele);
 for (key in style) ele.style[key]=style[key];
 if (par) par.appendChild(ele);
 if (txt) ele.appendChild(document.createTextNode(txt));
 return ele;
}

function zxcSVInt(obj,par){
 if (obj.currentStyle) return parseInt(obj.currentStyle[par.replace(/-/g,'')]);
 return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase()));
}


function Pop(obj,p,p1,p2,frm){
 p=document.getElementById(p);
 if (p.lst) zxcES(p.lst,{visibility:'hidden'});
 if (p.cb&&p.cb!=obj) p.cb.checked=false;
 var pos=zxcPos(p);
 var pop=zxcPos(obj)[0]<zxcPos(p)[0]+p.offsetWidth/2;
 var box=document.getElementById(pop?p1:p2);
 zxcES(box,{visibility:obj.checked?'visible':'hidden',left:(pop?(pos[0]-box.offsetWidth-box.offsetHeight/2-5):(pos[0]+p.offsetWidth+box.offsetHeight/2+5))+'px',top:zxcPos(obj)[1]-box.offsetHeight/2+obj.offsetHeight/2+'px'});
 zxcES(document.getElementById(frm),{},box);
 p.lst=box;
 p.cb=obj
}

function Hide(id){
 var obj=document.getElementById(id);
 zxcES(obj.lst,{visibility:'hidden'});
 obj.cb.checked=false;
}

function zxcPos(obj){
 var rtn=[obj.offsetLeft,obj.offsetTop];
 while(obj.offsetParent!=null){
  var objp=obj.offsetParent;
  rtn[0]+=objp.offsetLeft-objp.scrollLeft;
  rtn[1]+=objp.offsetTop-objp.scrollTop;
  obj=objp;
 }
 return rtn;
}



/*]]>*/
</script>



</head>

<body onload="Draw('left','tst1','#FFFFCC','#000000');Draw('right','tst2','#FFFFCC','#000000');">
<div id="tst1" ></div>
<div id="tst2" >
 <form id="form" >
 User Name:<br />
 <input name="user" />
 <br />
 Password:<br />
 <input name="password" />
 <br />
 <input type="submit" name="Submit" value="Submit" />
 <input type="button" name="Cancel" value="Cancel" onclick="Hide('table');"/>
 </form>
</div>
<center>
<table id="table">
  <tr>
    <td><input type="checkbox" name="" onclick="Pop(this,'table','tst1','tst2','form');"/></td>
    <td><input type="checkbox" name="" onclick="Pop(this,'table','tst1','tst2','form');" /></td>
  </tr>
</table>
</center>
</body>

</html>

**thedash** · 05-19-2009, 03:46 PM

holy crap. i love you. thank you so much--you don't even know.

when you hit the submit button, all it really needs to do is act like the cancel button -- except allow the box to remain checked. it won't actually need to submit anything, that'll all be done a different way. I think what i'll do is make the whole page one giant form, and make the username/pass boxes for each checkbox its own unique set of input boxes. That way you can fill them out, and when you hit submit, it then just hides the boxes and leaves the checkbox checked...then you hit an update button at the bottom of the page, and it'll grab the information from all of the input boxes from the form with associated checkboxes checked....that'd probably work out better so you can do multiple at once quickly.

So it'd probably look like this...

To make it when you hit the submit button it just leaves the checkbox checked, do i just add in a new routine:

function HideSUBMIT(id){
var obj=document.getElementById(id);
zxcES(obj.lst,{visibility:'hidden'});
obj.cb.checked=true;
}

and call it using the submit button?

And how would I go about making each username/pass popup that appears next to a checkbox it's own set of inputs? Thank you so so much.

If you get a chance to explain some of the code too, that'd be awesome

**vwphillips** · 05-19-2009, 05:29 PM

I did not know if there was one form action address or one for each check box.

If there is only one action address the address can be manually coded, if not additional code will be required to change the action address according to which checkbox is checked, could use the check box avlue as the action address or using an array of action address.

**thedash** · 05-19-2009, 06:58 PM

I'm not entirely sure what you mean by "action address" -- i'm new to the lingo / javascript altogether haha

There will be only one "true" form on the page that will have one "true" submit button which will be the gray "update" button shown--the other "subforms" will really just be changing input boxes, that way when you hit the "update" button, it will just read all the input boxes and write the data to an SQL database.

So I guess each checkbox should call two new input boxes (one for username/one for password), and a new "submit" and "cancel" button, which will either hide the form and keep the check box checked (for submit), or hide the form and uncheck the check box (for cancel).

--EDIT--
SORRY! I just found out the person i'm helping design this site for will have so much content we need 3 columns of check boxes instead of two --so this design won't work as expected. Instead, i'm thinking of doing something like the following:

--------

The same idea as before. When you select a check box, it'll cover the checkboxes behind it and put a unique set of username/password boxes there with a submit button that hides "form" and keeps the checkbox checked, and the cancel button will close the "form" and uncheck the checkbox.

what's the best way to do something like this? have a <div> assigned to each checkbox, with its own set of input boxes and buttons, and have it somehow show itself over the checkboxes?

-----------
EDIT: I GOT IT TO WORK!! woohooo ... by looking at your code and all i got it exactly how i need it. thank you so much!
-------------

Thread: showing form contents when a checkbox is checked

Thread Tools

Search Thread

showing form contents when a checkbox is checked

Bookmarks

Bookmarks

Posting Permissions