Get input field value inside iframe

Question

I create a form with Javascript only. I am trying to use Javascript to get the value of an input field that is inside an iframe . Is it possible to get the value of a field inside an iframe ?

Answer 1

Yes, this should be possible, even if the site is from a different domain.

For example, on an HTML page on my site, I have an iFrame whose content is received from another site. The content of an iFrame is a single selection field.

I need to be able to read the selected value on my site. In other words, I need to use a select list from another domain inside my own application. I do not control any server settings.

Initially, therefore, we may be tempted to do something similar (simplified):

HTML on my website:

 <iframe name='select_frame' src='http://www.othersite.com/select.php?initial_name=jim'></iframe> <input type='button' name='save' value='SAVE'> 

HTML iFrame content (downloaded from select.php to another domain):

 <select id='select_name'> <option value='john'>John</option> <option value='jim' selected>Jim</option> </select> 

JQuery

 $('input:button[name=save]').click(function() { var name = $('iframe[name=select_frame]').contents().find('#select_name').val(); }); 

However, I get this javascript error when I try to read the value:

A frame with the source “ http://www.myownsite.com ” from accessing the frame with the source code http://www.othersite.com is blocked. Protocols, domains and ports must be consistent.

To get around this problem, it seems that you can indirectly pass an iFrame from a script to your own site and have a script to read content from another site using a method like file_get_contents() or curl , etc.

So, create a script (for example: select_local.php in the current directory) on your own site with the same contents:

PHP content select_local.php:

 <?php $url = "http://www.othersite.com/select.php?" . $_SERVER['QUERY_STRING']; $html_select = file_get_contents($url); echo $html_select; ?> 

Also change the HTML to call this local (instead of remote) script:

 <iframe name='select_frame' src='select_local.php?initial_name=jim'></iframe> <input type='button' name='save' value='SAVE'> 

Your browser should now think that it is loading iFrame content from the same domain.

Answer 2

 <iframe id="upload_target" name="upload_target"> <textarea rows="20" cols="100" name="result" id="result" ></textarea> <input type="text" id="txt1" /> </iframe> 

You can get the value using jQuery

 $(document).ready(function(){ alert($('#upload_target').contents().find('#result').html()); alert($('#upload_target').contents().find('#txt1').val()); }); 

only works with the same domain link

Answer 3

Without an iframe We can do this with jQuery, but it will only give you the HTML source and dynamic links or html tags. Almost the same as php solution, but in jQuery :) Code ---

 var purl = "http://www.othersite.com"; $.getJSON('http://whateverorigin.org/get?url=' + encodeURIComponent(purl) + '&callback=?', function (data) { $('#viewer').html(data.contents); }); 

Answer 4

 document.getElementById("idframe").contentWindow.document.getElementById("idelement").value;