Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>An iframe is used to embed another document inside a html page.</p> <p>If the form is to be submitted to an iframe within the form page, then it can be easily acheived using the target attribute of the tag.</p> <p>Set the target attribute of the form to the name of the iframe tag.</p> <pre><code>&lt;form action="action" method="post" target="output_frame"&gt; &lt;!-- input elements here --&gt; &lt;/form&gt; &lt;iframe name="output_frame" src="" id="output_frame" width="XX" height="YY"&gt; &lt;/iframe&gt; </code></pre> <hr> <p><strong>Advanced iframe target use</strong><br> This property can also be used to produce an ajax like experience, especially in cases like file upload, in which case where it becomes mandatory to submit the form, in order to upload the files</p> <p>The iframe can be set to a width and height of 0, and the form can be submitted with the target set to the iframe, and a loading dialog opened before submitting the form. So, it mocks a ajax control as the control still remains on the input form jsp, with the loading dialog open.</p> <p>Exmaple</p> <pre><code>&lt;script&gt; $( "#uploadDialog" ).dialog({ autoOpen: false, modal: true, closeOnEscape: false, open: function(event, ui) { jQuery('.ui-dialog-titlebar-close').hide(); } }); function startUpload() { $("#uploadDialog").dialog("open"); } function stopUpload() { $("#uploadDialog").dialog("close"); } &lt;/script&gt; &lt;div id="uploadDialog" title="Please Wait!!!"&gt; &lt;center&gt; &lt;img src="/imagePath/loading.gif" width="100" height="100"/&gt; &lt;br/&gt; Loading Details... &lt;/center&gt; &lt;/div&gt; &lt;FORM ENCTYPE="multipart/form-data" ACTION="Action" METHOD="POST" target="upload_target" onsubmit="startUpload()"&gt; &lt;!-- input file elements here--&gt; &lt;/FORM&gt; &lt;iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;" onload="stopUpload()"&gt; &lt;/iframe&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload