I want to re-enable a disabled onclick. I am using:
$('#id_'+id).prop("onclick", null);
to disable the onclick, but when clicking once again on the button I want to re-enable the onclick again. How do I do that?
Like others said use
$(id).off('click')
in Another way
your Question is not proper,
From your question i get so,
<input type="Button" id="test" >
<script>
$('#test').on('click',function(){
if($(this).attr('class') == '_enable'){
alert(' its working');
}
$(this).addClass('_enable');
});
</script>
first time it won't get the alert from next on wards u ll get the Alert!!!!
if want to disable again then remove that _enable class!!!!
Related
I currently have two buttons. I want when one button is clicked both of the buttons get disabled. I want to use only javascript without Jquery.
var button1=document.getElementById("button1").addEventListener('click',function(){
//I want to check if either of the buttons were clicked and disable both of them.//
if(button1||button2===true){
button1.disable=true;
button2.disable=true;
Alert("Button Disable property is in a true state.");
}
});
var button2=document.getElementById("button2").addEventListener('click',function(){
//I want to check if either of the buttons were clicked and disable both of them.//
if(button1||button2===true){
button1.disable=true;
button2.disable=true;
Alert("Button Disable property is in a true state.");
}
});
//I also tried to set the {once : true;} at the end of the event handler but it only works for one button.Which means that I have to press both of them tfor them both to disable.//
<button id="button1">Button1</button>
<button id="button2">button2</button>
You have a number of problems. Firstly, your variables are being set to the return value of addEventListener, not the document element. Secondly, to disable an element, you use element.disabled = true, not element.disable = true. Finally alert is all lowercase, not Alert. There are also optimisations that can be made to your code - for example there is no need to check if button1 or 2 was clicked since if the event listener is called then one of them must have been. Try this instead:
var button1=document.getElementById("button1");
var button2=document.getElementById("button2");
[button1,button2].map(b => b.addEventListener('click',function(){
button1.disabled=true;
button2.disabled=true;
alert("Button Disable property is in a true state.");
}));
<button id="button1">Button1</button>
<button id="button2">button2</button>
I have a form which is made like this:
<form id= 'lol' name = 'whyyyyy'>
<input name='dumbo'>
<input name='idiot'>
<input type='submit' value='I have no idea why its like this' onclick='document.lol.submit()'>
</form>
Now, I want to prevent the actual sending of the form, but so far all attempts failed.
My current code looks like this:
$(document).ready(function(){
$('form[name="whyyyyy"]').submit(function(e){
e.preventDefault();
alert(1);
return false;
});
})
but the inline submit command bypasses as it seems the jQuery function.
Can someone shred light into it?
EDIT:
The form CANNOT be changed, I don't have permission to change.
the on click code should trigger the submit function, it some complex validation wall of code in it. So I have to cache the submit action that it triggers, but I can't do that at moment.
the submit function should be triggered on send but it does not get triggered.
Here is an example of the code in jfiddle. As you can see it gets past by jQuery...
http://jsfiddle.net/StCPp/4/
if you don't need a submit button, why don't you use a regular button instead
<input type="button" />
<input type='button' value='i have no idea why he done it like this' onclick='document.getElementById('lol').submit()'>
Just use a normal button instead of a submit.
If you want to bypass a submit button you can make the class of the button cancel.
<input type='submit' class='cancel' value='i have no idea why he done it like this' onclick='document.lol.submit()'>
In your add-on JavaScript, remove the inline onclick event and replace it with whatever you desire. Problem solved.
You could also completely remove his button and replace it with one of your choice.
Remove the document.lol.submit function. This way, you can do whatever you want.
// Magic line
delete document.lol.submit;
// Or
$('form[name="whyyyyy"] input[type=submit]').attr('onclick', '');
$(document).ready(function(){
$('form[name="whyyyyy"]').submit(function(e){
e.preventDefault();
alert(1);
return false;
});
});
Ok so if I got this right you could remove the inline event handler onclick and add your custom handler (where you do the validation and all necessary steps):
$(document).ready(function() {
var $submit_button = $('input[type=submit]');
$submit_button.removeAttr('onclick');
$submit_button.click(function() {
//TODO: implement your custom handler
//execute validation etc.
});
});
Remove the onclick
$('input[type=submit]').attr('onclick','')
Then add the click event to function ready
$('input[type=submit]').on('click',function(){
//do your event
});
You aren't necessarily required to use jquery to implement this. You could use standard javascript.
$(document).ready(function(){
document.whyyyyy.submit = function(e){
alert(1);
return false;
};
});
This example works, but you might be hitting a jquery bug.
I have a checkbox that I do not want the user to have direct access to. I want them to accept some terms. To do this I want them to be able to click on a disabled checkbox which opens this mini popup (not checking the box) that contains the terms so the reader can read them and accept them. Once they accept them the popup will close and the checkbox will be checked. The issue I have is i cant figure out to run a function onclick of the disabled checkbox.
Handling the click on a disabled element is indeed tricky ... but I don't think it's the desirable user experience anyway. If a checkbox is disabled, some users will see that and be disinclined to even attempt clicking it. Instead, consider intercepting the click event and using it for your own purposes using preventDefault.
<input type='checkbox' id="cb" name="cb" />
$(document).ready(function() {
$("#cb").click(function(e) {
// cancel click event so that checkbox remains unchecked
e.preventDefault();
// display popup here, then manually check the checkbox if needed
}
});
$('#chk').click(function () {
if (confirm('Accept')) {
$(this).attr('checked', 'checked');
}
else {
$(this).attr('checked', false); }
});
A disabled checkbox might not handle click events properly and would be displayed as "disabled".
But, you could try this:
add an attribute to the checkbox to store if the popup was displayed (e.g. data-popup="0")
handle the onclick event on the checkbox
if the popup was displayed (data-popup="1" ) simply return true to allow to use to check it
if the popup was not displayed (data-popup="0" ), then prevent the default behaviour, set data-popup="1" and display the popup with the terms and conditions
Another improvement, depending on the design of your popup, could be the add a new checkbox in that popup and when the user reads the terms and conditions, he can accept the terms and conditions directly from the popup. If you do that, you need to treat the click event on the checkbox in the popup and automatically check the checkbox on your page as well.
#dbaseman
Here is my code.
Take a look.Here,I get the alert on div but not on checkbox.
<html>
<head>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#checkbox, #hello").click(function(){
alert("hello");
});
});
</script>
</head>
<body>
<div id="checkbox">
<p> hello</p>
<input type="checkbox" id="hello" disabled="disabled" />
</div>
</body>
</html>
I have a button that saves the content that a user edits. I do not want them to hit the save button multiple times because of the load it causes on the server. I want to disable the button after they click on it.
Here is what I have attempted(doesn't work, though):
var active = true;
$("#save").click(function() {
if (!active) return;
active = false;
........
........
........
active = true;
The problem is that the user can still click on the element multiple times.
How can I fix this problem?
Edit: Sorry, I forgot to mention that I want to enable the click after the onclick code has finished executing.
Try this
$("#save").one('click', function() {
//this function will be called only once even after clicking multiple times
});
There is a disabled attribute: http://jsfiddle.net/uM9Md/.
$("#save").click(function() {
$(this).attr('disabled', true)
........
........
........
$(this).attr('disabled', false)
});
You can unbind the click handler, but I would go with .one as per #ShankarSangoli's answer (+1).
$("#save").click(function() {
// do things
$(this).unbind("click");
});
http://api.jquery.com/unbind/
If the element is an input you can do this really easily:
<input name="BUTTON" type="submit" value="Submit" onSubmit="document.BUTTON.disabled = true;">
That's some handy HTML Javascript integration stuff there.
Assuming:
<input type="button" id="save" ... />
You can either do:
$('#save').click(function(){
var $save = $(this);
//
// save code
//
$save.get(0).disabled = true;
});
Which disabled the button natively, or you can use jQuery's one functionality:
$('#save').one('click',function(){
//
// save code
//
});
Which will only execute once and must be re-bound. (But if you're deciding to enable/disable based on parameters, using the disabled attribute is probably a better choice.)
I have a html code and its.
<input type="submit" class="sub" /><div class="img"></div>
Now the CSS code is
.img{backgound: url(image.png);height:10px;width:10px;}
img class position (located) on the submit. now when i try to click the submit (the img class is over it). it not clicked because of the img class.
now i want to make the div class is visible but at the same time it not blocks when i click the submit.
I dont want to use background for the submit, because im already using it on the submit with another image.
i wish that you understand me.
and im sorry for my english ...
Thanks,
assuming ur code looks like
<form id="myform" action="myaction.php">
...
<input type="submit" class="sub" /><div class="img"></div>
...
</form>
Jquery:
$('#myform .img').click(function(){
$('#myform').trigger('submit');
})
Try :
$('.img').click(function(){$(this.parentNode).click();});
So what you want is to have an img on top of a submit, and make it so that when you click that img, the form is still submitted? If so, then you're probably better off using JavaScript. Here's a sample of what it'd look like with jQuery:
$('.img').click(function() {
$('.img').siblings('[type=submit]').click();
});
This makes it so that when you click the image, it will act as if you clicked the submit button too.
On that note, there must be a better way to do this (i.e. without JavaScript and extra divs), but since I don't know much about your problem, I can't think of anything.
if you have a button with already a background image on it ,
and you want that when you press the div above - the button will also be pressed youll need to do this :
on the div element you put:
onclick='simulateButtonPress();'
and in js : (via Jquery)
function simulateButtonPress()
{
$("#btnId").trigger('click');
}
$('.img').click(function() {
$(this).prev('input.sub:submit').trigger('click');
});
// click event for submit
$('input.sub:submit').click(function() {
// here goes you submit actions
alert('submit');
});
$('.img').click(function() {
return true;
});