www.webdeveloper.com
Results 1 to 12 of 12

Thread: nesting functions in a loop

  1. #1
    Join Date
    Nov 2010
    Posts
    19

    nesting functions in a loop

    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

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Add it directly in the string:
    Code:
    $field.innerHTML = '<input type="text" class="input_field" onclick="alert(this.name)" name="name_of_design_'+($i+1)+'">

  3. #3
    Join Date
    Nov 2010
    Posts
    19
    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.

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Function names don't match
    Code:
    //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;

  5. #5
    Join Date
    Nov 2010
    Posts
    19
    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..

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Does this element exist?
    Code:
    var $container = document.getElementById('FormFields'),

  7. #7
    Join Date
    Nov 2010
    Posts
    19
    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') ?

  8. #8
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    I don't see where FormFields is created

  9. #9
    Join Date
    Nov 2010
    Posts
    19
    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?

  10. #10
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    It references a non-existing id
    This would work:
    Code:
    <!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>
    Last edited by Fang; 12-16-2010 at 03:26 AM.

  11. #11
    Join Date
    Jan 2009
    Posts
    3,346
    Are you confusing javascript and php syntax perhaps?
    $container_left, $container_right, $item, $field, $i;

  12. #12
    Join Date
    Nov 2010
    Posts
    19
    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles