Adding & Removing Form Options

[LayneMitch via WebmasterKB.com]

I'm trying to add more form options depending on what you chose and then
remove the form options if the main option is deselected. The latter is what
I'm having the problem with.

I only need suggestions on the checkbox options, not the radio options.
Depending on what advice I get for the checkbox options, I can alter the code
for the radio options.

The form code is very long so I'll only post the problem area and it's
related snippets.

function attachHandlers(){
var the_button = document.getElementById("my_button");
the_button.onclick=function(){return checkFormFields();};

var radio_sel = document.getElementById("radiochoice");
radio_sel.onclick=addRadioOpts;

var chkbox_sel = document.getElementById("checkchoice");
chkbox_sel.onclick=addCheckOpts;
}

.....

function addCheckOpts(){

var chicken_sel = document.getElementById("checkchoice");

if (chicken_sel.checked==true)
{
var newInput3 = document.createElement('input');
newInput3.type = "radio";
newInput3.id = "first_child";
newInput3.name = "choice";
newInput3.size = "2";
newInput3.className = 'textstyle';
newInput3.value = "chicken'n'pasta";

var nameText3 = document.createTextNode("chicken'n'pasta");


var newInput4 = document.createElement('input');
newInput4.type = "radio";
newInput4.id = "second_child";
newInput4.name = "choice";
newInput4.size = "2";
newInput4.className = 'textstyle';
newInput4.value = "chicken'n'potatoes";

var nameText4 = document.createTextNode("chicken'n'potatoes");

var the_box = document.getElementById("mainchkbox");
var the_cell = the_box.parentNode;

var the_break = document.createElement('br');


the_cell.insertBefore(newInput3, the_box);
the_cell.insertBefore(nameText3, the_box);
the_cell.insertBefore(newInput4, the_box);
the_cell.insertBefore(nameText4, the_box);
the_cell.insertBefore(the_break, newInput4);
the_cell.insertBefore(the_break, the_box);
the_cell.insertBefore(the_break, second_input);

}

return;

}

This code adds the options, but I need it to remove the options when the
checkbox is deselected.
Please help. Thanks.

--
Message posted via WebmasterKB.com

http://www.webmasterkb.com/Uwe/Forums.aspx/javascript/200809/1

[SAM]

Re: Adding & Removing Form Options

LayneMitch via WebmasterKB.com a écrit :

I'm trying to add more form options depending on what you chose and then
remove the form options if the main option is deselected.
>
[Code]
>
function attachHandlers( ){
var the_button = document.getEle mentById("my_bu tton");
the_button.oncl ick=function(){ return checkFormFields ();};
>
var radio_sel = document.getEle mentById("radio choice");
radio_sel.oncli ck=addRadioOpts ;
>
var chkbox_sel = document.getEle mentById("check choice");
chkbox_sel.oncl ick=addCheckOpt s;
}

var new_elemt = function(e_type ,e_name,e_class ,e_value,e_targ et) {
var e, t, b;
e = document.create Element('input' );
e.type = e_type;
e.name = e_name;
e.className = e_class,
e.value = e_value;
// there is no "size" with a radio-button
// the id is of no utility
t = document.create TextNode(' '+e_value);
b = document.create Element('br');
e_target = document.getEle mentById(e_targ et);
with(e_target.p arentNode) {
insertBefore(e, e_target);
insertBefore(t, e_target);
insertBefore(b, e_target);
}
}

function addCheckOpts(){
if (document.getEl ementById("chec kchoice").check ed) {
new_elemt('radi o', // type
'choice', // name
'textstyle', // class
'chicken\'n\'pa sta', // text and value
'mainchkbox'); // target
new_elemt('radi o',
'choice',
'textstyle',
'chicken\'n\'po tatoes',
'mainchkbox');
}
else {
var box = document.getEle mentById("mainc hkbox").parentN ode;
while(box.first Child && box.firstChild. id != 'mainchkbox')
box.removeChild (box.firstChild );
}
}


--
sm

[LayneMitch via WebmasterKB.com]

Re: Adding & Removing Form Options

SAM wrote:

>LayneMitch via WebmasterKB.com a écrit :

>I'm trying to add more form options depending on what you chose and then
>remove the form options if the main option is deselected.

>[quoted text clipped - 11 lines]

>chkbox_sel.onc lick=addCheckOp ts;
>}

>
>var new_elemt = function(e_type ,e_name,e_class ,e_value,e_targ et) {
var e, t, b;
e = document.create Element('input' );
e.type = e_type;
e.name = e_name;
e.className = e_class,
e.value = e_value;
// there is no "size" with a radio-button
// the id is of no utility
t = document.create TextNode(' '+e_value);
b = document.create Element('br');
e_target = document.getEle mentById(e_targ et);
with(e_target.p arentNode) {
insertBefore(e, e_target);
insertBefore(t, e_target);
insertBefore(b, e_target);
}
>}
>
>function addCheckOpts(){
>if (document.getEl ementById("chec kchoice").check ed) {
new_elemt('radi o', // type
'choice', // name
'textstyle', // class
'chicken\'n\'pa sta', // text and value
'mainchkbox'); // target
new_elemt('radi o',
'choice',
'textstyle',
'chicken\'n\'po tatoes',
'mainchkbox');
}
>else {
var box = document.getEle mentById("mainc hkbox").parentN ode;
while(box.first Child && box.firstChild. id != 'mainchkbox')
box.removeChild (box.firstChild );
}
>}
>

Thanks...Got it. It worked...Really appreciate your response!

--
Message posted via WebmasterKB.com

http://www.webmasterkb.com/Uwe/Forums.aspx/javascript/200809/1