Is it possible to retrieve the value of a text box in an iframe from the parent page upon clicking a button?
Below is an example code snippet showcasing the situation:
<div>
<iframe src="test.html" >
<input type=text id="parent_text">
<input type="button">
</div>
Here is the content of test.html:
<input type="text" id="frame_text">
Any assistance will be greatly appreciated. Thank you.
Here is an example of how you can achieve this:
var iframeElement = document.getElementById('specificIframe');
var innerDocument = iframeElement.contentDocument || iframeElement.contentWindow.document;
var inputField = innerDocument.getElementById('text_input_field');
Start by selecting the iframe element. Next, retrieve the correct document within the iframe.
Finally, locate and access the desired input field.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function extractIframeText() {
var frame = document.getElementById("iframe-modal");
var frameDocument=frame.contentDocument||frame.contentWindow.document;
var extractedText = frameDocument.getElementById("modal_text").value;
alert(extractedText);
}
</script>
</head>
<body>
<div>
<button onclick="extractIframeText()">Retrieve text from iframe</button>
<iframe id="iframe-modal" src="content.html" >
<input type=text id="parent_content">
</div>
</body>
</html>
In the event that you have Div/input set up within an Iframe like so:
<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>
You can extract the text content of those Div elements using the code snippet below:
var iContentBody = $("#ifrmReportViewer").contents().find("body");
var endLetterSequenceNo = iContentBody.find("#EndLetterSequenceNoToShow").text();
var txtSequence = iContentBody.find("#txtSequence").val();
var divInnerFormText = iContentBody.find("#divInnerForm").text();
This method could be beneficial to someone facing a similar issue.
Using jQuery, you can target the iframe content and set the value of a textbox with the id 'mytextbox' to "myvalue".
Below is the code for the main page that calls an iframe:
<script>
function setFrameContent(string){
var content=string;
document.getElementById("parent_content")=content;
}
</script>
<div>
<iframe src="test.html" id="frame1">
<input type=text id="parent_content">
</div>
This is the code within the iframe (test.html):
<form method="post" action="" id='frm1' >
<input type="text" id="frame_text">
<input type="button" id="btm1" name="submitBtn" onclick="parent.setFrameContent(this.form.frame_text.value);" value="submit">
</form>
After making an API call, I receive the following HTML response and I am trying to display it on the DOM as actual HTML tags, rather than just showing text with HTML tags. API response: <strong>Hello</strong> Current DOM rendering: <str ...
Currently, I'm attempting to incorporate this unique animation into my website: http://codepen.io/dbj/full/epXEyd I've implemented the following JavaScript code in order to achieve the desired effect: var tl = new TimelineLite; tl.staggerFromTo ...
There seems to be a simple issue here that needs my attention before diving into PHP tasks. I plan on using PHPMailer this time around. I've been attempting to learn how to submit a form on localhost for the past week, and now I'm going to try i ...
I am facing an issue with populating a Dropdownlist control on my ASCX page. <asp:DropDownList ID="demoddl" runat="server" onchange="apply(this.options[this.selectedIndex].value,event)" onclick="borderColorChange(this.id, 'Click')" onblur="bo ...
Unfortunately, the File() constructor is not supported in IE and Safari. You can check on CanIUse for more information. I'm wondering if there's a workaround for this limitation in Angular/JavaScript? var file = new File(byteArrays, tempfilenam ...
After experimenting with jQuery's load() method to dynamically change content without refreshing the page, I encountered a recurring issue: the URL remains unchanged. Even when attempting to use history.pushState() to modify the URL, the problem pers ...
I've been scouring the internet for quite some time now, both on this platform and through Google searches, but I can't seem to find what I'm looking for. (Apologies if I missed it and this comes across as a repetitive or annoying question.) ...
Consider this TypeScript interface: export interface Person { phone?: number; name?: string; } Does having the question mark next to properties in the interface mean that the name property in instances of classes implementing the interface ca ...
I have implemented a PHP script to update my database using AJAX, and it is working correctly after being tested. To pass the required two variables to the PHP script for updating the database, I created a JavaScript function that utilizes AJAX to call the ...
Is there a way to display a specific range of rows with Datatables initially? For example, showing rows 100-105 only. Does anyone know if this is achievable using the options available? ...
My code is supposed to submit a form to another page without reloading using AJAX. I am using the jQuery Form plugin, but unfortunately, it's not working as expected. Here is my code: <div id='preview'></div> <form action=&a ...
Currently, I am in the process of collecting data through REST calls. I have created a function that accesses a "directory" endpoint to retrieve a list of individuals. While I can easily obtain details about their children, I need to make individual AP ...
Working on my nextjs application, I have encountered an issue with using the mongodb node module to find all documents in one of my collections. Despite successful usage of .findOne and .updateOne for other pages like login and password reset, when I use . ...
I'm working on a web application that utilizes the camera by following steps from this solution: How to access a mobile phone's camera using a web app? However, I am trying to figure out how to implement a callback function once the user return ...
Struggling to remove the status bar that's covering my header in my Phonegap-wrapped HTML5 mobile app. I've tried adding preferences to the config.xml file, but still no luck. Here's what I added: <preference name="fullscreen" value="tr ...
Currently, I believe that Vue may not be necessary since most tasks can be done using JavaScript and CSS. I am attempting to design a list layout as follows: [A] [B] [C] [D] When an item is clicked, the information about that specific item should ...
I have been facing a challenge with overwriting the css of MuiPrivateTabScrollButton. Since this class is generated from material ui, I am unable to successfully overwrite it. Despite debugging and trying various fixes such as adding border colors, I still ...
As a React newbie, I am currently in the process of learning and exploring the framework. I recently attempted to fetch a new Post using axios. However, upon hitting the '/getPost' URL, I noticed that the GetPost component continuously calls the ...
How can I generate object B that includes all combinations of object A using a key-value pair? { "x": "data-x", "y": "data-y", "z": "data-z" } The desired output should look like this: { ...
Something strange is happening with my HTML form. When I view it on a browser, default values are appearing in the text and password inputs that I did not set. The text input shows "creator" and the password input shows "*****". This only occurs when I set ...