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
Related
I have a modal and after pressing the password update button, the modal should close and an alert box should appear on my homepage. however, the alert box will not appear when the page is first opened. how can I do it? Do you have any examples you can share?
If you are using the alerts provided by the browser, you have to add a EventListener to your button like:
yourCloseButton.addEventListener("click", () => {
alert("The modal has been closed!");
});
Complementing Apollo79's answer, you can also use an inline event listener, but this is no longer recommended. There are some specific cases for this, but if you really don't need one, use Apollo79's answer instead.
<button id="urButton" onclick="alertAndDisappear()">
or
yourCloseButton.onclick = function(){}
which is equivalent to the first one.
Again, only use these if you really need them
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
});
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.
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.
http://jsfiddle.net/nhZXg/36/
When the correct answer is clicked, me - John :), the score increments. Problem is that when you keep clicking John the score keeps incrementing.
I have done my research and found .unbind() jquery code but not sure how to implement it or if that even is the best solution.
What would people suggest.
Preferably I'd want the script to find the button that was clicked, instead of saying if(button1) was clicked, as an example, because this quiz may get quite big and that would be tedious.
Thanks in advance.
UPDATE:
Using this code now:
http://jsfiddle.net/nhZXg/38/
But it still will not function.
The page I am using this on is:
http://elearning.easy2dev.com/quiz_template_2.php
Any ideas why? I have included the jQuery 1.7.1 library too!
Done! :)
If you want to execute any event handler only once then use jQuery one to bind the event handler. It will unbind itself once the event is triggered.
$('input:radio').one('click', function(){
//do stuff here
});
You can change the logic in your code and try to make use of it but here is what you can try as per your code.
function scoreIncrement(elem) {//where elem is the radio button element that is clicked
if(!$(elem).data('scored')){
score++;
document.getElementById("score").innerHTML = score;
$(elem).data('scored', true);
}
}
Working demo - http://jsfiddle.net/nhZXg/38/