Ok my code is as follow:
<body>
<iframe>
<script>
$(function( {
$('form).submit();
});
</script>
<form>
<input type="file" name="myfile"/>
</form>
</iframe>
</body>
this is an iframe inside another page which has a form with upload files inside submitted via jQuery.
Now i'm wondering if it's possible to hide the page loading when the form is submitted, since i'm into another page and not into the iframe page directly.
^ remove this animation from browser when iframe form is submitted
Yes it can be done but instead you submit the form you should call post service from jquery to hide loding on page
Your script inside the iframe, should be:
$(function() {
$('form').submit();
});
That wouldn't have executed otherwise.
The way you are using text inside the frame, is for when Javascript is disabled on the client.
You can come across some problems also with frames. Can you not load the page contents into a DIV?
Related
I can't understand why this isn't working.
I have a form opened in new tab, which I want to close when submitting:
<form name="form" id="form" method="post" enctype="multipart/form-data" >
//form inputs
<button accesskey="C" class="boton" onclick="form.submit(); alert('waiting...'); window.close()"> <u>A</u>djuntar</button>
</form>
when I remove window.close() the form is submitted, but when it's in my code, it shows the alert but not submitting.
Is there anything wrong?
you don't have to open the form in a new window (or tab).
you can either submit the data in ajax or use an inner hidden iframe as the target property of the form element. this way the form will open in a hidden inner element. e.g.:
<form id="eFrm" target="ifrm1">
</form>
<iframe id="ifrm1" name="ifrm1" style="display:none"></iframe>
The form won't be submitted until the event handler function has finished running.
alert blocks all execution of everything until the dialog is dismissed.
close closes a the window, so there is nowhere to load the form submission into, which cancels the request.
If you are going to close a window, don't expect it to be able to send an HTTP request at the same time.
You probably already found a solution, but I am posting this anyway for anybody who comes across the same in the future.
I am using Java servlets, but I think that is the same with every form submission => ability to choose which page must be displayed after the posted data was processed.
Once I have submitted the form, the doPost method in the servlet allows me to say which URL I want the browser to display after the data has been processed.
So, you can do probably do something along these lines:
request.getRequestDispatcher ( "/ClosePopup.html" ).forward ( request, response );
Then also create a file called ClosePopup.html, with nothing but a close () instruction
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body onLoad = "window.close();">
</body>
</html>
This way it won't be the button you click to trigger the closure of the popup, but you will be loading a self destroying page after the form is submitted. The final result is identical.
Basically, I want to use this HTML Form (Which loads in an iframe on a parent page) to submit using a parent page's button that when clicked will submit using the iFrame's built-in OnSubmit function. The problem here is that I could just use the javascript code with document.getElementById('Cable_Extraction_Worksheet').contentWindow.uploaddata(); which would fire off the required function in the JS, but I need to use the form's onsubmit and action attributes because the form needs to redirect correctly and send session variables, only on submit, to be loaded on the NEXT form that is being called via the form's action. HELP? Any better way to do this since I am stuck using iFrames? Tried using php include, but the HTML and CSS is terribly misconstrued in the parent window.
Code is simplified for sample purposes.
IFRAME HTML
<form name="prepform" method="post" onsubmit="uploaddata();" action="http://gp21.idmyasset.com/mobile/prep_b/index.php">
HTML CODE HERE
</form>
PARENT HTML
<div data-role="content">
<iframe src="prep_new/index.html"
frameborder="" name="prep_new" id="prep_new" class="contentiframe"></iframe>
</div>
<li>
<a onclick="document.getElementById('prep_new').contentWindow.document.forms['prepform'].submit();" data-transition="flip" data-theme="" data-icon="check">
Continue
</a>
</li>
I found another way to implement this...
My question is somewhat difficult to explain. What I am trying to do is, I have a button on a certain page. When I press that button, I must be able to access elements of a form that is located on another page (without having the other page open).
Pressing that button will edit some of the elements in the form from that "unopened" page, and then post it, all this without opening any extra popup/tab/window. After the form has been posted, the button will disappear.
The form in question contains unique parameters that can't be retrieved without accessing its particular page, so I cannot emulate the form in standalone.
Some of my guesses are to use a dynamic iframe set to "display: none", or Ajax, but otherwise I'm not exactly sure if it is possible and how to do it.
Would anybody have some ideas? (sorry if the question isn't very clear, I tried my best to describe the problem)
Try using frameset.
given below sample code which have 3 pages
1. page 1 is the parent document which contains two frames.
2.frame1 refers to page2
3.frame2 refers to page3
test1.htm
<html>
<head>
<title>test</title>
<frameset rows="25px,*" frameborder="0" framespacing="0" >
<frame name="Frame2" id="Frame2" src="test2.htm"/>
<frame name="Frame1" id="Frame1" src="test3.htm"/>
</frameset>
</head>
</html>
test2.htm
<html>
<script>
var global="testing"
</script>
</html>
test3.htm
<html>
<script>
alert(parent.window.frames[0].global);
parent.window.frames[0].global="local"
function test()
{
alert(parent.window.frames[0].global);
}
</script>
<body>
<input type="button" onclick="test()" />
</body>
</html>
In the page test2 the value of global can be change from the page test3.htm.
I did it this way, using jQuery:
Acquire HTML code from the form page using $.get()
Extract the form node from the HTML string
Create an hidden iframe
Parse the form's HTML inside the new iframe
Modify the form's values;
"URLEncode" the form's data using jQuery's .serialize();
Post the serialized data to the target using $.post(), with a
callback function receiving the response
If response indicates success, hide the button and remove the hidden
iframe
I decided to extract the form out of the HTML string returned by $.get(), since parsing it won't require to load the whole form page before using the actual form as an object. Using an hidden iframe for parsing is probably not the most "professional" way, but it works.
Can an onsubmit event insert an image into the page before the page submits/transfers control to the next page?
I am using classic asp.
Of course. The function resolves before the form is submitted.
(Although… while an img element may be inserted into the page, it might not load before the browser has gone to the next one, and even if it does, the user might not have time to see it clearly)
Yes . You can insert the HTML code (through javascript):
<img src="imgsrc">
But it takes a little time for loading the image. The form send the user to another page in new window or in the same window? Why would you want to insert an image in the current window if the page will be replaced with the new one?
Yes you can do this. It would be easier (for me to write) if you used jquery:
html:
<form id="myForm" action="">
<input type="text" id="someId" />
<input type="submit" id="submit" value="submit" />
</form>
and then JavaScript would be:
$(document).ready(function() {
$("#myForm").submit(function() {
$(this).append('<img src="someImage.jpg" alt="" />');
});
});
http://jsfiddle.net/rYUbQ/
But like others have said it might not be loaded and displayed before the form submits so you might want to instead look in to preloading the image and then just setting it to visible before the page submits.
I have an app which runs in a new window. There are several forms to generate a PDF export. When I submit one of these forms, the window loses its focus and the original window pops up again when the download appears.
I created an iframe, so the forms can target the iframe and the current window doesn't lose its focus. It works great, but I have no idea how to observe the response inside the iframe if everything went right.
Here is how its working so far. I'm using prototypeJS.
<iframe id="pdf_frame" name="pdf_frame" style="display:none;"></iframe>
<form id="PDF_gen" name="PDF_gen" target="pdf_frame" action="pdf.pl">
<input type="hidden" name="size" value="">
<!-- more hidden inputs -->
</form>
<input type="button" id="pdf_submit" value="generate pdf">
JS:
$('pdf_submit').observe('click', function(){
//write stuff to hidden inputs
$('PDF_gen').submit();
});
If something goes wrong, the download dialogue does not appear. When using prototypes form.request() the browser does not know how to handle the response and does not bring up the download dialogue. How can I do it right?
Thanks in advance!
When something goes wrong in the iframe you can try to fire an event from the iframe to its parent window (assuming we're on the same domain; it won't work cross-domain):
parent.document.fire('something:went_wrong')
and have the parent document listen for that event:
document.observe('something:went_wrong', function() {...});