Get value of input field inside an iframe
If the framed site is on a different domain, you cannot directly read the value from the remote iframe. Even so, the answer is yes: It is still possible to get that value, by proxying the framed site through your own domain.
For example, in an HTML page on my site I have an iFrame whose contents are sourced from another website. The iFrame content is a single select field.
I need to be able to read the selected value on my site. In other words, I need to use the select list from another domain inside my own application. I do not have control over any server settings.
Initially therefore we might be tempted to do something like this (simplified):
HTML in my site:
<iframe name='select_frame' src='http://www.othersite.com/select.php?initial_name=jim'></iframe>
<input type='button' name='save' value='SAVE'>
HTML contents of iFrame (loaded from select.php
on 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 receive this javascript error when I attempt to read the value:
Blocked a frame with origin "http://www.myownsite.com" from accessing a frame with origin "http://www.othersite.com". Protocols, domains, and ports must match.
To get around this problem, you can proxy the content at "http://www.othersite.com", hosting it instead on "http://www.myownsite.com". For example, if you are using PHP, have a PHP script that reads the contents from the other 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 contents similar to this:
PHP content of select_local.php:
<?php
$url = "http://www.othersite.com/select.php?" . $_SERVER['QUERY_STRING'];
$html_select = file_get_contents($url);
echo $html_select;
?>
Also modify the HTML to call this local (instead of the remote) script:
<iframe name='select_frame' src='select_local.php?initial_name=jim'></iframe>
<input type='button' name='save' value='SAVE'>
Now your browser should think that it is loading the iFrame content from the same domain.
Fill input field inside an iframe when link outside of iframe is clicked
Use .contents()
to access the contents of an iframe.
function reply_click(element)
{
$("#iframeID").contents().find("#element_11").val(element.dataset.filledValue);
}
Replace iframeID
with the actual ID of the iframe.
how to post a field value which is available in iframe in php
try this,
<form action='data.php' method='post'>
<input type='text' name='username' id='username'>
<iframe id="iframe_pass" src='password.php'>
</iframe>
<input id="submit" type='button' value="submit">
</form>
<p id="password_from_frame"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$("#submit").on('click', function(){
var pass_field = $("#iframe_pass").contents().find("#password");
var username = $("#username");
var data = {username : username.val(), password : pass_field.val()};
// make an ajax call to submit form
$.ajax({
url : "data.php",
type : "POST",
data : data,
success : function(data) {
console.log(data);
alert(data);
},
error : function() {
}
});
});
// you can use keyup, keydown, focusout, keypress event
$("#iframe_pass").contents().find("#password").on('keyup', function(){
$("#password_from_frame").html($(this).val());
});
</script>
and password.php
<input type='text' name='password' id='password'>
and on the data.php use the print_r to send back the value to the ajax request
print_r($_POST);
Related Topics
Difference Between Knockout View Models Declared as Object Literals VS Functions
How to Get the Function Name from Within That Function
JavaScript Swap Array Elements
Verify If a Point Is Land or Water in Google Maps
JavaScript Objects: Get Parent
How to Listen to the Form Submit Event in JavaScript
Add Event Listener on Elements Created Dynamically
Building a Promise Chain Recursively in JavaScript - Memory Considerations
Parsing "Relaxed" JSON Without Eval
Url Hash-Bang (#!/) Prefix Instead of Simple Hash (#/) in Angular 1.6
Why Does Usestate Cause the Component to Render Twice on Each Update
Why Is My Infinite Loop Blocking When It Is in an Async Function
What Are the Differences Between Deferred, Promise and Future in JavaScript
Difference Between Textcontent VS Innertext
How to Call Reduce on an Array of Objects to Sum Their Properties
Get Hours Difference Between Two Dates in Moment Js
Performance Differences Between Visibility:Hidden and Display:None