I've got a simple HTML/JS:
<form method="post" enctype="multipart/form-data" action="Service.ashx" target="download" id="uploadForm">
<label for="x">Select file:</label> <input type="file" name="x" id="x" /> <button type="submit">Generate</button>
</form>
<iframe style="display: none" name="download" id="frmDownload"></iframe>
<script type="text/javascript">
document.getElementById("frmDownload").onload = function () {
alert("Yay!");
}
</script>
In a nutshell, there's a tiny <form> which submits to a hidden <iframe>. Upon success, the Service.ashx will return a file download:
content-type: application/zip
content-disposition: attachment; filename="result.zip"
The process can take a little while (a minute or two), so I'd like to display a "Please wait, still processing" to the user. When the process completes and the file is available for download, I want to display "All done!". Unfortunately the onload script doesn't seem to get called (I'm using latest Chrome on Windows). Any suggestions how to do this?
Added: A-ha! It's a Chrome issue! And looking for Chrome specifically, looks like that's been covered already: Which JS event is fired when Chrome gets the download file?
Heh, first time I've close-voted my own topic! :)
Related
I have a iFrame as follows
<iframe name="hiddenFrame" onload="hideProgress();" src="hiddenFarme.html" id="hiddenFrame" style="visibility:hidden;">
This iframe is used as a target when I am submitting a from which downloads a PDF document
<form id="pdfManualForm" method="POST" target="hiddenFrame">
<input type="hidden" name="x-auth-token" id="x-auth-token-Hidden">
<input type="hidden" name="userName" id="userNameHidden">
</form>
Function that submits the form :
function generatePDGManual(){
$("#x-auth-token").val('abc');
$("#userName").val('abc');
$('#pdfManualForm').attr('action', Settings.URL + "/json/manual/create")
$("#pdfManualForm").submit();
}
The hide progress function looks like this :
function hideProgress(){
Ajax.hideProgress();
}
The problem I am facing is when the form submit is complete and we receive the pdf document, hideProgress function doesn't get invoked (on Chrome). Is there a way I can capture the event when document download is complete.
Thanks,
Tarun
I'm trying to build a form to asynchronously upload images to my site. It works perfectly on newer browsers and then the AJAX updates my list of images without refreshing the entire page.
The problem I'm having is it doesn't work on IE8 & IE9 (and probably others) because those browsers don't support "FormData". I need an alternative where a user uploads an image (with additional hidden form input fields), the list of images should update after the upload is complete - WITHOUT having the entire page refresh.
Here is basically what I have so far:
<div class="imagelist">
... list of images here should be updated by ajax after each upload...
</div>
<form name="uploadform" id="uploadform" method="post" action="/edit-images/uploadimage.php" enctype="multipart/form-data">
<input type="hidden" name="itemimagesid" value="<?php echo $itemid; ?>" />
<input type="hidden" name="itemtype" value="new" />
<input type="file" name="imagefile" id="imagefile" onchange="uploadFile()">
</form>
<script type="text/javascript">
function uploadFile() {
if (!window.FormData || window.FormData === undefined) { // old crappy browsers that can't use ajax/file submit.
$('#uploadform').append("<input type='hidden' name='oldbrowser' value='1'>");
...
[ need a solution here ]
...
return;
}
}
</script>
I need something that works in 2016. I have bootstrap 3.3.2 which uses the jQuery version 1.11.2. I've searched stackoverflow and none of the solutions work. I've tried "jQuery Form Plugin", that does absolutely nothing, doesn't even initialize - probably because my jQuery version is too new for that script. Hopefully there is a better solution for today.
Nevermind, I was able to figure out the iframe hack.
what i want to do is: i want to keep the form object somewhere and send it later to the server. It works fine if the form just contains text/radio/checkboxes etc. but it doesnt work in Internet Explorer when there is a field for fileupload.
Here an example:
<div id="container">
<form id="testForm">
<input type="file" name="photo"/>
</form>
<input type="button" onclick="uploadLater();"/>
</div>
function uploadLater()
{
window.oldForm = document.getElementById('testForm');
document.getElementById('container').innerHTML = "thanks!";
}
another function that is executed later looks like this (note: works in FF and Chrome but NOT in IE, IE sadly doens't send the file):
function doItNow()
{
if(!window.oldForm.parentNode) document.body.append(window.oldForm);
// ... other parameters omitted ...
window.oldForm.submit();
window.oldForm.parentNode.removeChild(window.oldForm);
alert('hurray! data on its way ...');
}
Does anyone know a solution to make something like this work in IE?
Sending a form that contains also a file and is not part of the DOM tree after a certain delay (cross browser).
Thx,
Would something like this work? You would just hide the form, keeping it where it is but not displaying. Then display another div with your text.
Here is the working copy: http://jsfiddle.net/KhJAt/
<div id="container">
<div id="displayMessage" style="display:none;"></div>
<form id="testForm">
<input type="file" name="photo"/>
</form>
<input type="button" onclick="uploadLater();" value="Click it"/>
</div>
function uploadLater()
{
window.oldForm = document.getElementById('testForm');
window.oldForm.style.display="none";
document.getElementById('displayMessage').style.display="";
document.getElementById('displayMessage').innerHTML = "thanks!";
}
I have the following constantcontact form they provided, After they click on submit, it opens a constant contact page. However I would like that it redirect also to a page after they click on submit
<form name="ccoptin" action="http://visitor.r20.constantcontact.com/d.jsp" target="_blank" method="post" style="margin-bottom:2;">
<input type="hidden" name="llr" value="cjdttecab">
<input type="hidden" name="m" value="1101813878050">
<input type="hidden" name="p" value="oi">
<font style="font-weight: normal; font-family:Arial; font-size:12px; color:#000000;">Email:</font> <input type="text" name="ea" size="20" value="" style="font-size:10pt; border:1px solid #999999;">
<input type="submit" name="go" value="Submit" class="submit" style="font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; font-size:10pt;">
</form>
<form onsubmit="setTimeout(function() {location.replace('thanks.html');},100)"
name="ccoptin"
action="http://visitor.r20.constantcontact.com/d.jsp"
target="_blank"
method="post"
style="margin-bottom:2;">
Alternatively go here
http://community.constantcontact.com/t5/Documentation/Constant-Contact-Signup-Form-Generator-CCSFG/ba-p/25033
download the form generator and fill in the success url !!!
Found via this page
http://community.constantcontact.com/t5/User-Community/ct-p/userdiscussion
Since you're using JSP to parse the response, couldnt you just, at the end of your code that handles the form insert this:
response.sendRedirect("your/URL/here");
and just do this the normal way? or is there a reason you need to do this with javascript?
ahhhh n/m I just realized that you do not have control of the receiving script at constant contact - Don't they have a setting you can send to have the browser redirected back to a page of your choosing? I would look into that.
EDIT:
The timeout function below will work but it assumes the end user has javascript enabled. Furthermore, 100ms is not a lot of time to wait - if the network lags for any reason the post will not be sent so it will not work 100% of the time and thats a promise.
The proper way to do this, would be to use this:
http://community.constantcontact.com/t5/Documentation/Constant-Contact-Signup-Form-Generator-CCSFG/ba-p/25033
To set up a privately hosted solution that uses the api. This requires pretty little programming knowledge at all and you'd still be able to skin the form you generate to match your site. It does run in PHP so your server would have to support that, but most do these days.
when i receive a response from the server without that is not handle by AJAX i have a problem to catch the data, normally the data goes to the target but that only happens in Chrome, the other browsers open a new tab and insert the response in the new tab, my question is how i can avoid that? i wanna insert on the target, the code below is the code of the page and the javascript that trigger the submit.
Here is the code of the form.
<div>
<form id='uploadFrm' action='/'enctype='multipart/form-data' method='POST' target='frame_trgt'>
<input id='1_inp' name='upfile' type='file' />
<input id='pathFile' type='input' name='path' />
<input id='uploadFile' type='submit' /><br />
</form>
<iframe id='frame_trgt' name='frame_trgt' />
</div>
Here is the code of the JavaScript that handle the upload file.
$('[name=upfile]').change(function(event){
$("#pathFile").attr('value', getData('carpet'));
$("#uploadFile").trigger('click');
});
i believe you just need to close your iframe tag
<iframe id='frame_trgt' name='frame_trgt'></iframe>