Some javascript dynamic form goodness

johnnyv · September 5, 2003

Greetings

If you need to use html forms for web database apps there can be a few annoying problems.

Say you have a selects which contain product names, you select a product then fill in the qty etc..

you will find that when you have several thousand items in your select that it is a pain in the ass to use.

Also you may want to allow multiple items to be submitted, but how many will you need? loading a page with 20 selects each having several thousand options takes a long time, and is pretty wastefull if the user only ends up using 2 of them, also it just looks fugly doing it that way.

So i will show you a method of splitting up your selects into two and there by reducing the amount of options that users have to deal with, aswell as showing you a way to make more dynamic (i can't think of a better term) form elements.

Oh this will probably only work in Mozilla as i use w3c dom stuff but you never know untill you try i guess.

basically it works as follows:

you query your database in php and generate a bunch of javascript arrays which contain select option values and text descriptions grouped by catergory (i won't explain the php stuff because php is so easy by the time i wrote out an explanation you could have learn't the language).

you have a <div> containing your form line(contains inputs selects whatever) with the div's style set to not display, this is the template from with we create the form elements as we need them

you then have javascript functions that clone the template div and insert in into the form (using a <span> within the form as the parent node)while changing the elements names and id's so that you get unique values usefull for the form processing after submission.

<html>

 <head>

   <title>Muaahahaahahahahahahahaahaaa</title>

   <meta content="">

   <style></style>



<script language="javascript">

<!--

/* here is the array list where the select gets it's values from */

var pick_a_catergory = new Array("0","Pick a code");

var catergory1 = new Array("item1","cat","item2","dog","item3","cow","item4","frog","item5","fish");

var catergory2 = new Array("item6","car","item7","bus","item8","truck","item9","crane");

var catergory3 = new Array("item10","blah","item11","blah2","item12","blah3","item13","blah4","item14","blah5","item15","blah6");





function find_the_next_element(element)

{

/*  Possible infinite loop here if no siblings maybe should just use a i < 100 or something  */

var condition = true;

while(condition == true)

{

 if(element.nodeType != 1)

 {

 element = element.nextSibling;

 }

 else

 {

 condition = false;

 }

}

return element;

}



function swapOptions(the_select)

{

var the_array = eval(the_select.options[the_select.selectedIndex].text);

var next_select = document.getElementById(the_select.id).nextSibling;

next_select = find_the_next_element(next_select);

setOptionText(next_select, the_array);

}



function setOptionText(the_select, the_array)

{

the_select.options.length = the_array.length/2;

for (loop=0; loop < the_select.options.length; loop++)

{

var value_counter = loop * 2;

var text_counter = value_counter + 1;

the_select.options[loop].value = the_array[value_counter];

the_select.options[loop].text = the_array[text_counter];

}

}





var counter = 0; // counter for naming the elements



function moreFields()

{

counter++;

var newFields = document.getElementById('readroot').cloneNode(true);

newFields.id = '';

newFields.style.display = 'block';

var newField = newFields.childNodes;

for (var i=0;i<newField.length;i++)

{

 var theName = newField[i].name

 if(theName)

 {

 newField[i].name = theName + counter; /* we need the name for php processing $_POST later */

 newField[i].id = theName + counter; /* need an id for the javascript manipulation because there is no getElementByName() only Id*/

 }

}

var insertHere = document.getElementById('writeroot');

insertHere.parentNode.insertBefore(newFields,insertHere);

}



// -->

</script>



</head>

 <body onload="moreFields()">



<div id="readroot" style="display: none">

<input type="button" value="Remove" style="font-size: 10px" onClick="this.parentNode.parentNode.removeChild(this.parentNode);">



<select id="catergory" name="catergory" onChange="swapOptions(this);">

<option>pick_a_catergory</option>

<option>catergory1</option>

<option>catergory2</option>

<option>catergory3</option>

</select>



<select id="selected_item" name="selected_item" STYLE="width: 450px">

<option></option>

</select>



<input type=number name=qty size=6 value=0 align=right>

</div>



<form method=post>



<span id="writeroot"></span>

<p class="hr"> </p>



<input type="button" value="Add New Line" onClick="moreFields()"><br>

<input type="submit" value="Send form">



</form>





 </body>

</html>

Ok so a little more info.

javascript function moreFields()

This function clones the "readroot" template div and inserts it within the form.

counter++; used for making unique id and names for the dom elements.

var newFields = document.getElementById('readroot').cloneNode(true); find the element readroot and clone it

newFields.id = ''; remove the "readroot" id from the cloned div

newFields.style.display = 'block'; display the div, the template is not displayed

var newField = newFields.childNodes;

for (var i=0;i<newField.length;i++)

{

 var theName = newField[i].name

 if(theName)

 {

 newField[i].name = theName + counter; /* we need the name for php processing $_POST later */

 newField[i].id = theName + counter; /* need an id for the javascript manipulation because the is no getElementByName() only Id*/

 }

}

Ok so for each of the cloned divs child nodes, if the node has a name change the name to the name + the value of the variable counter, do the same for id.

var insertHere = document.getElementById('writeroot');

insertHere.parentNode.insertBefore(newFields,insertHere);

We find the span that has the id of "writeroot" and insert the div before the span. the parentNode will be the <form> element in this case.

javascript function swapOptions(the_select)

this function is called when one of the catergory selects values is change by the user

It graps the value of the selects selected index and then calls the find_the_next_element(element) function to find the location of the second select. Once found the setOptionText(the_select, the_array) is called which populates the second selects options using the array the matches the catergory of the first select.

Confused?

Good :twisted:

I just posted this because it was so hard to find info on this particular sort of thing and it might make it a bit easier for somebody here in the future.

Sign In

Some javascript dynamic form goodness

Recommended Posts

johnnyv

Link to comment

Share on other sites

Join the conversation

Browse

Activity