Jquery unobstrusive validation not working with submit event on jquery - javascript

I'm working in a project in MVC, but I've been having trouble with the jquery validation. I have this event handler for the submit on jquery because I plan to use ajax on it.
$("#form-cart").on("submit",function(e){
// codes
});
But here's the case, even when the input is invalid, it still goes inside the anonymous function. The form is located inside a modal. But I saw some piece of code somewhere and tried it which is this.
$("#MyModal").on("submit","#form-cart",function (e){
//codes
});
Amazingly it works, and it doesn't go inside the anonymous function when the input is invalid. But yeah, here's the problem. From my understanding the, if the second one worked, the first one should also have worked, but it didn't. Can someone tell me the reason why? It really bottles me.. Thanks.

I suggest you to use body click event :
Here is example :
$("body").on("submit","#form-cart",function (e){
//codes
});

Related

Analyze JS syntax

I am trying to analyze a line of code written by someone else. Specifically I want to find the Javascript code that is called when the below link is clicked....
<a href="#subtabs_and_searchbar"
id="finish_counting"
onclick="$('#finish_counting').click();">
<span>Submit Answer</span>
</a>
But as you can see they do not have the actual Javascript function name inside the onClick event listener. Can you please help me understand what is there?
Also is this syntax pure Javascript or is there something else there? Jquery perhaps?
Specifically I want to find the Javascript code that is called when
the below link is clicked....
Here it is:
onclick=$('#finish_counting').click();
Now, this code might trigger another click event handler which is not shown in your post and presumably looks like this code:
$('#finish_counting').on('click', function(){
//Do some handling
})
UPDATE:
Taking a further look on your code lead me to the conclusion that you're in an infinite loop - the anchor tag and the jQuery code refers to the same ID.
This is actually just calling the method .click(). It is actually triggering a click event. I'm not sure why they'd want to do that, especially in the onclick attribute...but that's what this code does.

How to click on button and pop up alert message using jQuery

