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.
Related
I have a form that I want to use jquery for validation of the form before I submit. If I click on one of the buttons, I have it save the data via an ajax call. For the other button I want to submit the form, but not have it go through ajax, just do a submit the old fashioned way and go to that page.
I had the submitHandler in my validate() function, which works great for doing the ajax stuff, but what about for the other button where I don't want to use ajax? Do I remove the submitHandler portion from the validate() function? If so, then how should I set up for using ajax? Do I put it in the event handler for the click on that button? If so, how should I set it up?
Can't you just create 2 different functions or just one parameterized with a boolean to indicate whether to send ajax request or just submit the form? the latter may be done using the JQuery submit function.
I think the best way is to bind a personal event
$('form').on('submitajax submit', function(e){
if(e.type === 'submitajax'){
//ajaxstuff
}
else{
//classic stuff
}
})
And your ajax button will trigger the submitajax event
Your validation function can be like this:
function bar( ajax )
{
var valid = true, fooForm = $('#fooForm');
// do validation stuff
if( !valid ) return;
if( ajax ){
$.post(fooForm.attr('action'), fooForm.serialize());
}else{
fooForm.submit();
}
}
And your buttons:
<input type="button" value="With Ajax" onclick="bar( true )" />
<input type="button" value="Old Fashion" onclick="bar( false )" />
You need check JavaScript events on submitting form.
Just consider form:
<form class="js-form">
<a class="js-save">Save</a>
<input type="submit" value="Submit"/>
</form>
$('.js-from').on('click', function(event){
if (event.target === event.currentTarget){
# Triggers on click submit input that triggers as part of form and target same
# Call ajax stuff
} else {
# Triggers on click link witch is fired as click as not a part of form
# Call other ajax or link stuff
}
});
One function for cheching if form submit on submit button or link that can do any thing other
I figured it out. In my ajax button click event handlers, I needed to add
event.preventDefault();
Then I could add the $.ajax() call to the one where I wanted to call ajax, and to the other one just did the submit normally.
Thank you for all of your responses, it was an interesting exercise and I learned a bit more about the intricacies of this type of coding.
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();
Just want to get a concept clear here.
suppose i have this html page:
<script>
function_1()
{
... posts a form via ajax
};
</script>
<body>
<div class='car'>
</div>
</body>
On an event I prepend() this form (which I get via ajax) to the above <div class='car'>
<form method='post'>
...
<button type='submit' value='post' />
</form>
The idea is to submit this form via ajax by calling the function_1 function on pressing the submit button.
Does this work? Because when I submit the form it is not calling the function_1, its just posting it via regular Http post.
When we append() or prepend() elements to DOM, do they have access to javascript right away?
Thank you
You are appending those form elements during run time, so you have to register events for it by using event-delegation. And by the way it is a submit button, so whenever you are clicking on it, it will simply invoke its default action, that is submitting the form. So you should use e.preventDefault() to prevent its default behaviour or you should need to change the type of that button from submit to button
Try,
<script>
$(document).ready(function(){
function function_1()
{
... posts a form via ajax
};
$(document).on("click", "input[type='submit']", function(e) {
e.preventDefault();
function_1()
});
});
</script>
You need to use a delegated event handler, for example:
$(document).on("submit", "#your-form-id", function(e) {
e.preventDefault();
// AJAX code
});
Then, the handler will be called on submit regardless of when the form is appended, as long as the form exists.
What I want to do is pretty simple.
I've a form, with a submit button
<form accept-charset="UTF-8" action="/some_url" id="some-form" method="post">
...
<button class="btn" id="remove-selected" type="submit">Send</button>`
</form>
I want to change the html of the button with jQuery when the form is submitted but can't achieve that, seems like the form submission occurs before I can change it.
My code right now, dead simple:
$("#some-form").on("submit", function(e) {
$("#remove-selected").html("Sending...");
});
Thanks for advises!
Your stuff seems working for me, just submit the form via JS to have more control about the sequence and error cases.
$("#some-form").on("click", function(e) {
e.preventDefault();
$("#remove-selected").html("Sending...");
$(this).submit();
});
http://jsfiddle.net/GDAhe/1/
$("#remove-selected").click(function(){
$(this).html("Sending...");
});
You code is correct, you may have forgotten to embed it inside a $(document).ready() method.
I have a form that ends with
input type='submit'
That is used to submit the form and also trigger validation script.
Now I don't like this submit button. I want submit to be just an tag but with submit function to trigger validation normally.
Is there any way out of this problem ?
it's just like this:
Submit
or better:
Submit
<script type="text/javascript">
$(function(){
$('.submit').click(function(){
$(this).closest('form').submit();
});
});
</script>
note that this solutions requiore jQuery and will only work if javascript is enabled while the traditional submit-button works everytime.
I think something like this should work:
$('.anchor').click(function() {
$('#form').submit();
});