Related
Not great with Js so looking for some help with some existing code.
I have the following anchor
<span>Add</span>
I am getting a warning regarding the 'onclick' event where its telling me that i dont have keyboard equivilant handler for the the onclick="return false; I have done some research and i can prevent this warning by using preventDefault. if i put this in a script tag in the page then it works the same and i think it will get rid of the issue.
$("a.addrom").click(function(e) {
e.preventDefault();
});
However, i would prefer to add it to the existing js but im having a hard time working out whats going on. I am trying to add it to the click event.
setupRooms: function (settings) {
//hide all age fields
$(settings.agesSelector, settings.hotelSearchDiv).hide();
//hide all except first
$(settings.roomsSelector + ":not(:first)", settings.hotelSearchDiv).hide();
$('select', settings.hotelSearchDiv).prop('selectedIndex', 0); //set all to 0
$(settings.addRoomSelector, settings.hotelSearchDiv).on('click', function () {
methods.addRoom(settings);
});
$(settings.removeRoomSelector, settings.hotelSearchDiv).on('click', function () {
var id = $(this).data('id');
methods.removeLastRoom(settings, id);
});
$(settings.childrenNumberSelector, settings.hotelSearchDiv).on('change', function () {
methods.handleChildrenChange(settings, $(this));
});
},
Edit* This code worked for me thanks to #patrick & #roberto
$(settings.addRoomSelector, settings.hotelSearchDiv).on('click', function (e) {
e.preventDefault();
methods.addRoom(settings);
});
If i understood correctly you want to add that on your click handlers:
$(settings.addRoomSelector, settings.hotelSearchDiv).on('click', function (e) {
e.preventDefault();
methods.addRoom(settings);
});
$(settings.removeRoomSelector, settings.hotelSearchDiv).on('click', function (e) {
e.preventDefault();
var id = $(this).data('id');
methods.removeLastRoom(settings, id);
});
Should be enough for having the prevent default in your click handlers.
Cheers
There is a form and a button.
submit
<script>
function myFunc()
{
//some actions here
var myForm = document.getElementById(formId);
myForm.submit();
}
</script>
Now I want to bind another function to submit event of the form without modifying the first part:
<script>
$('formSelector').on('submit', function(){
alert(123);
});
</script>
The above function is not executed. The form is submitted by myFunc()
Is there a way to alert(123) before form submit?
UPD: myFunc(). sorry, my mistake
Perhaps you could try listening on the "onclick" event of the a element. However, it itsn't a good practice to use the href attr to call for arbitrary functions.
<a id="forsubmitter" href="#">submit</a>
<script>
jQuery(document).on('click','#formsubmitter',function() {
if (myFunc()) {
alert('conditions met, submitting');
$('formSelector').submit();
} else {
alert('conditions not met, but submitting anyway!');
$('formSelector').submit();
}
});
function myFunc() {
if (some conditions are met) {
return true;
} else {
return false;
}
}
</script>
The best practice in this cases, is to rise custom event, something like that
function myFunc()
{
//some actions here
$('formSelector').submit().trigger('customSubmitEvent');
}
then listening to the same event:
<script>
$('formSelector').on('customSubmitEvent', function(){
alert(123);
});
</script>
It is possible, that you are assigning submit handler before the DOM is ready and selector does not match any form. Try wrapping event handler with DOM ready function:
$(function() {
$('formSelector').on('submit', function(){
alert(123);
});
});
I've got a small piece of code here
<label for="pass">Password</label>
<input type="text" id="pass" value="QWERTY">
<button for="pass">Submit!</button>
and jquery action
$("button").click(function(){
var value=$("input[id=pass]").attr("value");
if (value==="QWERTY"){
alert("Good!");
};
and it doesnt work. Do you know how to fix it?
Try this.
$("button").click(function(){
var value=$("input#pass").val();
if ( value === "QWERTY"){
alert("Good!");
}
});
jQuery has it's own built in function for fetching values from input fields.
You should prevent the default action from triggering when the button is clicked (otherwise the form will be submitted, and the JS will not execute). You should also use val() when accessing an input's value.
You should also wrap your code inside the DOMReady handler, to ensure that the DOM is accessible when your script is run.
Here's an updated version of your code:
$(function() {
$("button").click(function(e) {
e.preventDefault();
var the_value = $("#pass").val();
if(value == "QWERTY")
{
alert("Good!");
}
};
});
Try this : It's more optimized...
$("button").click(function(e){
e.preventDefault();
var value=$("#pass")[0].value;
if (value==="QWERTY"){
alert("Good!");
};
You can also remove the "for" attribute on the button, it's non correct ;)
Your code should work if you don't forget the }); at last and have put the code into dom ready callback function. The demo.
And you could write it like below:
$("button").click(function(){
if ($('#pass').val()==="QWERTY"){
alert("Good!");
};
});
I think you just have a syntax error. You need to make sure you close your function curly brace and your click close paren.
$("document").ready(function () {
$("button").click(function () {
var value = $("input[id=pass]").attr("value");
if (value === "QWERTY") {
alert("Good!");
}
});
});
Example:
http://jsfiddle.net/pandaPowder/5VjeD/3/
Once I've fired an evt.preventDefault(), how can I resume default actions again?
As per commented by #Prescott, the opposite of:
evt.preventDefault();
Could be:
Essentially equating to 'do default', since we're no longer preventing it.
Otherwise I'm inclined to point you to the answers provided by another comments and answers:
How to unbind a listener that is calling event.preventDefault() (using jQuery)?
How to reenable event.preventDefault?
Note that the second one has been accepted with an example solution, given by redsquare (posted here for a direct solution in case this isn't closed as duplicate):
$('form').submit( function(ev) {
ev.preventDefault();
//later you decide you want to submit
$(this).unbind('submit').submit()
});
function(evt) {evt.preventDefault();}
and its opposite
function(evt) {return true;}
cheers!
To process a command before continue a link from a click event in jQuery:
Eg: Click me
Prevent and follow through with jQuery:
$('a.myevent').click(function(event) {
event.preventDefault();
// Do my commands
if( myEventThingFirst() )
{
// then redirect to original location
window.location = this.href;
}
else
{
alert("Couldn't do my thing first");
}
});
Or simply run window.location = this.href; after the preventDefault();
OK ! it works for the click event :
$("#submit").click(function(event){
event.preventDefault();
// -> block the click of the sumbit ... do what you want
// the html click submit work now !
$("#submit").unbind('click').click();
});
event.preventDefault(); //or event.returnValue = false;
and its opposite(standard) :
event.returnValue = true;
source:
https://developer.mozilla.org/en-US/docs/Web/API/Event/returnValue
I had to delay a form submission in jQuery in order to execute an asynchronous call. Here's the simplified code...
$("$theform").submit(function(e) {
e.preventDefault();
var $this = $(this);
$.ajax('/path/to/script.php',
{
type: "POST",
data: { value: $("#input_control").val() }
}).done(function(response) {
$this.unbind('submit').submit();
});
});
I would suggest the following pattern:
document.getElementById("foo").onsubmit = function(e) {
if (document.getElementById("test").value == "test") {
return true;
} else {
e.preventDefault();
}
}
<form id="foo">
<input id="test"/>
<input type="submit"/>
</form>
...unless I'm missing something.
http://jsfiddle.net/DdvcX/
This is what I used to set it:
$("body").on('touchmove', function(e){
e.preventDefault();
});
And to undo it:
$("body").unbind("touchmove");
There is no opposite method of event.preventDefault() to understand why you first have to look into what event.preventDefault() does when you call it.
Underneath the hood, the functionality for preventDefault is essentially calling a return false which halts any further execution. If you’re familiar with the old ways of Javascript, it was once in fashion to use return false for canceling events on things like form submits and buttons using return true (before jQuery was even around).
As you probably might have already worked out based on the simple explanation above: the opposite of event.preventDefault() is nothing. You just don’t prevent the event, by default the browser will allow the event if you are not preventing it.
See below for an explanation:
;(function($, window, document, undefined)) {
$(function() {
// By default deny the submit
var allowSubmit = false;
$("#someform").on("submit", function(event) {
if (!allowSubmit) {
event.preventDefault();
// Your code logic in here (maybe form validation or something)
// Then you set allowSubmit to true so this code is bypassed
allowSubmit = true;
}
});
});
})(jQuery, window, document);
In the code above you will notice we are checking if allowSubmit is false. This means we will prevent our form from submitting using event.preventDefault and then we will do some validation logic and if we are happy, set allowSubmit to true.
This is really the only effective method of doing the opposite of event.preventDefault() – you can also try removing events as well which essentially would achieve the same thing.
Here's something useful...
First of all we'll click on the link , run some code, and than we'll perform default action. This will be possible using event.currentTarget Take a look. Here we'll gonna try to access Google on a new tab, but before we need to run some code.
Google
<script type="text/javascript">
$(document).ready(function() {
$("#link").click(function(e) {
// Prevent default action
e.preventDefault();
// Here you'll put your code, what you want to execute before default action
alert(123);
// Prevent infinite loop
$(this).unbind('click');
// Execute default action
e.currentTarget.click();
});
});
</script>
None of the solutions helped me here and I did this to solve my situation.
<a onclick="return clickEvent(event);" href="/contact-us">
And the function clickEvent(),
function clickEvent(event) {
event.preventDefault();
// do your thing here
// remove the onclick event trigger and continue with the event
event.target.parentElement.onclick = null;
event.target.parentElement.click();
}
I supose the "opposite" would be to simulate an event. You could use .createEvent()
Following Mozilla's example:
function simulateClick() {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
var cb = document.getElementById("checkbox");
var cancelled = !cb.dispatchEvent(evt);
if(cancelled) {
// A handler called preventDefault
alert("cancelled");
} else {
// None of the handlers called preventDefault
alert("not cancelled");
}
}
Ref: document.createEvent
jQuery has .trigger() so you can trigger events on elements -- sometimes useful.
$('#foo').bind('click', function() {
alert($(this).text());
});
$('#foo').trigger('click');
This is not a direct answer for the question but it may help someone. My point is you only call preventDefault() based on some conditions as there is no point of having an event if you call preventDefault() for all the cases. So having if conditions and calling preventDefault() only when the condition/s satisfied will work the function in usual way for the other cases.
$('.btnEdit').click(function(e) {
var status = $(this).closest('tr').find('td').eq(3).html().trim();
var tripId = $(this).attr('tripId');
if (status == 'Completed') {
e.preventDefault();
alert("You can't edit completed reservations");
} else if (tripId != '') {
e.preventDefault();
alert("You can't edit a reservation which is already attached to a trip");
}
//else it will continue as usual
});
jquery on() could be another solution to this. escpacially when it comes to the use of namespaces.
jquery on() is just the current way of binding events ( instead of bind() ). off() is to unbind these. and when you use a namespace, you can add and remove multiple different events.
$( selector ).on("submit.my-namespace", function( event ) {
//prevent the event
event.preventDefault();
//cache the selector
var $this = $(this);
if ( my_condition_is_true ) {
//when 'my_condition_is_true' is met, the binding is removed and the event is triggered again.
$this.off("submit.my-namespace").trigger("submit");
}
});
now with the use of namespace, you could add multiple of these events and are able to remove those, depending on your needs.. while submit might not be the best example, this might come in handy on a click or keypress or whatever..
you can use this after "preventDefault" method
//Here evt.target return default event (eg : defult url etc)
var defaultEvent=evt.target;
//Here we save default event ..
if("true")
{
//activate default event..
location.href(defaultEvent);
}
You can always use this attached to some click event in your script:
location.href = this.href;
example of usage is:
jQuery('a').click(function(e) {
location.href = this.href;
});
In a Synchronous flow, you call e.preventDefault() only when you need to:
a_link.addEventListener('click', (e) => {
if( conditionFailed ) {
e.preventDefault();
// return;
}
// continue with default behaviour i.e redirect to href
});
In an Asynchronous flow, you have many ways but one that is quite common is using window.location:
a_link.addEventListener('click', (e) => {
e.preventDefault(); // prevent default any way
const self = this;
call_returning_promise()
.then(res => {
if(res) {
window.location.replace( self.href );
}
});
});
You can for sure make the above flow synchronous by using async-await
this code worked for me to re-instantiate the event after i had used :
event.preventDefault(); to disable the event.
event.preventDefault = false;
I have used the following code. It works fine for me.
$('a').bind('click', function(e) {
e.stopPropagation();
});
jquery toggle calls preventDefault() by default, so the defaults don't work.
you can't click a checkbox, you cant click a link etc etc
is it possible to restore the default handler?
In my case:
$('#some_link').click(function(event){
event.preventDefault();
});
$('#some_link').unbind('click'); worked as the only method to restore the default action.
As seen over here: https://stackoverflow.com/a/1673570/211514
Its fairly simple
Lets suppose you do something like
document.ontouchmove = function(e){ e.preventDefault(); }
now to revert it to the original situation, do the below...
document.ontouchmove = function(e){ return true; }
From this website.
It is not possible to restore a preventDefault() but what you can do is trick it :)
<div id="t1">Toggle</div>
<script type="javascript">
$('#t1').click(function (e){
if($(this).hasClass('prevented')){
e.preventDefault();
$(this).removeClass('prevented');
}else{
$(this).addClass('prevented');
}
});
</script>
If you want to go a step further you can even use the trigger button to trigger an event.
function DoPrevent(e) {
e.preventDefault();
e.stopPropagation();
}
// Bind:
$(element).on('click', DoPrevent);
// UnBind:
$(element).off('click', DoPrevent);
in some cases* you can initially return false instead of e.preventDefault(), then when you want to restore the default to return true.
*Meaning when you don't mind the event bubbling and you don't use the e.stopPropagation() together with e.preventDefault()
Also see similar question (also in stack Overflow)
or in the case of checkbox you can have something like:
$(element).toggle(function(){
$(":checkbox").attr('disabled', true);
},
function(){
$(":checkbox").removeAttr('disabled');
})
You can restore the default action (if it is a HREF follow) by doing this:
window.location = $(this).attr('href');
if it is a link then $(this).unbind("click"); would re-enable the link clicking and the default behavior would be restored.
I have created a demo JS fiddle to demonstrate how this works:
Here is the code of the JS fiddle:
HTML:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
Default click action is prevented, only on the third click it would be enabled
<div id="log"></div>
Javascript:
<script>
var counter = 1;
$(document).ready(function(){
$( "a" ).click(function( event ) {
event.preventDefault();
$( "<div>" )
.append( "default " + event.type + " prevented "+counter )
.appendTo( "#log" );
if(counter == 2)
{
$( "<div>" )
.append( "now enable click" )
.appendTo( "#log" );
$(this).unbind("click");//-----this code unbinds the e.preventDefault() and restores the link clicking behavior
}
else
{
$( "<div>" )
.append( "still disabled" )
.appendTo( "#log" );
}
counter++;
});
});
</script>
Test this code, I think solve your problem:
event.stopPropagation();
Reference
The best way to do this by using namespace. It is a safe and secure way. Here .rb is the namespace which ensures unbind function works on that particular keydown but not on others.
$(document).bind('keydown.rb','Ctrl+r',function(e){
e.stopImmediatePropagation();
return false;
});
$(document).unbind('keydown.rb');
ref1: http://idodev.co.uk/2014/01/safely-binding-to-events-using-namespaces-in-jquery/
ref2: http://jqfundamentals.com/chapter/events
If the element only has one handler, then simply use jQuery unbind.
$("#element").unbind();
Disable:
document.ontouchstart = function(e){ e.preventDefault(); }
Enable:
document.ontouchstart = function(e){ return true; }
The Event interface's preventDefault() method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be. The event continues to propagate as usual, unless one of its event listeners calls stopPropagation() or stopImmediatePropagation(), either of which terminates propagation at once.
Calling preventDefault() during any stage of event flow cancels the event, meaning that any default action normally taken by the implementation as a result of the event will not occur.
You can use Event.cancelable to check if the event is cancelable. Calling preventDefault() for a non-cancelable event has no effect.
window.onKeydown = event => {
/*
if the control button is pressed, the event.ctrKey
will be the value [true]
*/
if (event.ctrKey && event.keyCode == 83) {
event.preventDefault();
// you function in here.
}
}
I had a problem where I needed the default action only after some custom action (enable otherwise disabled input fields on a form) had concluded. I wrapped the default action (submit()) into an own, recursive function (dosubmit()).
var prevdef=true;
var dosubmit=function(){
if(prevdef==true){
//here we can do something else first//
prevdef=false;
dosubmit();
}
else{
$(this).submit();//which was the default action
}
};
$('input#somebutton').click(function(){dosubmit()});
Use a boolean:
let prevent_touch = true;
document.documentElement.addEventListener('touchmove', touchMove, false);
function touchMove(event) {
if (prevent_touch) event.preventDefault();
}
I use this in a Progressive Web App to prevent scrolling/zooming on some 'pages' while allowing on others.
You can set to form 2 classes. After you set your JS script to one of them, when you want to disable your script, you just delete the class with binded script from this form.
HTML:
<form class="form-create-container form-create"> </form>
JS
$(document).on('submit', '.form-create', function(){
..... ..... .....
$('.form-create-container').removeClass('form-create').submit();
});
in javacript you can simply like this
const form = document.getElementById('form');
form.addEventListener('submit', function(event){
event.preventDefault();
const fromdate = document.getElementById('fromdate').value;
const todate = document.getElementById('todate').value;
if(Number(fromdate) >= Number(todate)) {
alert('Invalid Date. please check and try again!');
}else{
event.currentTarget.submit();
}
});
Worked as the only method to restore the default action.
$('#some_link').unbind();
This should work:
$('#myform').on('submit',function(e){
if($(".field").val()==''){
e.preventDefault();
}
});
$('#my_elementtt').click(function(event){
trigger('click');
});
I'm not sure you're what you mean: but here's a solution for a similar (and possibly the same) problem...
I often use preventDefault() to intercept items. However: it's not the only method of interception... often you may just want a "question" following which behaviour continues as before, or stops.
In a recent case I used the following solution:
$("#content").on('click', '#replace', (function(event){
return confirm('Are you sure you want to do that?')
}));
Basically, the "prevent default" is meant to intercept and do something else: the "confirm" is designed for use in ... well - confirming!