adding/removing xhtml content from dropdown menu

[barbs75]

Hey guys,

 

Right, i have an issue regarding generating xhtml dynamically, depending on the value selected from a dropdown menu.

 

This is the XHTML of the inputfield that i have:

<div class="inputfield">
   <label class="title" for="noofbed">No. of Bedrooms:</label>
   <select class="fade" name="noofbed" id="noofbed" onchange="create_fields(this.value)">
         <option class="fade" value="select">--Please Select--</option>
         <option class="fade" value="1">One</option>
         <option class="fade" value="2">Two</option>
         <option class="fade" value="3">Three</option>
         <option class="fade" value="4">Four</option>
         <option class="fade" value="5">Five</option>
         <option class="fade" value="6">Six</option>
   </select>
</div>

 

When the value of the dropdown box is changed, it calls the function 'create_fields(bedrooms)', the javascript of which is shown below:

 

//function to create bedroom fields needed
function create_fields(bedrooms){
//loops through each bedroom until all bedrooms are processed
for(var i=1; i<=bedrooms; i++){
	document.getElementById('bedrooms').appendChild(create_inputfield(i));//find submitCustomerForm and add inputfield
	}
}

 

the function above uses the following javascript functions:

//function to create inputfield div and all xhtml content inside
function create_inputfield(num){
//create xhtml for inputfield element declaration
var inputfield = document.createElement('div');
var divClassName = 'inputfield';//set classname
inputfield.setAttribute('class',divClassName);//add class and class name to inputfield
var inputfieldContent = '<p class="largeblue"><strong>Bedroom '+num+'</strong></p>';//variable containing xhtml content
inputfield.innerHTML = inputfieldContent;//adds xhtml content to inputfield
inputfield.appendChild(create_dimensiondiv(num));//adds on element created by function
inputfield.appendChild(create_descriptionHolder(num));//adds on element created by function
return inputfield;//return variable inputfield
}

//function to create dimensions div
function create_dimensiondiv(num){
var dimensiondiv = document.createElement('div');
var divClassName = 'dimensions';
dimensiondiv.setAttribute('class', divClassName);
dimensiondiv.innerHTML =  '<label class="room" for="bedroom'+num+'_width">Dimensions:</label><input class="fade" name="bedroom'+num+'_width" id="bedroom'+num+'_width" type="text" size="5" value="" /> x <input class="fade" name="bedroom'+num+'_length" id="bedroom'+num+'_length" type="text" size="5" value="" />';
return dimensiondiv;
}

//function to create descriptionHolder div
function create_descriptionHolder(num){
var descriptionHolder = document.createElement('div');
var divClassName = 'descriptionHolder';
descriptionHolder.setAttribute('class', divClassName);
descriptionHolder.innerHTML = '<label class="room" for="bedroom'+num+'_desc">Description:</label><textarea name="bedroom'+num+'_desc" id="bedroom'+num+'_desc" cols="35" rows="5">Enter your description here.....</textarea>';
return descriptionHolder;
}

 

The XHTML code that is reproduced for each bedroom that is selected is as follows:

<div class="inputfield">
   <p class="largeblue"><strong>Dining Room</strong></p>
   <div class="dimensions">
      <label class="room" for="diningroom_width">Dimensions:</label>
      <input class="fade" name="diningroom_width" id="diningroom_width" type="text" size="5" value="" /> x <input class="fade"   name="diningroom_length" id="diningroom_length" type="text" size="5" value="" />
   </div>
   <div class="descriptionHolder">
      <label class="room" for="diningroom_desc">Description:</label>
      <textarea name="diningroom_desc" id="diningroom_desc" cols="35" rows="5">Enter your description here.....</textarea>
   </div>	
</div>

 

This all works fine, however the issue i am having, is with removing the fields. I want to be able to do this on the fly when the user selects the number of bedrooms from the dropdown.

For example, if a user selects 3 bedrooms from the dropdown, 3 inputfield divs are created with all the content. But if the user then accidentally makes a boobie, and didn't mean to put in 3, but 2, then when they select '2 bedrooms' from the dropdown, the previous content for 3 bedrooms gets removed and then the 'create_fields()' function is executed.

 

How would i go about doing this?

 

i had an idea where i would add a function called 'remove_fields()', the javascript of which is shown below:

function remove_fields(bedrooms){
for(var i=1; i<=bedrooms; i++){
	//var b = document.getElementById('bedrooms');
	var oldb = document.getElementByClass('inputfield');
	removeChild(oldb);
}
}

 

This function is called within 'create_fields()' function, before the for loop is executed to generate the fields, this is shown in the code below:

//function to create bedroom fields needed
function create_fields(bedrooms){
//first remove previous inputfields if there are any
document.getElementById('bedrooms').removeChild(remove_fields(bedrooms));//<------INSERTED LINE TO REMOVE FIELDS
//loops through each bedroom until all bedrooms are processed
for(var i=1; i<=bedrooms; i++){
	document.getElementById('bedrooms').appendChild(create_inputfield(i));//find submitCustomerForm and add inputfield
	}
}

 

This doesn't work however, when the code is executed, even the fields that should be generated aren't added, i have looked on google with examples of how to do this, but what i have tried to thsu far, just doesn't work!!

 

the url for the working page is at http://www.go4home.co.uk/upload_stage2.php

 

If someone can see any errors in my code, or give me some pointers of how to this, that would be great

 

cheers guys

 

Craig