nesting functions in a loop

[loren.hibbard.i]

If I use this function to create a user-specified set of text entry boxes :

function build_form_fields_vinyl_design_qty($amount)
{
var $container_left, $container_right, $item, $field, $i;
$container_left = document.getElementById('flex_vinyl_billboard_title');
$container_right = document.getElementById('flex_vinyl_billboard_input');
$container_right.innerHTML = '';
$container_left.innerHTML = '';
for ($i = 0; $i < $amount; $i++) {


//create title repeater

$item = document.createElement('div');
$field = document.createElement('span');
$field.className="x";
$field.innerHTML = '<div style="margin-top:10px; margin-bottom:16px;">Name of Design ' + ($i+1)+'<br><br>Qty of design '+($i+1)+'<br><br></div>';
$item.appendChild($field);
$container_left.appendChild($item);


//create input box repeater

$item = document.createElement('div');
$field = document.createElement('span');
$field.className="Y";
$field.innerHTML = '<input type="text" class="input_field" name="name_of_design_'+($i+1)+'"><br><input type="text" class="input_field" name="qty_of_design_'+($i+1)+'">'+'<br><br>';

$item.appendChild($field);
$container_right.appendChild($item);
}
}

with these divs in the body

<td valign="TOP">
<div id="flex_vinyl_billboard_title"></div>

</td>
<td valign="top">
<div id="flex_vinyl_billboard_input"></div>
</td>

But then I want the one of the created text boxes, to perform a similar function, ie. create another kind of set of text input fields, does anyone have a suggestion for how to do that. I know that the name of each created text box is name="name_of_design_'+($i+1)+'". But since the box is not created yet, I don't have the option to just call another function onkeyup, when the user enters a number in one of those boxes to create the next tier of options.

Thank you in advance to anyone who can help!
Thomas

[Fang]

Add it directly in the string:

$field.innerHTML = '<input type="text" class="input_field" onclick="alert(this.name)" name="name_of_design_'+($i+1)+'">

[loren.hibbard.i]

I'm sorry. I can't get that to work any which way
<script type="text/javascript">

function build_form_fields_vinyl_design_qty($amount)
{
var $container_left, $container_right, $item, $field, $i;
$container_left = document.getElementById('flex_vinyl_billboard_title');
$container_right = document.getElementById('flex_vinyl_billboard_input');
$container_right.innerHTML = '';
$container_left.innerHTML = '';
for ($i = 0; $i < $amount; $i++) {


//create title repeater

$item = document.createElement('div');
$field = document.createElement('span');
$field.className="x";
$field.innerHTML = '<div style="margin-top:10px; margin-bottom:16px;">Name of Design ' + ($i+1)+'<br><br>Qty of design '+($i+1)+'<br><br></div>';
$item.appendChild($field);
$container_left.appendChild($item);


//create input box repeater

$item = document.createElement('div');
$field = document.createElement('span');
$field.className="Y";
$field.innerHTML = '<input type="text" class="input_field" name="name_of_design_'+($i+1)+'"><br><input type="text" class="input_field" onkeyup="build_form_fields_design_qty_extensions(parseInt(this.value, 10));" name="qty_of_design_'+($i+1)+'">'+'<br><br>';

$item.appendChild($field);
$container_right.appendChild($item);
}
}

function build_form_fields_extension($amount)
{
var
$container = document.getElementById('FormFields'),
$item, $field, $i;

$container.innerHTML = '';
for ($i = 0; $i < $amount; $i++) {
$item = document.createElement('div');
$item.style.margin = '3px';

$field = document.createElement('span');
$field.innerHTML = 'Height:';
$field.style.marginRight = '7px';
$item.className="input_form";
$item.appendChild($field);

$field = document.createElement('input');
$field.name = 'Design[' + $i + ']';
$field.type = 'text';
$field.className="input_field_design_qty";
$field.style.marginRight = '5px';
$item.appendChild($field);

$field = document.createElement('span');
$field.innerHTML = 'in';
$field.style.marginRight = '10px';
$item.className="input_form";
$item.appendChild($field);

$field = document.createElement('span');
$field.innerHTML = 'Width:';
$field.style.margin = '0px 7px';
$item.appendChild($field);

$field = document.createElement('input');
$field.name = 'Quantity[' + $i + ']';
$field.type = 'text';
$field.className="input_field_design_qty";
$field.style.marginRight = '5px';
$item.appendChild($field);

$field = document.createElement('span');
$field.innerHTML = 'in';
$field.style.marginRight = '10px';
$item.className="input_form";
$item.appendChild($field);





$container.appendChild($item);

}
}

</script>

I really appreciate the help, but I can't get the second tier of text boxes to display anything.

[Fang]

Function names don't match

//create input box repeater

$item = document.createElement('div');
$field = document.createElement('span');
$field.className="Y";
$field.innerHTML = '<input type="text" class="input_field" name="name_of_design_'+($i+1)+'"><br><input type="text" class="input_field" onkeyup="build_form_fields_design_qty_extensions(parseInt(this.value, 10));" name="qty_of_design_'+($i+1)+'">'+'<br><br>';

