Using Javascript I would like to show a working/loading image once a user hits submit on my form. The form is used to upload video's so it can take a while for the file to upload. Once the file is done uploading the page reloads so the loading image would not need to be visible anymore.
Can anyone help me with this please?
<form method="POST" enctype="multipart/form-data" action="">
<input type="hidden" name="MAX_FILE_SIZE" value="5120000" />
<input type="hidden" name="upload" value="yes">
First Name: <input type="text" name="firstname"><br>
Email: <input type="text" name="email"><br>
Email Confirmation: <input type="text" name="email2"><br>
Video Title: <input type="text" name="title"><br>
Video Description: <input type="text" name="description"><br>
Video to upload: <input type="file" name="uploadedfile"><br>
Terms: <input type="checkbox" name="terms"> Must be checked to accept our terms of service.<br><br>
<input type="submit" value="Upload Video">
</form>
Using jquery: you can use as follow within document.ready
$("form").submit(function() { //you can assign id to your form and used that id instead of form
$("#iamgeid").show();
return true;
});
Normally We cannot display a loading image after submitting a form, because when we submit a form initially it sends request to the server and the loading is only because of the server response after uploading. loading image will not animate while server is loading.
To show the loading image we have to do some tricks.
1. We should not submit the form in the same window, instead we have to post the form to a iframe. this can be done by adding the target attribute to the form tag.
<div id="form-container">
<form ... action="uploadfilepath" target="iframe_name">
......................
......................
</form>
</div>
<iframe name="iframe-name" onsubmit="showimage()" style="width:1px; height:1px; visibility:hidden;"></iframe>
2. We have to add the script to show image when server is loading inside the iframe.
<img src="loading image path" id="image-container">
<script>
function showimage() {
document.getElementById('form-container').style.display='none';
document.getElementById('image-container').style.display='block';
}
</script>
3. Also add the script after uploading the file.
.......................................
.......................................
your file uploading
code goes here
.......................................
.......................................
at the end print the script to reload the parent window or call the function in parent window.
Best approach would be an AJAX call to do the whole thing.
Place an image with display: none on the desired location and then do this small thing:
var d = document;
var demoInterval;
$("form").submit(function() {
$("img").show();
demoInterval = setInterval(intervalFunc, 1000);
});
function intervalFunc()
{
if(d.ready) // finished uploading video
{
window.clearInterval(demoInterval);
$("img").hide();
}
}
Related
I am trying to build an image upload interface which submits the form automatically as soon as choosing a file from the file browse window. This is how my HTML looks like:
<form enctype="multipart/form-data" action="avatar.php" method="post" id="avatarForm">
<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8mN2ibS1RFAfbliQ_QjEPmnVFY272SpjSCSz9uDIfj4wUvM39Rw" width="100px"/>
<input onchange="javascript:this.form.submit();" type="file" id="avatar" style="display: none;" />
</form>
and this is how my JS looks like:
$("input[type='image']").click(function() {
$("input[id='avatar']").click();
});
Problem is as soon as I click image input which triggers #avatar, file browser is being opened but the form automatically being submitted without allowing me to choose a file from the window.
What is wrong here?
The <input type="image"> is a graphical submit button, so when you click it, it will automatically submit the form. Here's the documentation on it: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/image. If you want to stop the form from submitting, you need to cancel the default action of the click. So, your code would be this:
$("input[type='image']").click(function(e) {
e.preventDefault();
$("input[id='avatar']").click();
});
I don't really understand your problem. Here it seems to work. It doesn't submit the form when I open the file browser, until I choose an image and close the file browser. (note it doesn't post after it either but that's because of a javascript error that is not related to your problem. When you copy this code to an empty html it should work)
$("input[type='image']").click(function() {
$("input[id='avatar']").click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form enctype="multipart/form-data" action="avatar.php" method="post" id="avatarForm">
<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8mN2ibS1RFAfbliQ_QjEPmnVFY272SpjSCSz9uDIfj4wUvM39Rw" width="100px"/>
<input onchange="javascript:this.form.submit();" type="file" id="avatar" style="display: none;" />
</form>
Suppose i have the following form
<form name="my-form" method="post" action="handler.php">
<p>
<input type="text" name="cname" placeholder="Enter your name here" id="cname"/>
</p>
</p>
<input type="file" id="imageid" name="imageid"/>
</p>
<p>
<input type="submit" value="submit"/>
</p>
</form>
Now i want to resize the image before submitting the form. i have to following javascript code to handle the submit event
function processForm(e) {
if (e.preventDefault) e.preventDefault();
//what to do here?
return false;
}
var form = document.getElementById('my-form');
if (form.attachEvent) {
form.attachEvent("submit", processForm);
} else {
form.addEventListener("submit", processForm);
}
before that i used to resize the image at server side using php. But i want to do this process at client side.. but i don't know how to accomplish this.
In HTML 5 you can resize images client-side using the canvas element. You can also take the new data and send it to a server. See this tutorial:
http://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/
would anybody be able to help me with some code to submit all of my forms to an iframe with a single click? In my actual code I have 5+ forms that all need to be submitted with one button press. I have tested submitting one form and it submits correctly to the iframe. There must be a simple way, possibly some jQuery to submit all of the forms in a loop?
<form name="1398694471249" method="post" action="WuFoo.aspx" target="formresponse" id="1398694471249">
<input type="hidden" name="Title" id="Title" value="Mr">
<input type="hidden" name="FirstName" id="FirstName" value="Oliver">
<input type="hidden" name="Surname" id="Surname" value="Clark">
<input type="hidden" name="DateOfBirth" id="DateOfBirth" value="19861230">
</form>
<form name="1528632259273" method="post" action="WuFoo.aspx" target="formresponse" id="1528632259273">
<input type="hidden" name="Title" id="Title" value="Mrs">
<input type="hidden" name="FirstName" id="FirstName" value="Sarah">
<input type="hidden" name="Surname" id="Surname" value="Bloggs">
<input type="hidden" name="DateOfBirth" id="DateOfBirth" value="19750622">
</form>
<iframe name='formresponse' width='100%' height='100'></iframe>
<!-- I want to press this button and submit all forms within the iframe -->
<button type="submit">Submit both forms to iframe</button>
As you can see I have two forms (these are dynamically generated from previously captured data in localStorage) so there will be quite a few forms. I was told I can submit multiple forms to an iframe I'm just not sure how. All help appreciated, thank you.
You might be able to do something like this:
$("form").each(function() {
$(this).submit();
});
If you don't care about the contents of the iframe, you can make a fake iframe and load it there:
$("form").each(function() {
var $form = $(this);
var $iframe = $("<iframe name='temporary-iframe'></iframe>");
var oldTarget = $form.prop("target");
$form.prop("target", "temporary-iframe");
$("body").append($iframe);
$form.submit();
$iframe.remove();
$form.prop("target", oldTarget);
});
The above example has a few small performance issues. If this runs too slowly for you (which will probably happen only if you have a ton of forms:
$("form").each(function() {
var oldTarget = this.target;
var iframe = document.createElement("iframe");
this.target = iframe.name = "temporary-iframe";
document.body.appendChild(iframe);
$(this).submit();
$(iframe).remove();
this.target = oldTarget;
});
If you have issues where only the last form submits, that probably means that form #2 stomps on form #1 before it can finish, then #3 stomps on #2, then #4 on #3, et cetera. If you don't care about the contents of the iframe, you can use the above solution. If you do care about the iframe's contents, you'll need to come up with some algorithm for "which iframe do I show?"
Unless you use Ajax you will have to post each form to an individual Iframe. If you use a single iframe you'll likely cancel the submit before it completes by submitting secondary forms.
I have a form which is in a modal window, as part of this form I have a file upload.
I am struggling to find a way to upload in the
<g:form>
via Ajax. I know I can use uploadForm, but this refreshes the page which is not what I want.
I have tried all the ajax file upload grails plugins with no luck.
Can anyone point me to some sort of way I can do this.
What I have tried so for is as follows:
<g:form action="save">
<g:textField name="category" value=""/>
<g:uploadForm name="myUpload">
<input type="file" name="myFile" />
</g:uploadForm>
<g:submitButton name="create"value="create" />
</g:form>
<g:javascript>
$(document).ready(function() {
$('#myUpload').ajaxForm(function() {
alert("File upload finished!");
});
});
</g:javascript>
The alert never get triggered.
I have added the relevant JS files.
You can ajaxify your upload form using the jquery ajax form plugin.
If you want to submit everything in your form in one go via ajax, you can do something like this:
<g:uploadForm name="myUpload" action="save">
<g:textField name="category" value=""/>
<input type="file" name="myFile" />
<g:submitButton name="create"value="create" />
</g:uploadForm>
<script>
$(document).ready(function() {
$('#myUpload').ajaxForm(function() {
alert("File upload finished!");
});
});
</script>
I want to submit a form without redirecting page. Form is submitted to third party so i can't make changes in php.
What I want to do is:-
Submit for without visiting third party page.
After successful submit show alert.
Current I am using hidden iframe and form target to hidden iframe but I am not satisfied. Is there is any better way to do this using javascript or jquery.
My Form:-
<form target="iframe" action="http://www.example.com" type="post" id="myform">
<input type="text" value="" name="name">
<input type="submit" name="submit">
</form>
My Iframe:-
<iframe style="display:none" id="iframe"></iframe>
You need to use Ajax for that kind of request.
Please look at some tutorials, this for example http://www.w3bees.com/2013/08/submit-form-without-page-refresh-with.html
Change the iframes id attribute to name:
<iframe style="display:none" name="iframe"></iframe>
You can use jquery here
<form action="http://www.example.com" id="myform">
<input type="text" value="" name="name">
<input type="submit" name="submit">
</form>
and after in jquery you write like
// bind to the form's submit event
$('#myform').submit(function() {
alert("ok");
return true;
});
Consider using a PHP proxy.
Copy the script from here to anywhere you like on your own server.
Modify line 11 so that it points to the URL you are posting to at the moment.
// Destination URL: Where this proxy leads to.
$destinationURL = 'http://www.otherdomain.com/backend.php';
Then in your ajax script, change the URL to your proxy.php script.