dynamically generating text fields, depending on dropdown box selection...

[barbs75]

Hey guys,

 

What i want to achieve is to create additional text fields on my submission form, depending on the value that is selected from a drop down box. In this case it is for submitting house details. So when a user selects number of bedrooms, input text fields for dimensions and description appear for each bedroom that house has according the number selected from the dropdown.

 

This has to be done using javaScript, which i'm not too familiar with, i'm more experiences with php. I am trying to integrate this function within a php page, and i'm using dreamweaver cs3 as my coding tool (only using coding screen and no other tools)

 

the pseudo code for the functionality i need is:

 

drop down box

select 2 bedrooms

 

output generated

bedroom 1:

dimensions:----- x -----

description: blah blah blah...........

 

can anyone give me any insight in how to go about doing this? i have searched this forum, but failed to find any threads related to this, also have googled, but can only find really complicated versions which i just cant grasp, or you have to pay to subscribe to view the tutorials, PAIN!!!

 

cheers

 

Craig

 

 

 

[wrongmove18]

I'm not sure if this is the output you want..

 

HTML:

<form name="form1" action="page.php" method="post">
  <select name="bedrooms" onchange="create_fields(this.value)">
    <option value="0">Select a Bedroom</option>
    <option value="1">1 Bedroom</option>
    <option value="2">2 Bedroom</option>
  </select>
  <div id="container"></div>
</form>

 

Javascript:

  function create_label(labelTxt, forID){
     var label = document.createElement("label");
     label.for = forID;
     label.innerHTML = labelTxt;
     return label;
  }
  function create_textbox(name, id, size){
     var input= document.createElement("input");
     input.type="text";
     input.name=name;
     input.id=id;
     input.size=size;
     return input;
  }
  function create_textarea(name, id, cols, rows){
     var textarea= document.createElement("textarea");
     textarea.name=name;
     textarea.id=id;
     textarea.cols=cols;
     textarea.rows=rows;
     return textarea;
  }
  function create_br(){
     var br= document.createElement("br");
     return br;
  }
  function create_fields(bedrooms){
     document.getElementById("container").innerHTML = "";
     for(var i=1; i<=bedrooms; i++){
       // Create Bedroom header
       var span = document.createElement("span");
       span.innerHTML = "Bedroom " + i + ":";
       document.getElementById("container").appendChild(span);

       document.getElementById("container").appendChild(create_br());
       document.getElementById("container").appendChild(create_label("dimensions:", "bedroom_dimensionW_"+i));
       document.getElementById("container").appendChild(create_textbox("bedroom_dimensionW[]", "bedroom_dimensionW_"+i, 3));

       document.getElementById("container").appendChild(create_label(" x ", "bedroom_dimensionH_"+i));
       document.getElementById("container").appendChild(create_textbox("bedroom_dimensionH[]", "bedroom_dimensionH_"+i, 3));
       document.getElementById("container").appendChild(create_br());

       document.getElementById("container").appendChild(create_label("description:", "bedroom_description_"+i));
       document.getElementById("container").appendChild(create_textarea("bedroom_description[]", "bedroom_description_"+i, 20, 10));
       document.getElementById("container").appendChild(create_br());
       document.getElementById("container").appendChild(create_br());
     }
  }

 

 

hope it helps... 

[barbs75]

Hey wrongmove,

 

cheers for your reply dude!!

 

I started doing it a different way, as shown below:

 

<script type="text/javascript">
function addElement()//function to add a textfield to the form
{
    var selectednumber=document.getElementById("noofbed").value;
	if(selectednumber!="select")
	{
		var ni = document.getElementById('submitCustomerForm');
		var numi = document.getElementById('noofbed');
		var num = document.getElementById('noofbed').value;
		var myCounter = 1;
		//numi.value = num;
		var newdiv = document.createElement('div');
		var divClassName = 'inputfield';
		newdiv.setAttribute('class',divClassName);
		//while loop to cycle through depending on number of bedrooms
		while(myCounter < num)
		{
		ni.appendChild(newdiv);
		//var ni2 = document.getElementByClass('divClassName');
		//now add textfield to inputfield div
		//var newinput = document.createElement('input');
		//var inputClassName = 'fade';
		//newinput.setAttribute('class',inputClassName);
		//ni2.appendChild(newinput);
		var fieldDisplay = '<p class="largeblue"><strong>Bedroom '+myCounter+'</strong></p><div class="dimensions"><label class="room" for="bedroom'+myCounter+'_width">Dimensions:</label><input class="fade" name="bedroom'+myCounter+'_width" id="bedroom'+myCounter+'_width" type="text" size="5" value="" /> x <input class="fade" name="bedroom'+myCounter+'_length" id="bedroom'+myCounter+'_length" type="text" size="5" value="" /></div><div class="descriptionHolder"><label class="room" for="bedroom'+myCounter+'_desc">Description:</label><textarea name="bedroom'+myCounter+'_desc" id="bedroom'+myCounter+'_desc" cols="35" rows="5">Enter your description here.....</textarea></div><p class="largeblue"><strong>Counter is '+myCounter+'</strong></p>';
		newdiv.innerHTML = fieldDisplay;
		myCounter++;
		}	 
	}	
}
</script>

 

what i'm trying to do is, if a user clicks 3 bedrooms, then 3 of the divs that are created from the variable fieldDisplay using innerHTML should appear.

 

I can get one to appear, and the bedroom number appears fine, but only one displays, when obviously for 3 bedrooms i want three to appear? would you know how i can do that with the technique that i have used? or would i have to use something like what you have done in the example you have given me??

 

if you want to see the page, hit this link, use the number of bedrooms drop down box and  you will see what i mean, it might be easier to see it with your own eyes!!

 

http://www.go4home.co.uk/upload_stage2.php

 

cheers mate, hope you can help me!!!

 

Craig

[dualshock03]

use AJAX..