I am unable to get the alert message to pop up. I have all the other jQuery code working, so I know I linked the library correctly. Could it be where I put it in the document that matters?
HTML:
<button type="button" class="cancelForm">Cancel</button>
jQuery:
$(".cancelForm").submit(function(){
alert('Are you sure you want to cancel?');
});
UPDATE: Still couldn't get it to work. I wil try relabeling later. Thanks for the tips.
$(".cancelForm").on('click', function(){
alert('Are you sure you want to cancel?');
});
You want an on click, not on submit.
$(".cancelForm").click(function()
Also - call your button's class something else (right now, it's "cancelForm", which implies that it's a form, which is confusing you - and will likely confuse developers that need to maintain the code after you.
Also - use a jquery dialog to show a message, not an alert().
The button type would need to be "submit" for this javascript to work. otherwise you would need to have an onclick event handler for the button.
I got it to work but putting the code within the document.ready section. Thank you for our help

jQuery late binding of Ajax elements doesn't work

I'm really stuck with a jQuery issue and I hope someone can help me out...
So I have a list of options on the left, and when you click on one, a form is generated via Ajax on the right. There's this element in the form:
<input type="text" class="value" value="something">
And what I want to do is to call
$(".value").tagsInput();
which is a jQuery plugin that works pretty much like Stack Overflow's 'Tags' input field when you ask a question.
So I tried this:
$(document).ready(function() {
$(".value").on("load", function () {
console.log("Tags Input");
$(".value").tagsInput();
});
});
and nothing is printed out. I've also tried this:
$(document).on("change", ".value", function () {
console.log("Tags Input");
$(".value").tagsInput();
});
and it doesn't work either. I'm wondering where I did wrong. Can anyone help me out?
As pointed out by Shabnam, the "change" event is not what you want, as it is fired only once the field is blurred.
Anyways, from the plugin documentation, it looks like you don't have to call that function every time a key is pressed, but it attaches its own event handlers autonomously.
So, probably you should be fine with just:
$(document).ready(function() {
$(".value").tagsInput();
});
Your .on handler will never work, as the load event is fired only by document when the page is ready.
If you want to debug things a bit, have a look at the supported callbacks, such as onChange.
SIDE NOTE
I don't like how that plugin is written, as it clogs the "global" jQuery.fn namespace with lots of functions, while jQuery documentation recommends not doing so (see: Namespacing).
UPDATE
See here: http://jsfiddle.net/aFPHL/ an example of this working (the .load() was monkeypatched to avoid having to call an actual URL, but its behavior is pretty much the same as the real one).
"change" event gets fired when the input element loses focus. If you want ajax call at the end of each key input, try using keyboard events

Capturing jQuery form submit event

I don't know what is wrong with that, because I was following at every step the tutorial from jquery.com regarding the form submit event.
My Javascript:
[Ofc. latest jQuery library is included].
<script type="text/javascript">
$("form#addFav").submit(function(event) { event.preventDefault(); alert("hello"); });
</script>
Have also tried with the $(document).ready() event:
$(document).ready(function(){
$("form#addFav").submit(function(event) { event.preventDefault(); alert("hello"); });
});
Here is my HTML form code:
<form action="" id="addFav">
<input type="text" name="name" class="thin-d"/>
<input type="submit" value="Send"/>
</form>
So, regarding the above Javascript code, it is supposed to work (I mean it should prevent default action [submitting form] and send the alert then), but it all doesn't work - have tried with thousands of combinations, but I fail'd. So I'm waiting for your solutions. I'd appreciate every one.
You probably have some syntax error or somthing like that somewhere else, because what you have just works.
Are you sure there aren't any JS errors?
P.S. I would alwyas go for the latter code to ensure that the elements are in the DOM before trying to attach events.
For anyone else who has the same problem, and still struggling to solve this issue, try to see if you have illegally reused the id, and try changing the form id to something unique.
I had accidentally given the id to two different DOM elements and the event was being bound to the first element with the respective id and my form was the second one so it was never captured. This had me pulling my hairs for quiet a long.
I just recently ran into the same issue. Jquery on submit would not work on the form, however just changing it to click event worked fine. Still at a loss why .on(submit) or .submit() events will not recognize the form.
$("form#addFav").click(function (event) {
event.preventDefault(); alert("hello");
$(this).submit();
});
this question is old but.. you might have had another submit events firing before yours fired. If these other events contained "return false;" statement then the event execution got interrupted and your code never fired. To put your code BEFORE these events you might use ONSUBMIT form attribute where you can put code that will fire before or at the same time as other events.

Intercept form onSubmit

Is there any way we can intercept the html form's onsubmit event?
In my web application, there are several screens containing forms etc. The issue we are facing is when the user presses any button multiple times, the server gets overloaded with same requests.
Some of the forms have event handlers already attached to them(like onSubmit, button.onClick etc).
One way can be to "inject" my button disable code by going through all the screens.
But what I am looking for is a generic solution which can be applied to all the screens by just including the script where the function is written.
I know I can setup callback using jQuery (capturing onSubmit for form), but in the issue in this case is if any screen has a onSubmit registered already, it may not get called.
Any help in this regard appreciated!
I think this piece of code is a good place to start. It should be placed in separate file and included where you want to use it (if you appear to have global list of scripts - its a good place for it)
var suppressed_items = [];
function allowOnlyOne(item,e){
if (jQuery.inArray(item, suppressed_items)==-1){
//hi little item, I haven't saw you before, please go on... but I remember you
suppressed_items.push(item);
return true;
}
else{
//Hey, you have been submitted already, stay where you are!
return false; //or e.preventDefault(), it's a matter of faith :)
}
}
jQuery(document).ready(function(){
//don't worry, it won't replace your `ready` handlers, but just append new handler
jQuery("from").submit(function(e){
return allowOnlyOne(jQuery(this),e);
});
});
You can use the allowOnlyOne function with any item you wish. So, for example to allow single click on all hyperlinks, inside that ready handler add:
jQuery("a").click(e){
return allowOnlyOne(jQuery(this),e);
}
I hope you get the basic idea: catch the event, get the ID of the element that trigger it, fed it to AllowOnlyOne along with event.
Of course you can wrap it all around into self-executing closure to achieve incapsulation and so on...
If you already have jQuery I suggest you use it... All you need to do is make sure is that your form's onsubmit do not have a "return false" or else it can block jQuery's on submit.
Here's what you need to do:
Remove any return false from your form's onsubmit (if any). Don't worry we'll take care of this later in jQuery.
Add a class to your forms... something like "disableOnSubmit". Example:
<form action="something" onsubmit="yourExistingCode" class="disableOnClick">
</form>
OR
<form action="something" onsubmit="yourExistingCode" class="someOtherClass disableOnClick">
</form>
Implement a code similar to:
<script type="text/javascript">
$(document).ready(function(){
$('form.disableOnClick').submit(function(e){
// preventDefault() does the same as "return false;". It
// will not submit the form. If you're not using return false
// and want the form to be submitted remove the line below
e.preventDefault();
// Now diable any submit button
$('input[type=submit], button[type=submit]').attr('disabled, 'disabled');
});
});
</script>

Categories