Click here to Skip to main content
15,903,388 members
Please Sign up or sign in to vote.
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

1 solution

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>
 
Share this answer
 
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 ;)

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900