Prevent onclick execution with jquery - javascript

UPDATED
Html Code:
<input type="textbox" id="textbox" value="">
<input type="button" id="btn" value="Validate" onclick="document.write('VALIDATION PASSED')" />​
JS Code:
$(document).ready(function() {
$("#btn").click(function() {
if ($("#textbox").val().length == 0) {
alert("Validation error");
return false;
}
}).prop("onclick", null );
})​
I have updated my code. So the issue is that after first click my onclick event stopped working. How I could fix it?
P.S. Please DO NOT change html code. I have some reasons to ask about it, but please could you please do it only with javascript? I realize that probably this is not the most easy way but I have some technical limitations in my application.
Thanks!
JSFiddle http://jsfiddle.net/B5GWx/12/

$(document).ready(function() {
$("#btn").click(function() {
alert("Want to show only this message");
return false;
}).prop("onclick", null );
})​
http://jsfiddle.net/B5GWx/5/

You can't reliably, cross-browser, use a DOM2 handler to prevent a DOM0 handler from running.
What you can do, though, is remove the DOM0 handler entirely:
$(document).ready(function() {
var btn = $("#btn");
btn.click(function() {
alert("Want to show only this message");
return false;
});
btn[0].onclick = null; // <==== Here
})​;

Just removing the DOM handler will do the job. No need to return false; or e.preventDefault();
$(document).ready(function() {
$("#btn").click(function(e) {
alert("Want to show only this message");
}).prop("onclick", null );
})​
DEMO

You are looking for preventDefault
Description: If this method is called, the default action of the event will not be triggered.
$(document).ready(function() {
$("#btn").click(function(e) {
alert("Want to show only this message");
e.preventDefault();
})
})​

Related

input forced to focus while onblur event

I have try to focus while onblur Event. it works on chrome not on firefox. how to sort out.
function a() {
$("#login").focus();
}
$(document).ready(function() {
$("#login").focus();
});
<input id="login" onblur="a()"></input>
Please help.
You can just remove the onblur function and write instead:
$(document).ready(function () {
$("#login").focus();
$(document).on('click', function () {
$("#login").focus();
});
});
Live jsfiddle: http://jsfiddle.net/ysjkzvh7/
Do something like that;
$( "#login" ).blur(function() {
$(this).focus();
});
and
<input id="login"></input>
just try different things. But every browser is different.
If you don't want the input to lose focus, just unbind the blur function from it.
Try this -
$(document).ready(function() {
$("#login").unbind('blur');
});

Using click event while button is disabled

I need to check on clicks while the button is disabled is this possible? Or is there any other way to this?
HTML:
<form id="form">
<input type="submit" id="submit" value="Submit" />
</form>
JS:
$("#form").submit(function (e) {
e.preventDefault();
return false;
$("#submit").on("click", function () {
alert("Bla");
});
});
JS Fiddle: http://jsfiddle.net/hjYeR/1/
When you are using preventDefault(), there is no need to use return false.
However, any code after return statement in a function, won't execute.
Also there is no need to attach an event inside another event, write them separately:
$("#form").submit(function (e) {
e.preventDefault();
});
$("#submit").on("click", function () {
alert("Bla");
});
jsFiddle Demo
After you return false; the rest of your function will not run. You can bind your click event before returning false and it should work.
return statements are the end point in the function, the codes will not proceed ahead of that.
What you can do is simply remove the click event handler from within the submit handler itself.
$("#form").submit(function (e) {
return false; //e.preventDefault(); is not needed when used return false;
});
$("#submit").on("click", function () {
alert("Bla");
});

jQuery UI Dialog Button Won't Click

