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.
Related
I'm trying to submit a form by clicking on a link. I disabled the redirection, but for some reason .submit() is not working...
Here is what I have tried:
Effect: redirection stops, no form submission, no error message, stuck on the form page:
$('.jsubmit').click( function(e) {
e.preventDefault();
$('form#fadmin').submit();
});
Effect: URL redirection, form not submitted, no error message
$('.jsubmit').click( function(e) {
$('form#fadmin').submit();
});
Effect: redirection stops, no form submission, no error message, stuck on form page:
$('.jsubmit').click( function(e) {
$('form#fadmin').submit();
return false;
});
The form:
<form action="" method="post" name="fadmin" class="inputform" id="fadmin">...</form>
And a bunch of other combination including trigger(), reversing the preventDefault() with unbind(). The only way I was able to submit the form was to trigger a click on the submit button but that is not really a solution in my case, because I need to use this on multiple pages and adding the button then hiding it is not something I would like to do on every page...
I have tried to run them in Firefox and IE with the same result.
Some other JS, jQ codes being used are: default bootstrap and respond provided by ZendFramework2 and ZFTables.
Any help would be much appreciated!
EDIT:
The form had the following submit button:
<input id="mysubmit" type="submit" value="Register" name="submit" />
After removing this my first example above worked perfectly.
Strange because there was no other forms or submit buttons on the page and nothing with the same name, id, type...
The issue is probably that you are trying to call submit() on a jQuery object, not the form DOM element.
Try this as your second line of code:
$('form#fadmin')[0].submit();
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.
I have tried to boil this down to a simple example to demonstrate what I'm running into.
I have a form with an input field and a submit button:
<form id="focusOutAfterInputForm">
<input type="text" id="focusoutAfterInput">
<input type="submit" >
<div></div>
</form>
The input field has a focusout handler attached that inserts a new element below the input:
jQuery("#focusoutAfterInput").focusout(function() {
jQuery(this).after("<div>message</div>");
});
I have also attached a submit handler just to capture if the submit is run:
jQuery("form").submit(function() {
jQuery("#console").append("<li>submitted form" + this.id + "</li>");
return false;
});
If the cursor is placed into the input and the submit button is clicked, the submit handler does not fire. If the submit button is clicked a second time it will fire. Also, if the field is blur'ed and then the submit button is pressed it will fire.
However, if instead we insert the new element below the div in the form, the submit button will fire even though the element is inserted:
<form id="focusoutAfterDivForm" novalidate="novalidate">
<input type="text" id="focusoutAfterDiv" required="true">
<input type="submit" >
<div></div>
</form>
jQuery("#focusoutAfterDiv").focusout(function() {
jQuery(this).parent().last().after("<div>message</div>");
});
Here is a jsfiddle demonstrating the code. I'm a bit baffled. Ideas anyone?
The problem doesn't seem to be that submit isn't executed, but rather the click event isn't executed on the button, because the mouseup isn't on the submit button once the div is inserted. If you use tab and space in your fiddle it works. Also if you add the element in a way that the submit button doesn't move, it works:
jQuery("#focusoutAfterInput").focusout(function() {
jQuery(this).next().after("<div>message</div>");
});
or in this example: http://jsfiddle.net/K9vrW/3/
I am trying to change a page in the Wordpress menu dynamically. That is, I dont want to change the menu itself, but the page that is displayed in the backend. I am using jquery to add a div once a button is clicked. My javascript function looks like this
$(document).ready(function(){
$("#show").click(function(){
$(".some_div").after("<div>I am added</div>").attr('class', 'some_class');
});
});
The button that is clicked submits a form and looks like this
<input type="submit" name="show" id="show" value="Show Me" class="button-primary" />
Once the button is clicked, the script works fine by adding the div briefly. The problem is, that the page is reloaded as well and the html code is "reset" so that the added div disappears again. Does anyone know a workaround for this?
Try
$(document).ready(function(){
$("#show").click(function(e){
e.preventDefault();
$(".some_div").after("<div>I am added</div>").attr('class', 'some_class');
});
});
You can prevent the default behavior of the form button by using preventDefault(), would work like this:
$(document).ready(function(){
$("#myForm").submit(function(e){
e.preventDefault();
$(".some_div").after("<div>I am added</div>").attr('class', 'some_class');
});
});
See: http://api.jquery.com/submit/
I looked all around SOF but no luck to find me answer. It is either too easy or the answer is not just there.
What I simply need to do is to validate the form when my <img id='submit'/> is clicked and submit it afterwards.
$(document).ready(function(){
$('#submit').click(function() {
$('#suzuki_scb').submit();
});
$('#suzuki_scb').validate({
submitHandler: function(form) {
form.submit();
}
});
});
Even this doesn't work and returns form.submit() is not a function.
I think this is what you're trying to accomplish
<script type="text/javascript>
$(document).ready( function(){
$('#suzuki_scb').validate({
// validation arguments go here
});
});
</script>
...
<form id="suzuki_scb">
<!-- Your form goes here -->
<button id="submit">
<img src="[image url goes here]" />
</button>
</form>
From the jQuery validation example they have on the site, all you need to do is call $("#suzuki_scb").validate();. The plugin should take care of canceling the submit action for you. So clicking the submit button with invalid data won't actually submit the form.
Using an HTML Button element with an image inside it is a little more semantically correct than using an image with a JavaScript click event that attempts to submit the form
This page, on jQuery docs, has the information you seek. Here's a snippet from the first paragraph:
This method sets up event handlers for
submit, focus, keyup, blur and click
to trigger validation of the entire
form or individual elements.
Hope it helps.