I have an iframe in my page and how can i get a the value of t text box in the frame from my parent page on a button click?
here is my code
<div>
<iframe src="test.html" >
<input type=text id="parent_text">
<input type="button">
</div>
here is d test.html
<input type="text" id="frame_text">
thanks
Something like this:
var iframe = document.getElementById('iframeId');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var input = innerDoc.getElementById('frame_text');
First you get the the iframe.
Then you get the first valid dom document from inside the iframe.
And finaly get the input box.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function getIframeText() {
var iframe0 = document.getElementById("iframe0");
var iframe0document=iframe0.contentDocument||iframe0.contentWindow.document;
var inputIframe = iframe0document.getElementById("frame_text");
alert(inputIframe.value);
}
</script>
</head>
<body>
<div>
<button onclick="getIframeText()">get iframe text</button>
<iframe id="iframe0" src="test.html" >
<input type=text id="parent_text">
</div>
</body>
</html>
If you have Div/ input as follows in one Iframe
<iframe id="ifrmReportViewer" name="ifrmReportViewer" frameborder="0" width="980"
<div id="EndLetterSequenceNoToShow" runat="server"> 11441551 </div> Or
<input id="txtSequence" type="text" value="10500101" />
<form id="form1" runat="server">
<div style="clear: both; width: 998px; margin: 0 auto;" id="divInnerForm">
Some Text
</div>
</form>
</iframe>
Then you can find the text of those Div using the following code
var iContentBody = $("#ifrmReportViewer").contents().find("body");
var endLetterSequenceNo = iContentBody.find("#EndLetterSequenceNoToShow").text();
var txtSequence = iContentBody.find("#txtSequence").val();
var divInnerFormText = iContentBody.find("#divInnerForm").text();
I hope this will help someone.
$('iframe').contents().find('#mytextbox').val("myvalue");
Here is parent page code (I mean main page call to iframe):
<script>
function frameClick(string){
var name=string;
document.getElementById("parent_text")=name;
}
</script>
<div>
<iframe src="test.html" id="frame1">
<input type=text id="parent_text">
</div>
Here is iframe code(test.html):
<form method="post" action="" id='frm1' >
<input type="text" id="frame_text">
<input type="button" id="btm1" name="hangup" onclick="parent.frameClick(this.form.frame_text.value);" value="submit">
</form>
Related
When I'm running this code it is not showing me the message which I want to display (i.e: res).Suppose I'm giving an input "$code$".Can anyone just help me out?
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h1>Enter a sample message</h1>
<form>
<input type="text" name="a" id="a">
<button onclick="parse()">submit</button>
<p id="a"></p>
</form>
<script>
function parse(){
var msg=document.getElementById("a").innerHTML;
var res=msg.replace("$code$","1101");
document.getElementById("a").innerHTML=res;//this is to print res.
}
</script>
</body>
</html>
Two elements can't have the same ID. Further, an input element's value can not be obtained using the innerHTML property. Also, on clicking the submit button, the page will reload since the form get's submitted. To prevent that, call the function parse in an onsubmit on the <form> tag, and return false from the function.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h1>Enter a sample message</h1>
<form onsubmit="return parse();">
<input type="text" name="a" id="a">
<button type="submit">submit</button>
<p id="b"></p>
</form>
<script>
function parse(){
var msg = document.getElementById("a").value;
document.getElementById("b").innerHTML = msg;
return false;
}
</script>
</body>
</html>
Check this:
<form>
<input type="text" name="a" class="input_field" id="a">
<button type="button" onclick="parse()">submit</button>
<p id="a"></p>
</form>
<script>
function parse(){
var msg=document.getElementById("a").innerHTML;
var form = document.getElementsByTagName("form")[0]
msg = form.getElementsByClassName("input_field")[0].value;//this is to print res.
}
</script>
I added type="button" to the button to prevent the form from reloading the page
I need to populate a text input field on the parent page from a button click inside an iframe (same domain). I've been using the following to accomplish the opposite (parent to iframe) but I'm not sure how to reverse the process. Any help would be appreciated.
parent.html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#submit').click(function(){
var iframe = document.getElementById('myiframe');
var doc = iframe.contentDocument || iframe.contentWindow.document;
var elem = document.getElementById('username');
doc.getElementsByName('user')[0].value = elem.value;
});
});
</script>
<body>
<input type="text" id="username">
<input type="submit" id="submit">
<iframe id="myiframe" frameborder="1" src="child.html"></iframe>
</body>
child.html:
<body>
<input type="text" name="user" id="user">
</body>
I wanna fill input with my iframe-in Value.
i have two html file. 1.html and 2.html
First one (1.html) is like that:
<html>
<head>
<title>IFRAME TEST</title>
</head>
<body>
<input type="text" value="" id="mylovelytextbox"><br />
<iframe src="2.html" id="mylovelyiframe">
</body>
</html>
And second one (2.html) is like that:
<html>
<head>
<form method="get" action="">
<input type="hidden" name="thisone" value="mylovelychangedvalue">
</form>
</body>
</html>
I wanna fill mylovelytextbox in 1.html with thisone's value.
How can i do that?
-Sorry for bad english :(
Edit:
I run the code with #stano's help :) Now, my code is like that:
<html> <head> <title>IFRAME TEST</title> </head> <body> <input type="text" value="" id="mylovelytextbox"><input type="button" onClick="var iframe = document.getElementById('mylovelyiframe');console.log(iframe,doc,el);var doc = iframe.contentDocument || iframe.contentWindow.document;var el = document.getElementById('mylovelytextbox');el.value = doc.getElementsByName('thisone')[0].value;" value="Click"><br /> <iframe sandbox="allow-same-origin allow-scripts" src="2.html" id="mylovelyiframe"></iframe> </body> </html>
Thanks a lot, Stano!
At first fix those missing tags
<iframe src="2.html" id="mylovelyiframe"></iframe>
</head><body>
and add some doctype, then you can use
<script type="text/javascript">
var iframe = document.getElementById('mylovelyiframe');
var doc = iframe.contentDocument || iframe.contentWindow.document;
var elem = document.getElementById('mylovelytextbox');
elem.value = doc.getElementsByName('thisone')[0].value;
</script>
How can I get the textbox which is in a form and that form is in an iframe from javascript?
The simplified code is:
<!-- other code -->
<div id="Login_Panel_Div">
<iframe id="popupLoginScreen" src="login.jsp" name="popupContent">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<form id="loginForm" method="post" name="loginForm">
<h2>Login to your account</h2>
<label>Username:</label>
<input id="username" type="text" name="j_username">
<label>Password:</label>
<input id="password" type="password" name="j_password">
<button id="submitLoginBtn" value="Login" name="submitLoginBtn" type="submit">Login</button>
</form>
</body>
</html>
</iframe>
</div>
<!-- other code -->
If I want to get the input with id "txtbox" what should I do?
Thanks and Regards.
As xiao 啸 pointed me, the solution is:
var iframe = document.getElementById('popupLoginScreen');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var usernameTextBox = innerDoc.getElementById('username');
usernameTextBox.focus();
Requesting for thread close.
Thanks.
I have a page like this...
<div>
<iframe id="mainContent">
<iframe id="littleBox">
</div>
and I want to do this...
$(".someButton").live('click', function() {
alert(/*The URL That the Main Frame is ON*/);
});
I found this: $("#mainFrame").get(0).location.href, but it doesnt work...
Also, I need it to return the current url, so if someone navigates around it should return the current page they are on.
Okay so you mean you have to access the URL of the parent from the child iframe?
$("#mainFrame").get(0).contentWindow.location
Does iframe.src not work? Or, are you trying to get the parent document? In that case, you can just use parent.
As Azmisov says iframe.src does the trick
<head runat="server">
<title>iframe Test</title>
<script type="text/javascript">
function ShowURLs() {
var control = document.getElementById("mainContent");
alert("iframe source = " + control.src);
alert("this page = " + location.href);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id="someButton" value="Click Me" onclick="ShowURLs()" />
<div>
<iframe id="mainContent" src="Test.aspx" />
<iframe id="littleBox" />
</div>
</div>
</form>
</body>
document.getElementById('mainContent').contentWindow.location.href