Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Dec 2008
    Location
    NJ, USA
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Add option in select element on parent window

    Hi,
    I would like to know a good way to add an option to a select element on the parent window. A child window gets pop up on click of a button. Then some data is collected on that window from user. On click of OK, I have to add a new option to the select element on the parent window. I do not want to submit the parent window for that. I tried it with following code. It worked well in Firefox 3.0.4, but it is not working with IE 6.0. It is showing error 'No such interface is supported'.

    var obj = window.opener.document.parentFormName.SelectElementName;
    opt = document.createElement("option");
    opt.appendChild(document.createTextNode("TestText"));
    opt.value = "TestVal";
    obj.appendChild(opt);


    Are these methods not available in IE? Is there any other way for IE?
    Any help is appreciated.

    Thanks,
    Amit

  • #2
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    I just wrote this script for someone else today, all you need to do is call these functions from the iframe via parent.functionName():
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Example</title>
    <style type="text/css">
    body
    {
    font-family: verdana,arial,sans-serif;
    font-size: 12px;
    }
    
    form span.title
    {
    font-weight: bold;
    margin: 0 4px 0 0;
    }
    </style>
    <script type="text/javascript">
    // <![CDATA[
    
    /*Author: itsallkizza*/
    
    function add_option_to(select,option_name,option_value)
    	{
    	if (document.createElement)
    		{
    		var new_option = document.createElement("option");
    		new_option.value = option_value;
    		new_option.innerHTML = option_name;
    		if (select.appendChild)
    			{
    			select.appendChild(new_option);
    			return new_option;
    			}
    		}
    	return null;
    	}
    
    function remove_option_by_index(select,index)
    	{
    	if (select.removeChild && select.options && select.options.length > index)
    		{
    		select.removeChild(select.options[index]);
    		return true;
    		}
    	return false;
    	}
    
    function addNewOption(form_element)
    	{
    	var new_name = form_element.new_option_name.value || false;
    	var new_value = form_element.new_option_value.value || "";
    	if (!new_name) return false;
    	add_option_to(document.getElementById(form_element.select_id.value),new_name,new_value);
    	return false;
    	}
    
    function removeOption(form_element)
    	{
    	var index = form_element.option_index.value || false;
    	if (!index || isNaN(index)) return false;
    	remove_option_by_index(document.getElementById(form_element.select_id.value),index);
    	return false;
    	}
    // ]]>
    </script>
    </head>
    <body>
    
    <form onsubmit="return addNewOption(this)">
    	<input type="hidden" name="select_id" value="my_select" />
    	<span class="title">New Option Name:</span><input type="text" name="new_option_name" />
    	<span class="title">New Option Value:</span><input type="text" name="new_option_value" />
    	<input type="submit" value="Add New Option" />
    </form>
    <form onsubmit="return removeOption(this)">
    	<input type="hidden" name="select_id" value="my_select" />
    	<span class="title">Remove Option Index:</span><input type="text" name="option_index" />
    	<input type="submit" value="Remove Option" />
    </form>
    
    <select id="my_select">
    	<option value="apples">Apples</option>
    	<option value="bananas">Bananas</option>
    	<option value="oranges">Oranges</option>
    </select>
    
    </body>
    </html>
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #3
    New to the CF scene
    Join Date
    Dec 2008
    Location
    NJ, USA
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi..itsallkizza ,
    Thanks for your suggestion and example.
    I had preivously tried with only id of element in getElementById function. But your example shows you have taken object of the value in select element. I tried to do that and i got null as object.
    Your code shows , adding an option to an element on the same HTML page. But, in my case, I have to set the option in parent HTML page. Is it making any difference here?

  • #4
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    How's this...

    Example: http://buildyourownbagel.com/test/main.html

    main.html:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Example</title>
    <style type="text/css">
    </style>
    <script type="text/javascript">
    // <![CDATA[
    
    /*Author: itsallkizza*/
    
    function add_option_to(select,option_name,option_value)
    	{
    	if (document.createElement)
    		{
    		var new_option = document.createElement("option");
    		new_option.value = option_value;
    		new_option.innerHTML = option_name;
    		if (select.appendChild)
    			{
    			select.appendChild(new_option);
    			return new_option;
    			}
    		}
    	return null;
    	}
    
    function remove_option_by_index(select,index)
    	{
    	if (select.removeChild && select.options && select.options.length > index)
    		{
    		select.removeChild(select.options[index]);
    		return true;
    		}
    	return false;
    	}
    
    function addOptionTo(select_id,new_option_name,new_option_value)
    	{
    	if (!new_option_name || !select_id) return false;
    	add_option_to(document.getElementById(select_id),new_option_name,(new_option_value || ""));
    	}
    
    function removeOptionFrom(select_id,index)
    	{
    	if (!index || isNaN(index) || !select_id) return false;
    	remove_option_by_index(document.getElementById(select_id),index);
    	}
    // ]]>
    </script>
    </head>
    <body>
    
    <iframe src="iframed_page.html" style="width:900px;height:200px;"></iframe>
    
    <br /><br />
    
    <select id="my_select">
    	<option value="apples">Apples</option>
    	<option value="bananas">Bananas</option>
    	<option value="oranges">Oranges</option>
    </select>
    
    </body>
    </html>
    iframed_page.html:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Iframed Page</title>
    <style type="text/css">
    body
    {
    font-family: verdana,arial,sans-serif;
    font-size: 12px;
    }
    
    form span.title
    {
    font-weight: bold;
    margin: 0 4px 0 0;
    }
    </style>
    <script type="text/javascript">
    // <![CDATA[
    function addNewOption(form_element)
    	{
    	parent.addOptionTo(form_element.select_id.value,form_element.new_option_name.value,form_element.new_option_value);
    	return false;
    	}
    
    function removeOption(form_element)
    	{
    	parent.removeOptionFrom(form_element.select_id.value,form_element.option_index.value);
    	return false;
    	}
    // ]]>
    </script>
    </head>
    <body>
    
    <form onsubmit="return addNewOption(this)">
    	<input type="hidden" name="select_id" value="my_select" />
    	<span class="title">New Option Name:</span><input type="text" name="new_option_name" />
    	<span class="title">New Option Value:</span><input type="text" name="new_option_value" />
    	<input type="submit" value="Add New Option" />
    </form>
    <form onsubmit="return removeOption(this)">
    	<input type="hidden" name="select_id" value="my_select" />
    	<span class="title">Remove Option Index:</span><input type="text" name="option_index" />
    	<input type="submit" value="Remove Option" />
    </form>
    
    </body>
    </html>
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by ITSAMB View Post
    Hi,
    It worked well in Firefox 3.0.4, but it is not working with IE 6.0. It is showing error 'No such interface is supported'.

    var obj = window.opener.document.parentFormName.SelectElementName;
    opt = document.createElement("option");
    opt.appendChild(document.createTextNode("TestText"));
    opt.value = "TestVal";
    obj.appendChild(opt);


    Are these methods not available in IE? Is there any other way for IE?
    Any help is appreciated.

    Thanks,
    Amit
    You should have created the element in the proper Global Window Object:
    Code:
    opt = opener.document.createElement("option");
    That is all. IE is more strict about that.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • Users who have thanked Kor for this post:

    ITSAMB (12-17-2008)

  • #6
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    I've never used "opener" and IE works fine over here...
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • Users who have thanked itsallkizza for this post:

    ITSAMB (12-17-2008)

  • #7
    New to the CF scene
    Join Date
    Dec 2008
    Location
    NJ, USA
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Kor View Post
    You should have created the element in the proper Global Window Object:
    Code:
    opt = opener.document.createElement("option");
    That is all. IE is more strict about that.
    Hi Kor,
    You were correct. I changed it to opener.window and it worked well in IE.
    Thank you Kor and itsallkizza for your help.

    - amit

  • #8
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by itsallkizza View Post
    I've never used "opener" and IE works fine over here...
    I don't think so. Maybe your code was written on the opener as well, not on the child window. If you want to create an element on opener, on parent or on pop-up window, and the code does not belong to those documents, you must specify the Global Object for IE.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #9
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    I misunderstood what opener actually does - it references the opener lol. I didn't catch this because I didn't know he was trying to access his parent document with that line.

    I've never used opener before because I modularize my code in such a fashion that no opened document has control over the parent. I always send calls to parent functions in order to validate and have the "last say" so to speak, as you can see by the script I posted above.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #10
    New Coder
    Join Date
    Nov 2008
    Location
    New Delhi,India
    Posts
    26
    Thanks
    1
    Thanked 3 Times in 3 Posts
    this behavior is a bug in internet explorer. You cannot set the innerHTML of a select box.
    I faced a similar situation few weeks ago. Some googling revealed that this is a bug in IE. You can read details on my blog

    thanks
    Vijay

  • #11
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    I'm glad it doesn't let you add options via innerHTML - that so called "bug" precludes bad coding.

    Never use innerHTML to add objects. It's bad form on so many levels. Read the posts above for how to add options to selects cross-browser.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #12
    New Coder
    Join Date
    Nov 2008
    Location
    New Delhi,India
    Posts
    26
    Thanks
    1
    Thanked 3 Times in 3 Posts
    MSDN itself says this is a bug .
    See here http://support.microsoft.com/kb/276228 and innerHTML is really helpful while creating DOM.

  • #13
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    I am aware they call it a bug - it is a bug. But it's a bug that in my opinion is beneficial for programmers learning DOM manipulation.

    Using innerHTML to add elements to a page works perfectly fine in most cases. However, I say it is "bad form" because you aren't using DOM methods to add the elements. This can backfire as you write more complicated scripts that need to access those elements via the DOM right away. When you use innerHTML to add elements, the elements aren't always added to the DOM immediately (in some cases, never). This means its possible in some browsers those elements won't inherit the DOM native functions and won't be added to DOM reference arrays.

    As an example, if you add an iframe dynamically using innerHTML, the window.frames reference array is not immediately updated (in some cases, it's never refreshed into the DOM). This can cause problems if your code needs to access that iframe in relation to other frames on the page, or if you need to manipulate the new iframe's src or other attributes. As an example, iirc in Opera you can't access iframes' src attribute using document.getElementById - you can only access it using the window.frames array. This means if you add the iframe via innerHTML instead of DOM methods, you can't rely on any subsequent script to change or read its src.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com


  •  

    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
    •