SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot mrtopher's Avatar
    Join Date
    Mar 2004
    Location
    VA
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trouble with appendChild()

    I'm writing an interface that is going to allow the user to add an undetermined number of rows of drop boxes on a form. I have the creation of the drop down boxes working and it's even adding them to the form. The problem is it's not adding them correctly.

    http://www.leftofcentercom.com/ajax/#

    When someone clicks the second + button, I'm trying to add a row of drop down boxes just like the one thats already there, but for some reason the appendChild function won't add the other two drop down box controls. I have tried giving them different names and ids and that hasn't helped. Below is the function in the JS that adds that row of boxed:

    Code:
    function addDay(event) {
            // Get current options from form.
    	var day_options = $('days').options;
    	var hour_options = $('hours').options;
    	var minute_options = $('minutes').options;
    
            // Create new page elements.
    	var group = document.createElement("blockquote");
    	var day_select = document.createElement("select");
    	var hour_select = document.createElement("select");
    	var hour_select2 = document.createElement("select");
    	var minute_select = document.createElement("select");
    	var minute_select2 = document.createElement("select");
    
    	// Populate new days drop down with options from existing drop down.
    	for(var i = 0; i < day_options.length; ++i) {
    		addOption(day_select,day_options[i].text,day_options[i].value);
    	}
    
    	// Populate new hours drop down with options from existing drop down.
    	for(var i = 0; i < hour_options.length; ++i) {
                   addOption(hour_select,hour_options[i].text,hour_options[i].value);
                 addOption(hour_select2,hour_options[i].text,hour_options[i].value);
    	}
    
    	// Populare new minutes drop down with options from existing drop down.
    
    	for(var i = 0; i < minute_options.length; ++i) {		addOption(minute_select,minute_options[i].text,minute_options[i].value);
    addOption(minute_select2,minute_options[i].text,minute_options[i].value);
    	}	
    
            // Set names and ids of new form controls.
    	day_select.name = "days";
    	hour_select.name = "hours_start";
    	hour_select.id = "hours_start";
    	minute_select.name = "minutes_start";
    	minute_select.id = "minutes_start";
    	hour_select2.name = "hours_end";
    	hour_select2.id = "hours_end";
    	minute_select2.name = "minutes_end";
    	minute_select2.id = "minutes_end";
    
            // Add new form controls to page.
    	group.appendChild(day_select);
    	group.appendChild(document.createTextNode('Start: '));
    	group.appendChild(hour_select);
    	group.appendChild(minute_select);
    	group.appendChild(document.createTextNode('End: '));
    	group.appendChild(hour_select2);
    	group.appendChild(minute_select2);
    	
    	$('session_group1').appendChild(group);
    }
    I'm using prototype to make my like easier. Any ideas on why this isn't working?
    The blog: ChrisMonnat.com

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    If it helps, you can copy an existing element (including its children) quite easily

    Code Javscript:
    newElement = existingElement.cloneNode(true);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the variable "group" doesn't seem to be defined...

    I normally use the technique that pmw57 mentioned. Set up a template for the elements which I want to "add an undetermined number of rows of", and clone it, then append it. Here's an example (note, I used insertBefore instead of appendChild, because I wanted my Add button to remain underneath all the added stuff):
    Code:
    function addProduct(container, before) {
    	var newProduct = document.getElementById('product_template').cloneNode(true);
    	newProduct.id = '';
    	newProduct.style.display = 'block';
    	container.insertBefore(newProduct, before);
    }
    
    function removeProduct(product) {		
    	product.parentNode.removeChild(product);	
    }
    
    .....
    
    <div class="products">
    	<div id="product_template" style="display:none">
    		<select name="products[]">
    			<option value="">Select a Product</option>
    			<option value="125276982" title="">2007_Conf_Eastern</option>
    			<option value="1769423365" title="">2007_Conf_Western</option>
    		</select>
    		<button onclick="removeProduct(this.parentNode);return false;">Remove</button>
    	</div>
    	<button onclick="addProduct(this.parentNode, this);return false;">Add a product</button></div>
    </div>


Bookmarks

Posting Permissions

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