drop down boxes return to default when adding more content with innerHTML

[youan]

Hi

I am adding drop down boxes to a div using javascript on a user action, if these boxes are assigned a value by the user then the user adds more boxes the values previously selected are cleared.

Could anyone please explain why this is happening?

It does not happen if an option is selected in the HTML when the page is loaded.

youan

[Fang]

Show the code you are using.

[youan]

this is the function to append a new drop down to the required container called with append = true

function ajax_content(obj, url, params, append)
	{
		if(typeof(obj != 'object'))
		{
			obj = document.getElementById(obj);
		}
		if(params)
		{
			url = url + params;
		}
		var xmlhttp = new GetXmlHttp();
		if (xmlhttp)
		{
			xmlhttp.onreadystatechange = function ()
			{
				if (xmlhttp && xmlhttp.readyState==4)
				{//we got something back..
					if (xmlhttp.status==200)
					{
						if(typeof obj == 'object')
						{
							if(append)
							{
								obj.innerHTML += xmlhttp.responseText;
							}
							else
							{
								obj.innerHTML =  xmlhttp.responseText;
							}
						}
						else
						{
							if(append)
							{
								document.getElementById(obj).innerHTML += xmlhttp.responseText;
							}
							else
							{
								document.getElementById(obj).innerHTML = xmlhttp.responseText;
							}
						}
					}
				}
			}
			xmlhttp.open("POST",url,true);
			xmlhttp.send(null);
		}
	}

and this is the code which creates the drop down box

	<div id="selectdiv<?php print $_GET['num']; ?>">
		<select id="select_hour<?php print $_GET['num']; ?>" name="select_hour<?php print $_GET['num']; ?>">
<?php
		for($i = 0; $i < 24; $i++)
		{
?>
			<option value="<?php print $i; ?>"><?php print $i < 10 ? "0".$i : $i; ?></option>
<?php
		}
?>
		</select>
		:
		<select id="select_min<?php print $_GET['num']; ?>" name="select_min<?php print $_GET['num']; ?>">
<?php
		for($i = 0; $i <= 60; $i += 15)
		{
?>
			<option value="<?php print $i; ?>"><?php print $i < 10 ? "0".$i : $i; ?></option>
<?php
		}
?>
		</select>
	</div>

[Fang]

Are the id's and name's of the added select unique to the document?

[youan]

yes they are

[Fang]

Can you give a link?

[youan]

its online now at http://youan.host56.com/ attached is a copy of the file as it appears, the first select box changes the number of selects to the right of it

[youan]

I have been playing around with javascript and have found that if the select boxes are created and added solely in javascript without the ajax call then the values are not defaulted, i have updated the above link to use the two different methods the ajax one uses the ajax_content function above whilst the javascript option uses the function below

	function addselect(formdiv, num)
	{
		var form = document.getElementById(formdiv);
		num = parseInt(num);
		var selectdiv = document.createElement('div');
		selectdiv.setAttribute('id', 'formSelect'+num);
		selectdiv.innerHTML = 'Select '+num+' ';
		var select = document.createElement('select');
		select.setAttribute('id', 'select_hour'+num);
		select.setAttribute('name', 'select_hour'+num);
		for(var i = 0; i < 24; i++)
		{
			var option = document.createElement('option');
			option.value = i;
			option.innerHTML = (i < 10 ? "0"+i : i);
			select.appendChild(option);
		}
		selectdiv.appendChild(select);
		selectdiv.innerHTML += " : ";
		select = document.createElement('select');
		select.setAttribute('id', 'select_min'+num);
		select.setAttribute('name', 'select_min'+num);
		for(var i = 0; i <= 60; i+=15)
		{
			var option = document.createElement('option');
			option.value = i;
			option.innerHTML = (i < 10 ? "0"+i : i);
			select.appendChild(option);
		}
		selectdiv.appendChild(select);
		form.appendChild(selectdiv);
	}

can anyone explain why the two methods produce this different result, and tell me if there is a way to make the ajax method perform the same as the purely javascript function

Many Thanks

attached is an updated copy of the one previously posted

[youan]

I found this article which mentions the use of innerHTML rewriting the content of the div it was adding to, hence wiping previous values.

My first attempts were simply rewriting div elements and adding new innerhtml to the div for each requested form field. This solution worked, but it rewrote the entire div, thereby removing any pre-filled form elements.

Unfortunately it does not say why this is the case, I'm curious does anyone know why innerHTML works this way?

With this new information I have changed the ajax method of adding the drop down boxes to include the creation of a containing div element with javascript then calling ajax_content to put the content in the newly created div. This gives the desired results and means that I don't have to write loads of lines of javascript to add all the elements to the div.

var form = document.getElementById(formdiv);
var div = document.createElement('div');
div.setAttribute('id', 'formSelect'+(i+curnumselects));
form.appendChild(div);
ajax_content('formSelect'+(i+curnumselects), url, params+"&num="+(i + curnumselects), 1);

The new code is attached and uploaded to the demo page with the three different methods of adding the drop down boxes.