www.webdeveloper.com
Results 1 to 9 of 9

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

Hybrid View

  1. #1
    Join Date
    Jan 2010
    Posts
    6

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

    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

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Show the code you are using.

  3. #3
    Join Date
    Jan 2010
    Posts
    6
    this is the function to append a new drop down to the required container called with append = true
    Code:
    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
    Code:
    	<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>

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Are the id's and name's of the added select unique to the document?

  5. #5
    Join Date
    Jan 2010
    Posts
    6
    yes they are

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Can you give a link?

  7. #7
    Join Date
    Jan 2010
    Posts
    6
    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
    Attached Files Attached Files
    Last edited by youan; 01-27-2010 at 06:47 AM.

  8. #8
    Join Date
    Jan 2010
    Posts
    6

    information update

    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

    Code:
    	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
    Attached Files Attached Files

  9. #9
    Join Date
    Jan 2010
    Posts
    6

    still digging

    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.

    Code:
    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.
    Attached Files Attached Files

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles