I have a HTML form with a file upload. i want to be able to have two buttons - one that will submit the form and another that will upload a file.
i have tried using:
document.getElementById("logo").onchange = function() {
$('#upload_logo').click();
};
to click the upload_logo button when the file is selected but its not working
any ideas?
If you are using jQuery, you should use it throughout your code.
instead of firing a click on the submit button, you should fire a submit on the form.
(hopefully, you do have a form around your inputs, right?)
$("#logo").on('change', function() {
$('#uploadForm').submit();
});
Use trigger
document.getElementById("logo").onchange = function() {
$('#upload_logo').trigger('click');
};
use <input type="file"> to upload file.
Related
I'm relying on another plugins javascript that has code for a specific submit event that submits the form after some validation.
I'm not able to change that validation without hacking into that code.
Therefore I've came up with a hack without hacking into that plugin's code.
I'm changing the input type from submit to button type so I can do my own validation without having to take in account for action that is triggered upon submit.
There are two radiobuttons with class .give-gateway. Basically I'm doing this.
HTML (element in form):
<input type="submit" class="give-submit give-btn" id="give-purchase-button"
name="give-purchase" value="Donate Now" data-before-validation-label="Donate
Now">
jQuery:
$('body').on('click', '.give-gateway', check_gateway);
function check_gateway(id) {
//Value from which radiobutton is selected
if (current_gateway == 'swish') {
alert('changing button from ORIGINAL to new. NOW IT SHOULD BE
TYPE BUTTON!!!');
$('#give-purchase-button').prop('id', 'give-purchase-button-
new').prop('type','button');
$('body').on('click touchend', '#give-purchase-button-new', function
(e) {
alert('NEW give purchase button clicked');
//some code...
});
}
else {
alert('changing button from NEW to original. NOW IT SHOULD BE TYPE
SUBMIT!!!');
$('#give-purchase-button-new').attr('id', 'give-purchase-
button').prop('type','submit');
}
}
This works the first time:
From Submit to button
From Button to Submit
From Submit to Button
Step 3 (NOT WORKING (first click on swish gateway work but second time it does not change from submit to button)!? **Why?) **
I've also tried to programmatically add onsubmit to form but the issue there is that other plugins jquery code has a listener for click event on the actual submit - button which means that that code are executed first anyway. I don't want that to happen.
I've figured it out why now. When I click on another gateway the form is loaded with other content. When I go from swish to paypal. It loads content that is dependent of paypal stuff and creates a new submit - button. If I just change from type submit to button it does not affect anything because that change is made before the actual content is loaded (through ajax) and therefore creates a new submit button.
I have a contact form (Drupal Webform) that includes a file upload that creates a form containing this markup (i have stripped the name, size and id attr. in this example):
<div class="form-managed-file">
<input type="file" class="form-file">
<input type="submit" value="Upload" class="form-submit ajax-processed">
<input type="hidden" value="0">
</div>
I would like for the upload button to be clicked automatically on file upload. I have done this in the past with a function like this but it is not working on this one:
$('.webform-client-form').on('change', 'input.form-file', function() {
$(this).next('input[type="submit"]').mousedown();
});
However these are working on this form:
$('.webform-client-form').on('change', 'input.form-file', function(){
$(this).next('input[type="submit"]').css("background", "red");
alert($(this).next('input[type="submit"]').val());
});
The first gives the button a red background. The second alerts "Upload". Why is the mousedown not working? I have also used click() trigger("click") and trigger("mousedown") but none of them are clicking the upload button. I am using jQuery 1.10.
You're only triggering mousedown. You also need to capture the trigger and act accordingly, such as:
$('.webform-client-form').on('mousedown', 'input[type="submit"]', function() {
alert ("mousedown");
});
If I am not wrong, what you're trying to do is to submit the form when the .change is triggered. If that's the case, you might as well submit the form within your .change handler, such as:
$('.webform-client-form').on('change', 'input.form-file', function() {
$('.webform-client-form').submit();
});
Actually click() works fine:
$(this).next('input[type="submit"]').css("background", "red").click();
Here is the fiddle.
Please pardon me if it is a basic thing, because I am a new learner of Javascript/jQuery. I have been trying to disable submit button to disable multiple submits. I have come across multiple solutions here as well, but all those used specific form name. But I wanted to apply a global solution for all forms on all pages so I dont have to write code on each page, so I put this in footer, so all pages have:
$('input:submit').click(function(){
$('input:submit').attr("disabled", true);
});
This code works on all the forms in all pages as I wanted, but if there are HTML5 required fields in form and form is submitted without them, of course notifications are popped but button still gets disabled. So, I tried with this:
$('input:submit').click(function(){
if ($(this).valid()) {
$('input:submit').attr("disabled", true);
$('.button').hide();
});
});
But this does not work. Kindly help me so that jQuery only disables when all HTML5 validation is done. Thanks
Try this and let me know:
$('input:submit').click(function(){
if ($(this).closest("form").checkValidity()) {
$('input:submit').attr("disabled", true);
$('.button').hide();
});
});
Ruprit, thank you for the tip. Your example did not work for me (in Firefox), but it helped me a lot.
Here is my working solution:
$(document).on("click", ".disable-after-click", function() {
var $this = $(this);
if ($this.closest("form")[0].checkValidity()) {
$this.attr("disabled", true);
$this.text("Saving...");
}
});
Since checkValidity() is not a jQuery function but a JavaScript function, you need to access the JavaScript element, not the jQuery object. That's the reason why there has to be [0] behind $this.closest("form").
With this code you only need to add a class="disable-after-click" to the button, input, link or whatever you need...
It is better to attach a handler to the submit event rather than a click event, because the submit event is only fired after validation is successful. (This saves you from having to check validity yourself.)
But note that if a submit button is disabled then any value they may hold is NOT submitted to the server. So we need to disable the inputs after form submission.
The question is compounded by the new HTML5 attribute form which allows associated inputs to be anywhere on the page as long as their form attribute matches a form ID.
This is the JQuery snippet that I use:
$(document).ready( function() {
$("form").on("submit", function(event) {
var $target = $(event.target);
var formId = $target.attr("id");
// let the submit values get submitted before we disable them
window.setTimeout(function() {
// disable all submits inside the form
$target.find("[type=submit]").prop("disabled", true);
// disable all HTML5 submits outside the form
$("[form=" + formId + "][type=submit]").prop("disabled", true);
}, 2); // 2ms
});
});
---[ WARNING ]---
While disabling submit buttons prevents multiple form submissions, the buttons have the unfortunate side effect of staying disabled should the user click the [Back] button.
Think about this scenario, the user edits some text, clicks submit (and get redirected to different page to view the edits), clicks back to edit some more, ... and ... they can't re-submit!
The solution is to (re-)enable the submit button on page load:
// re-enable the submit buttons should the user click back after a "Save & View"
$(document).ready( function() {
$("form").each(function() {
var $target = $(this);
var formId = $target.attr("id");
// enable all submits inside the form
$target.find("[type=submit]").prop("disabled", false);
// enable all HTML5 submits outside the form
$("[form=" + formId + "][type=submit]").prop("disabled", false);
});
});
Try this
`jQuery('input[type=submit]').click(function(){ return true;jQuery(this).prop('disabled','disabled');})`
run this code on successful validation of the form
i am trying to submit my page using jquery with different actions, but below code seems not working
adding user
$("#createBtn").click(function() {
$("#formname").submit(function(event){
$(this).attr('action', 'addUser.html');
});
});
updating user
$("#updateBtn").click(function() {
$("#formname").submit(function(event){
$(this).attr('action', 'updateUser.html');
});
});
EDIT :-
<form:form name="formname" commandName="comandNamd">
i didnt give action name, since i want to change actions.
on click of button, the page is not getting submitted.
You are writing submit handler inside the click handler. This should work.
$("#createBtn").click(function() {
$("#formname").attr('action', 'addUser.html');
$("#formname").submit();
});
Change for update button also.
"i have place my script inside the tag in top of the page"
In that case your script won't actually bind event handlers to your buttons, because the script will run before the form and buttons have been parsed. $("#createBtn") will find no matching element. You can correct this either by putting your script at the end of the page, just before the closing </body> tag, or by wrapping your code in a document ready handler.
Also, the code inside your .click() handler is binding a submit handler to the form, which doesn't really make sense. You just want to set the action:
$(document).ready(function() {
$("#createBtn").click(function() {
$("#formIdHere").attr('action', 'addUser.html');
// OR
$(this).closest("form").attr('action', 'addUser.html');
});
$("#updateBtn").click(function() {
$("#formIdHere").attr('action', 'updateUser.html');
});
});
You said in a comment that the "buttons are inside the form" - if they are submit buttons then the above code should work. The click will run the code shown to set the action, after which the default behaviour (form submission) will continue.
i have fixed the issue, and thanks for your help, since i am using spring form tag,
<form:form name="formName" commandName="command">
but in jquery i was using above form name attribute value, but actually spring form tag generates form id value and final html looks like
<form:form id="formid" name="formName" commandName="command">
after changing the code to have formid, it worked thanks
$("#formid").attr('action', 'addUser.html');
I have a form that uploads a file and targets an iframe on the page. When the user clicks submit, I want the file contents to "clear" out.
I tried this
$('#imageaddform').submit(function(){
$('#imagefile').val('');
});
But it clears the form before the submit, so nothing is ever uploaded.
Is how do I clear after submit?
If you have no other handlers bound, you could do something like this:
$('#imageaddform').submit(function(e) {
e.preventDefault(); // don't submit multiple times
this.submit(); // use the native submit method of the form element
$('#imagefile').val(''); // blank the input
});
Lonesomeday's solution worked for me but for Google Chrome I found it would still submit empty form data unless I added a timeout like this:
$('#imageaddform').submit(function(e) {
e.preventDefault(); // don't submit multiple times
this.submit(); // use the native submit method of the form element
setTimeout(function(){ // Delay for Chrome
$('#imagefile').val(''); // blank the input
}, 100);
});
You could do something like this:
$('#imageaddform').submit(function(){
setTimeout(function() {
$('#imagefile').val('');
},100);
});
How are u submitting the form? if this is normal form post then then page wont exist in that case i am wondering if u are looking to clear the form before the page refreshses so that when the user comes back he doesn't see the values populated.
If the form is submitted by ajax then you can
function(){
$('form1')[0].submit();
clearForm();
}
Did i miss the question?