javascript get element id

Question

0.00/5 (No votes)

See more:

Hi everyone

I have 2 html pages ....
the first one has iframe loading the second page and a list "<select>"

and the other page has the input button

I want to add an item to the list that is in master page

and this is the code:

JavaScript

function addNewListItem(){
var htmlSelect=document.getElementById('selectYear');
var optionValue=document.getElementById('txtYearValue');
var optionDisplaytext=document.getElementById('txtYearDisplayValue');

if(optionValue.value==''||isNaN(optionValue.value)){
alert('please enter option value');
optionValue.focus();
return false;
}

if(optionDisplaytext.value==''||isNaN(optionDisplaytext.value)){
alert('please enter option display text');
optionDisplaytext.focus();
return false;
}

if(isOptionAlreadyExist(htmlSelect,optionValue.value)){
alert('Option value already exists');
optionValue.focus();
return false;
}

if(isOptionAlreadyExist(htmlSelect,optionDisplaytext.value)){
alert('Display text already exists');
optionDisplaytext.focus();
return false;
}

var selectBoxOption = document.createElement("option");
selectBoxOption.value = optionValue.value;
selectBoxOption.text = optionDisplaytext.value;
htmlSelect.add(selectBoxOption, null);
alert("Option has been added successfully");
return true;

}


       function isOptionAlreadyExist(listBox,value){
                var exists=false;
                for(var x=0;x<listBox.options.length;x++){
                if(listBox.options[x].value==value || listBox.options[x].text==value){
                exists=true;
                break;
                }
                }
                return exists;
        }

HTML

<table border="0" align="left">
<tr>
<td align="right">Year</td>
<td align="left"></td>
</tr>
<tr>
<td align="right">Option Value</td>
<td align="left"><input name="txtYearValue" type="text" id="txtYearValue" /></td>
</tr>
<tr>
<td align="right">Option Display Text</td>
<td align="left"><input name="txtYearDisplayValue" type="text" id="txtYearDisplayValue" /></td>
</tr>
<tr>
<td align="right"> </td>
<td align="left"><input name="btnAddItem" type="button" id="btnAddItem" value="Add Option" onclick="javaScript:addNewListItem();" /></td>
</tr>
</table>

the master page has "<iframe>" the load the second page
and the code in the master page is:

HTML

<select name="selectYear" id="selectYear">
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
</select>

Posted 28-Dec-12 9:50am

davemas

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

**Zoltán Zörgő** · Accepted Answer · 2012-12-28T09:58:00

Solution 1

If you don't break the same-origin policy, you can use: window.parent.document.getElementById()

Sample
h1.html

HTML

<select name="selectYear" id="selectYear">
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
</select>
<iframe src="h2.html">

h2.html

HTML

<script type="text/javascript">
function addYear(year){
	var select = window.parent.document.getElementById("selectYear");
	select.options[select.options.length] = new Option(year, year);
}
</script>
<button onclick='addYear(2005);'>Add year 2005</button>

Posted 28-Dec-12 9:58am

Zoltán Zörgő

Updated 28-Dec-12 10:08am

v3

Comments

davemas 28-Dec-12 16:40pm

it doesn't work my friend!!!

Zoltán Zörgő 28-Dec-12 16:51pm

It works my fried! I have tested it with IE, FF, and Chrome (this one needs to load the pages from a web server; doesn't work if loaded from file system)
Copy my samples, and see for yourself.

davemas 28-Dec-12 17:06pm

you mean I need to upload the pages to the server and the try it

Zoltán Zörgő 28-Dec-12 17:09pm

With IE you don't need to, only with Chrome. Just create the two files in the same folder, copy paste their content, and open h1.html. You will see the iframe and the dropdown with the original year list. Than click on the button inside, and you will have 2005 in the dropdown. I repeat, with IE9 works also directly from filesystem.

davemas 28-Dec-12 17:09pm

it's done thank you sooooooooooooooooooo much ;)

Zoltán Zörgő 28-Dec-12 17:10pm

You are welcome. Than feel free to accept my answer.

davemas 28-Dec-12 17:15pm

I'm working with it really you helped me ;) thank you again

davemas 28-Dec-12 18:18pm

another thing please....
this option only add numbers and doesn't accept letters...what shout I do???

davemas 28-Dec-12 18:22pm

I got it I add "" before and after the letters thanks

Zoltán Zörgő 29-Dec-12 3:22am

Great. Than you have the solution. Feel free to accept my solution also on the site. :)