Html target iframe using jquery
In the following code, after submitting the form, I need to stay on the same page, so I say my target is an iframe.
But after receiving a response, I need to fill in the text area, how can I do that. What's wrong with the code below?
<script>
//After I get a response
$("#result").html("This is your result"); //Textarea not populated
</script>
<form method="POST" enctype="multipart/form-data" id="contentform" action="/dg/execute_model/" target="upload_target" onsubmit="return validate();">{% csrf_token %}
<b>
<table class="cat-tab" cellspacing="0" cellpadding="0" border="0">
<tr>
<td><font>*</font>Test data</td>
<td><input type="file" name="test_file" id="test_file" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Build" id="addbtn" /></td>
</tr>
</table>
</form>
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;">
<b><br>Result:<br><br></b>
<textarea rows="20" cols="100" name="result" id="result" ></textarea>
</iframe>
source to share
Why is the query $('#result')
not working in your example
By default jQuery queries the DOM tree of the current object document
. Since the element iframe
actually embeds a separate object window
with a separate object document
, the text box simply isn't within the scope of your current request and was not found.
How to correctly request $('#result')
This means that in order to traverse the inline DOM iframe
, we first need to access the iframe window
and document
. The safe and cross-browser way to do this is to access the iframe window
with its property .contentWindow
followed by the property .document
window
.
For example:
var target_document = $('#upload_target')[0].contentWindow.document;
var target_result = $(target_document).find('#result');
target_result.val('This is your result');
source to share