Add option in select element on parent window

ITSAMB · 12-16-2008, 10:05 PM

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

itsallkizza · 12-16-2008, 10:49 PM

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>

ITSAMB · 12-17-2008, 04:44 AM

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?

itsallkizza · 12-17-2008, 06:24 AM

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>

Kor · 12-17-2008, 01:27 PM

Quote:

Originally Posted by ITSAMB

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.

itsallkizza · 12-17-2008, 06:06 PM

I've never used "opener" and IE works fine over here...

ITSAMB · 12-17-2008, 09:45 PM

Quote:

Originally Posted by Kor

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

Kor · 12-18-2008, 06:21 AM

Quote:

Originally Posted by itsallkizza

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.

itsallkizza · 12-18-2008, 06:25 AM

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.

v08i · 12-18-2008, 06:40 AM

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

itsallkizza · 12-18-2008, 03:16 PM

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.

v08i · 12-19-2008, 05:34 AM

MSDN itself says this is a bug .
See here http://support.microsoft.com/kb/276228 and innerHTML is really helpful while creating DOM.

itsallkizza · 12-19-2008, 08:21 AM

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.