The alert is working, but the button just won't click...
$('#loginDialog .field input').keyup(function (e) {
if (e.keyCode == 13) {
alert('it is working!');
$('.ui-button').click();
return false;
}
});
I have tried many different things, including reinitializing the method when the dialog gets opened, but nothing seems to work...
Html:
<div id="loginDialog" title="Please Login">
<div class="label">Password:</div>
<div class="field"><input type="password" /></div>
</div>
the ui-button is generated by jquery ui
I'm assuming from your comment that the button is generated dynamically and that any click event you have bound to is will have to be bound using event delegation, similar to:
$('body').on('click', '.ui-button', function(){...)
Instead of body, using the closest static element will work as well and would be preferred.
Please, try this:
$(function() {
$('#loginDialog .field input').keyup(function (e) {
if (e.keyCode == 13) {
alert('it is working!');
$('.ui-button').trigger('click');
return false;
}
});
$('.ui-button').click(function() {
alert('hello world');
});
};
Here there is an example: http://jsfiddle.net/netme/YZH3B/
This should trigger the event ...
$('.ui-button').trigger('click');

JQuery on submit show dialog

First sorry for my bad English.
I would like to show a confirmation layer (id="confirmwin") before submitting a form (id="form"). There is another button (id="yes") to submit the form.
I tried this:
Layer:
<div id="confirmwin" style="display:none">
Are you sure to submit?<br>
Yes No
</div>
JavaScript:
$(document).ready(function(){
$("#yes").click( function() {
$("#form").off("submit").submit();
});
$("#form").on("submit", function() {
$('#confirmwin').show();
return false;
});
});
Sometimes (not always) it looks like it's in an endless loop.
Perhaps the #yes click event's off event goes wrong.
Have you tried removing the .submit() while turning it off?
$("#form").off("submit").submit();
shouldn't it be..
$("#form").off("submit") //if
and only if confirmed proceed to do..
$("#form").submit(); //then you can /off() but I don't see the need to
One solution would be to pass extra parameters while triggering the submit event.
You can read more about event data in the jQuery API here.
$("#yes").click( function() {
$("#form").trigger("submit", [true]);
});
$("#form").on("submit", function(e, blnConfirmed) {
// If it's not confirmed yet, show the overlay.
if (!blnConfirmed) {
$('#confirmwin').show();
return false;
} // else it actually IS confirmed, do a real submit
});
You should test this code first. It's just an example.
It is easy:
Just add an global var:
var ignoreConfirm = false;
so it will look like:
$("#yes").click( function() {
ignoreConfirm = true;
$("#form").off("submit").submit();
});
$("#form").on("submit", function() {
if(!ignoreConfirm){
$('#confirmwin').show();
return false;
}
});
simples as this
<form id="xpto" name="" action="" ... onsubmit="return callJavascriptFunctionConfirm();">
//bla bla bla here
</form>
function callJavascriptFunctionConfirm(){
//do the logic here
if (yes)
return true;
else
return false;
}
}

Select all Forms in a div and prevent the default action

I want to Display part of my website in a layover. If the user has no javascript, the layover is displayed as a normal website.
I'm getting the Website with getController and my problem occures in handleLinksAndForm.
$("#Popup > a").click(function(e){
e.preventDefault();
getController($(this).attr("href").substr(1),element);
});
This works as intended. Whenever a click on a Anchor element in Popover div happens, the default action is prevented and the new website is loaded in the popover.
$("#Popup > form").each(function() {
alert(this.name);
});
$("#Popup > form").submit(function(e) {
alert("form");
e.preventDefault();
getPostController($(this).attr("action"),$(this).serialize(),element);
return false;
});
However, this part does not work. Neither the foreach part nor the .submit().
So my Question is: Whats my mistake? If I use $("form").each(function() {... all forms are recognized, but if I add the extra selector #Popup none is recognized.
Complete Code:
function getController(ctrl,element)
{
$.get('/service/controller/' + ctrl, function(data){
handleLinksAndForm(data,element)
})
}
function getPostController(ctrl,args,element)
{
$.post('/service/controller/' + ctrl,args, function(data) {
handleLinksAndForm(data,element)
});
}
function handleLinksAndForm(data,element)
{
element.html(data);
element.prepend("<div id=\"popupClose\">x</a>");
centerPopup();
$("#popupClose").click(function(){
disablePopup();
});
$("#Popup > a").click(function(e){
e.preventDefault();
getController($(this).attr("href").substr(1),element);
});
$("#Popup > form").each(function() {
alert(this.name);
});
$("#Popup > form").submit(function(e) {
alert("form");
e.preventDefault();
getPostController($(this).attr("action"),$(this).serialize(),element);
return false;
});
}
You didn't provided any html code. So hard to say if isn't here more problems for example if is really element form a child of #popup.
But first try to use:
return false;
instead:
e.preventDefault();
Also you can use:
$("#Popup form") instead $("#Popup > form") it is safer way.
I just tested with the code below and I was able to locate the child element.
$("form", "#Popup").submit(function(e) {
alert("form");
...
});
N.B. This syntax also calls .find() but is slightly easier on the eyes.
Found my mistake:
I got:
<table>
<form>
<tr><td>...</td></tr>
</form>
</table>
The right way is:
<form>
<table>
...
</table>
</form>

Categories