$item.appendChild($field);
$container_right.appendChild($item);
}	
}	

function build_form_fields_extension($amount)
{
var
$container = document.getElementById('FormFields'),
$item, $field, $i;

[loren.hibbard.i]

yeah, I found that..but the thing still won't work. the functions both work independently, but when I call it like that inside the other function..

[Fang]

Does this element exist?

var $container = document.getElementById('FormFields'),

[loren.hibbard.i]

yes. at the beginning of the function to create the 'extensions' text-inputs. However, this

$field.innerHTML = '<input type="text" class="input_field" name="name_of_design_'+($i+1)+'"><br><input type="text" class="input_field" onkeyup="build_form_fields_extension(parseInt(this.value, 10));" name="qty_of_design_'+($i+1)+'">'+'<br><br>';

never assigns a unique id to the new inputs it's creating. I was thinking something like, id="FormFields_'+($i+1)+'"

then in the other function

var $container = document.getElementById('FormFields_'+($i+1)+''),

but that doesn't work either. What is your idea about
var $container = document.getElementById('FormFields') ?

[Fang]

I don't see where FormFields is created

[loren.hibbard.i]

yeah, that's what i mean. it should pull the value from the first layer of text inputs, &#171;formfields&#187; then create that number of new sets of text-inputs. so those fields must be given the id formfields_1, formfields_1, formfields_1, &c, as it goes through the loop, so the next function can getElementById(formfields_x). Any ideas on how to do that?

[Fang]

It references a non-existing id
This would work:

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>

<script type="text/javascript">
function build_form_fields_vinyl_design_qty($amount)
{
var $container_left, $container_right, $item, $field, $i;
$container_left = document.getElementById('flex_vinyl_billboard_title');
$container_right = document.getElementById('flex_vinyl_billboard_input');
$container_right.innerHTML = '';
$container_left.innerHTML = '';
for ($i = 0; $i < $amount; $i++) {


//create title repeater

$item = document.createElement('div');
$field = document.createElement('span');
$field.className="x";
$field.innerHTML = '<div style="margin-top:10px; margin-bottom:16px;">Name of Design ' + ($i+1)+'<br><br>Qty of design '+($i+1)+'<br><br></div>';
$item.appendChild($field);
$container_left.appendChild($item);


//create input box repeater

$item = document.createElement('div');
$field = document.createElement('span');
$field.className="Y";
$field.innerHTML = '<input type="text" class="input_field" name="name_of_design_'+($i+1)+'"><br><input type="text" class="input_field" onkeyup="build_form_fields_extension(parseInt(this.value, 10));" name="qty_of_design_'+($i+1)+'">'+'<br><br>';

$item.appendChild($field);
$container_right.appendChild($item);
}	
}	

function build_form_fields_extension($amount)
{
var $container = document.getElementById('FormFields'),
$item, $field, $i;

$container.innerHTML = '';
for ($i = 0; $i < $amount; $i++) {
$item = document.createElement('div');
$item.style.margin = '3px';

$field = document.createElement('span');
$field.innerHTML = 'Height:';
$field.style.marginRight = '7px';
$item.className="input_form";
$item.appendChild($field);

$field = document.createElement('input');
$field.name = 'Design[' + $i + ']';
$field.type = 'text';
$field.className="input_field_design_qty";
$field.style.marginRight = '5px';
$item.appendChild($field);

$field = document.createElement('span');
$field.innerHTML = 'in';
$field.style.marginRight = '10px';
$item.className="input_form";
$item.appendChild($field);

$field = document.createElement('span');
$field.innerHTML = 'Width:';
$field.style.margin = '0px 7px';
$item.appendChild($field);

$field = document.createElement('input');
$field.name = 'Quantity[' + $i + ']';
$field.type = 'text';
$field.className="input_field_design_qty";
$field.style.marginRight = '5px';
$item.appendChild($field);

$field = document.createElement('span');
$field.innerHTML = 'in';
$field.style.marginRight = '10px';
$item.className="input_form";
$item.appendChild($field);





$container.appendChild($item);

}
}</script>

<style type="text/css">
body {
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:0.8em;
}
</style>

</head>
<body><button type="button" onclick="build_form_fields_vinyl_design_qty(3)">Add fields</button>
<table summary="">
<tr>
<td valign="TOP">
<div id="flex_vinyl_billboard_title"></div>

</td>
<td valign="top">
<div id="flex_vinyl_billboard_input"></div>
</td>
</tr>
</table>
<p id="FormFields"></p>
</body>
</html>

[criterion9]

Are you confusing javascript and php syntax perhaps?

$container_left, $container_right, $item, $field, $i;

[loren.hibbard.i]

That's pretty functional.

In my opinion, all this playing around with the appendChild has become a bit too circumlocutious. I re-worked the thing to work exclusively with innerHTML.

Thanks for your help