I'm looking for a simple way to show that a file is being uploaded after the Submit button is pressed. The files can be up to 50 MB in size and users can think the browser has frozen because it takes a long time. I'm not looking for anything animated, just something like the word Loading... that appears next to (or in place of) the submit button. An onclick might do it but I'm not sure if it would interfere with the submit process.
Display a "spinning gif" right next to the submit button which is made visible on the onSubmit event. Redirect your form to a new page or reload current page when form is done uploading.
Here's a very simple example:
<script>
$(".spinner").hide();
function loadSpinner() {
$(".spinner").show();
//do validations
//redirect
}
</script>
The form could look something like this:
< form onsubmit="loadSpinner()">
.
.
.
<div>
<input id="submitButton" type="submit" />
<span class="spinner"><img src="images/loading.gif" /></span>
</div>
</form>
This example assumes you're using jQuery.
Related
I am working on a demo project that uploads a photo and returns with the name of the person. So basically I use HTML and it consists of 2 pages, the first page - for users to upload photos and submit it while the second page - the recognized name in the photo will be shown. I have a web service that I need to enable it for face recognition to work. The first page has a submit button, which is to upload the photo, but I wanted the submit button to be on the second page as well so that the users can submit another photo, without the need to go back to the first page. I copied the HTML code in the first page to second page,
<form>
<div class="upload-btn-wrapper">
<button class="btn">Submit</button>
</div>
</form>
the structure of the submit button is there. But it doesn't work, while it worked for the first page, it did not work on the second page. What could be the problem? Let me know if u need more clarification I would be happy to do so
The Code for the first page
Page 1
The Code for the second page
Page 2
The codes for both pages are almost the same.
You need to add condition when you are submitting and action attribute as well where you want to submit.
<form action="upload.php">
<input type="file" name="file" id="uploadFile" />
<div class="upload-btn-wrapper">
<button type="submit" class="btn">Submit</button>
</div>
</form>
for validation, you need to add some jquery code
$(document).on("click", ":submit", function (e) {
if( document.getElementById("uploadFile").files.length == 0 ){
alert("no files selected"); // or you can use other approach
e.preventDefault();
}
}
After pressing the submit button, the button don't become disabled.
And I can activate the submit function number of times.
I want to make the function to be able call only once.
Is there a way to limit the function calls to one time or to disable the button after one click?
Also, my button disappear after pressing (it take a few seconds, so you can press it again) so i don't care if the button will stay disabled.
my application is in angular 5, and i'm not allowed to use pure JavaScript or JQuery.
<form [formGroup]="form" (ngSubmit)="okButtonClick()">
<button *ngIf="!isDuplicateCalendar" type="submit" autofocus containerClass="popover-small" [popover]="isValidAddCalendar()" triggers="mouseenter:mouseleave"
class="d-button d-button_primary" [translate]="'add'" [disabled]="isClicked"></button>
</form>
Thanks!
What you can do is mark some fields as required, on button click you can do something as the code bellow:
<form [formGroup]="form" (ngSubmit)="okButtonClick()">
<button *ngIf="!isDuplicateCalendar" type="submit" autofocus containerClass="popover-small" [popover]="isValidAddCalendar()" triggers="mouseenter:mouseleave"
class="d-button d-button_primary" [translate]="'add'" [disabled]="!form.isValid"></button>
</form>
okButtonClick(){
//sending form data to backend using HTTP request
this.form.reset()
}
declare variable in ts
isClicked=false;
okButtonClick(){
this.isClicked =true;
}
The online HTML-form I want to fill out using MechanicalSoup has 2 submit buttons (so 1 form with 2 submit buttons). The first button (red in the picture "Toevoegen") is to upload a photo after choosing a file. The second button (not shown) submits the completed form. I have figured out how to address the different buttons using the form.choose_submit() function, so that's fine.
My question now is the following:
When I fill the form by hand, I noticed that after selecting the file and pressing the first (red) button, it takes some time (1-2 secs) for the file to upload. When I now fill out the form using mechanical soup, do I have to include this time (1-2 secs) for the photo to upload (for example using the time.sleep()) before I (make MechanicalSoup) fill out the rest of the form and submit it using the second submit button? Or will the form figure out that it has to upload the pic first and wait for that before executing the final submit order? So it's really a timing issue I have to coordinate the proper functioning of both buttons...
I hope this edit clarifies things a bit more.
Thanks for any suggestions!!
If it helps: this is what I found in the HTML form for the first submit button:
<div id="edit-submitted-file_add-ajax-wrapper">
<div class="form-item webform-component webform-component-file webform-component--file_add">
<label for="edit-submitted-file_add-upload">Add File</label>
<div class="form-managed-file">
<input type="file" id="edit-submitted-file_add-upload" name="files[submitted_file_add]" size="22" class="form-file" />
<input class="button form-submit" type="submit" id="edit-submitted-file_add-upload-button" name="submitted_file_add_upload_button" value="Toevoegen" />
<input type="hidden" name="submitted[file_add][fid]" value="0" />
</div>
</div>
</div>
When submitting a file, the file upload is part of the form submission. There's no point waiting before submitting, because this is not when the file upload happens. Unless the website is seriously broken, there's no point waiting after either, because the .sumbit() method call is blocking, i.e. it returns only after the form submission, hence the file upload, is completed.
However, it's hard to tell what you should do exactly in your case: it seems the first submission is done without reloading the page, hence using JavaScript. MechanicalSoup does not do JavaScript, so it may or may not work (in a perfect world, sites that work through JavaScript have a non-JavaScript fallback, but ...).
Probably the best for you is to try and see what works.
For a Project, in which we are not yet allowed to use php, I want to create a login page. I just can't figure out how to make it so the cancel button and the submit button take me to predefined pages. I want to be able to input some dummy data into the username password fields and when I press submit be sent to the "logged in" part of my site.
<button type="submit" value="profil.html">Login</button>
I tried it like that but it doesn't work. I also tried that:
<form action="profil.html" method="get">
You can use little bit of js to achieve it cleanly.
<button value="Cancel" onclick="window.location.href='otherpage.html'"> Cancel</button>
Set the action in the form. Use a submit button to submit the data to that URL.
"Cancel" means "Give up on the form and go somewhere else". To go somewhere else: Use a link.
<button>Login</button>
Cancel
I had designed an HTML form with submit button. But instead of submit it to another page I want to submit to pop up windows where I can limit the size of the pop up windows say "320x240" hide all the toolbar, disable resize.
Here's my go at it; this JavaScript snippet should go into the head of your page:
<script>
process = function()
{
window.open('about:blank', 'popup', 'width=320,height=240,resizeable=no');
document.login.setAttribute('target', 'popup');
document.login.setAttribute('onsubmit', '');
document.login.submit();
};
</script>
And this is a sample form for demonstration purposes:
<form action="handle.html" method="get" name="login" onsubmit="process(); return false;">
Username: <input type="text" name="username" id="username" /><br />
<input type="submit" />
</form>
Now, here's what's happening: first, we set up a form and give it an onsubmit attribute that tells it to run the function process() and return false; instead of submitting normally; from this point, that function takes over and creates a popup window, giving it a name, and some features (by all means, add any surplus ones you'd like), and then attention comes back to the form, where we now set the target attribute to the name of the window we just created.
We then have to clear that onsubmit that we set earlier, or this same exact thing will happen again, and that's certainly not what you want. Finally, we just have the form submitted again and it now passes all of its information to the popped window; from there, it's just getting handle.html (or whatever you end up calling your processing page) to do its work with the data.
Hope I've helped.