Is it possible to disable standard action being performed while clicking radio button? (without "disable" attr)
So when i click particular radio button, nothing happens. Tried .unbind('click') but doesnt seem to work.
Ty in advance for help
You can use the preventDefault() method exposed by the event object:
$("input:radio").click(function(e) {
e.preventDefault();
});
EDIT: Unfortunately, this does not seem to prevent the browser from checking the radio button that is clicked first (jsFiddle is in "emergency read-only" mode, so I cannot post a demo right now).
This should work:
$('#myradio').click(function(e) {
e.preventDefault();
return false;
});
Just try this.
$('input:radio').click(function(e){
e.preventDefault();
});
Demo
You can try this, this will stop propagation :
$("#my-radio-btn").live("click", function(e){
e.preventDefault();
});
Actually, the first time you click the radio, the checked property is set and hence it shows as checked in browser ( for the firtst time ).
So this piece of code will solve the issue
[I am using jquery library]
$('input:radio').click(function(){
$(this).prop('checked',false);
e.preventDefault();
return false;
});
You need to use event.disableDefault in the function you give to jQuery click.
$("#my_element").click(
function(event) {
event.preventDefault();
// the rest of your code goes here
}
);
Related
I have a short form, you can see it here http://jsfiddle.net/azxpckg5/1/
and I have a problem - the way to reproduce it is to click the save button. Then there will appear another button called submit. when user clicks it - it disappears and it's fine. But when user repeats this procedure (clicks save again and submit again - he can see that the last click was repeated twice. I believe the error might be somewhere here:
submitHandler: function (form) {
alert("here!");
$(".overlay-boxify2").toggleClass("open");
$('#submitcForm').click(function() {
//
$(".overlay-boxify2").toggleClass("open");
alert("hegdsgsd");
});
return false;
}
but to be honest I don't know how to fix it and what can be the issue. Can you help me with that?
The issue is because you're attaching another click event handler to the #submitcForm button on every submission of the form (which happens when #saveBtn is clicked. Move the click handler outside of the validate() call and your code will work as you require.
$('#invoiceForm').validate({
// settings...
});
$('#submitcForm').click(function () {
$(".overlay-boxify2").toggleClass("open");
});
Updated fiddle
Use .off() to prevent attaching multiple click eventListener on your button
submitHandler: function (form) {
alert("here!");
$(".overlay-boxify2").toggleClass("open");
$('#submitcForm').off().click(function() { // see the use of .off()
$(".overlay-boxify2").toggleClass("open");
alert("hegdsgsd");
});
return false;
}
See more about .off()
I am a little lost in working on this and need some help please. I have a checkbox for terms and conditions that needs to be pressed before users can be registered. I have written some pseudo code in how I think it should be programmed.
//If user hovers over anchor
//Check to see if check box is checked
//If not checked
//Display alert saying "You need to check the terms and conditions"
//Else if - do not allow user to use anchor
//Else if user does check the box allow anchors to be used submitted
Hope that make sense. Here is some of the code I have written but I am getting nowhere! Please help :)
$("#checkbox1").click(function() {
$("#id-reg-submit").attr("disabled", !this.checked);
});
This above code is what I am using at the moment for users to actually click the box and prevents the moving forward in the sign up process.
What I need to do is get this to interacted with the other links (social media signup)
and the submit button, thus this is what I have so far:
$(".wp-social-login-provider").hover(function(){
alert("Click The Terms & Conditions!");
});
if($("#checkbox1").click(function() {
$("#id-reg-submit").attr("disabled", !this.checked);
});){
$(".wp-social-login-provider").hover(function(){
alert("Click The Terms & Conditions!");
});
}else{
alert("hi");
}
I have been playing with code hover on and off stated trying to figure this out and have wrapped some code in an if else statement.
if({$("#checkbox1").click(function() {
$("#id-reg-submit").attr("disabled", !this.checked);
}); && $( "a.wp-social-login-provider" ).hover(
function() {
$( this ).append( $( "<span> ***</span>" ) );
}, function() {
$( this ).find( "span:last" ).remove();
}
); )} else{
alert.("huhuuhu");
}
As you can tell I need a little help! Can anyone help me please?
Cheers,
Max.
I think this is what you want to achieve?
you can use event.preventDefault(); to stop the form from submitting.
$('input[type=button]').on('mouseenter', function() {
if($('input[type=checkbox]').prop('checked')) { alert('true');} else {alert('false');}
});
http://jsfiddle.net/c1d7j70u/
There are a few possible ways of getting this done, but since you have already provided a fiddle, I will follow your logic from there :)
Your logic in the fiddle you have provided is actually sound (sans a few typos), and I have expanded on it based on your requirements. Basically what you want to do is to disable the anchor link when it is hovered on, but only when the terms and conditions are not accepted/checked. Therefore, you can use a namespaced event (in case if you have other click events bound to it), which prevents the default link action from executing using e.preventDefault(). You turn this off if the if condition evaluates otherwise:
$('input[type=button], .something').on('mouseenter', function () {
if(!$('input[type="checkbox"]').prop('checked')) {
alert('Please accept the terms and conditions');
$('.something').on('click.disable', function(e) {
e.preventDefault();
});
} else {
$('.something').off('click.disable');
}
});
See fiddle here: http://jsfiddle.net/teddyrised/znrrsxyr/1/
The only flaw of this system is that if a user tabs his way to the anchor link, he/she can actually use the link because the if conditionals are only evaluated on mouseenter.
An alternative approach is instead of listening to events on the targets (button and anchor), you can listen to the onChange events of your checkbox, and decide if you want to enable the targets accordingly:
// Function: disable interactions
var disableActions = function() {
$('.something').on('click.disable', function(e) {
e.preventDefault();
});
$('input[type="button"]').prop('disabled');
$('input[type="button"], .something').on('mouseenter.disable', function() {
alert("Please check the terms and conditions.");
});
}
// Disable interactions at runtime
disableActions();
// Conditional onchange
$('input[type="checkbox"]').change(function() {
if(!$(this).prop('checked')) {
disableActions();
} else {
$('input[type="button"]').prop('disabled', false);
$('.something').off('click.disable');
$('input[type="button"], .something').off('mouseenter.disable');
}
});
See alternative solution here: http://jsfiddle.net/teddyrised/znrrsxyr/4/
Here is an efficient solution as per Jquery standard.
JSFIDDLE
<input type="checkbox" id="chkBox"/>
<input type="button" id="btn" value="Hello World">
MY link
$("#btn, #linkTo").on("mouseenter",function(){
// $("#chkBox").is(":checked") ? alert("checked"): alert("not checked");
});
$("#btn, #linkTo").on("click",function(e){
$("#chkBox").is(":checked") ? alert("call your function and replace the alert"): e.preventDefault();
});
I have a file upload system, after the upload button is clicked, the file is then uploaded through AJAX. While the file is uploaded I want to disable the click function that is on the "Select Images" button.
Currently this is the click function on the file-selection button:
$(document).ready(function() {
$("#file-button").click(function() {
$('#file').trigger('click');
});
});
That works fine, but I want to disable the click function in the progress phase of the XmlHttpRequest, and then re-enable the click function when I get a 200 response from the server. I have tried bind() and unbind() and it works fine in Chrome, but in firefox, during the upload, the button cannot be clicked, which is what I want, and then after I get a response from the server the button is re-enabled, but in firefox two file-selection dialogue windows open at the same time. This is because of the function above, and me binding the function again using bind(). Does anyone have any suggestions on how to enable, then disable the button without re-entering the code (function) of the click event.
Something like this would be preferable:
$('#file-button').disable();
$('#file-button').enable();
I have tried the on() and off() and they do not seem to work either.
SOLUTION -- thanks to Eric
I changed my initial click function to the following:
$(document).ready(function() {
$("#file-button").click(function() {
if ( $('#file-button').attr('disabled') == "disabled" ) {
return false;
}
else {
$('#file').trigger('click');
}
});
});
And I set the following to disable the button
$('#file-button').attr('disabled','disabled');
And this to re-enable it:
$('#file-button').removeAttr('disabled');
Disable the button using jQuery $.prop() function:
$("input[type=submit]").prop('disabled', true);
Add a conditional to the click handler to check if the button is disabled:
$("#file-button").click(function() {
if (!$(this).is(':disabled')) {
$('#file').trigger('click');
}
});
Later on re-enable the button:
$("input[type=submit]").prop('disabled', false);
Or you might be able to use the submit event instead of click, if there is a form involved:
$("#whatever-your-form-is").on('submit', function() {
$('#file').trigger('click');
});
Try Attr jQuery function.
$('#file-button').attr('disabled','disabled');
$('#file-button').removeAttr('disabled');
Tested Code
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#file-button").click(function(e)
{
e.preventDefault();
$(this).attr('disabled','disabled');
return false;
});
});
</script>
<input type="button" id="file-button" value="ClickMe" />
You have to refer input button in order to disable button ,
Something like below
$("input[type=submit]").prob('disabled', true);
$("inpur[type=submit]").prob('disabled', false);
What I want to happen is, when you click a link (id="dontFollow"), it triggers a click on a different link(id="follow") and stops you from following the original link.
This is how I thought it should be done-
$("#dontFollow").click(function(e){
$("#follow").click();
e.preventDefault();
});
... but it's not working. Whats wrong with my code?
UPDATE:
This is a little more tricky than I originally explained. It appears that I need to "click" on the other link to trigger some other events to cause my page to slide to the anchor. Your suggestions for "window.location" does change the window location but it's not triggering my slide events.
$("#dontFollow").click(function(){
window.open($("#follow").attr('href'));
return false;
});
just return false
Simply have the function return false;
I don't think you can "click a link" programmatically, you can however navigate by setting window.location.href
$('#dontFollow').attr('href','#').click(function(){
window.location.href = $('#follow').attr('href');
});
Your code is correct. Using e.preventDefault() will prevent you from following the link being clicked.
You have't stated what specifically isn't working, but if you're trying to visit the href of the other link, then do this:
$("#dontFollow").click(function(e){
window.location = $("#follow").attr('href');
e.preventDefault();
});
$('#XynBp0').find('input').each(function(){
if ($(this).attr('value') == 'Cancel'){
$(this).trigger('click');
}
});
doesn't work in IE7
it's strange but try to create a custom event
$('#XynBp0 input').bind('custom',function(){
//code
})
$('#XynBp0').find('input').each(function(){
if ($(this).attr('value') == 'Cancel'){
$(this).trigger('custom');
}
});
Does this work?
$.click() (or $.trigger('click')) doesn't simulate a mouse click; it fires off any onclick events bound to that element. If you haven't assigned an onclick event to that input you're searching for, nothing will happen.
It sounds like you're trying to submit the form with a traditional submit button (e.g. <input type="submit" value="Cancel">). If that's the case, you may have to use $(yourform).submit() to submit the form, in combination with some handling of the data sent to the server to simulate clicking the Cancel button.
Is it wrapped in a dom ready event? Might help if you provide more code.
$(function () {
$('#XynBp0').find('input').each(function () {
if ($(this).attr('value') == 'Cancel') {
$(this).trigger('click');
}
});
});
Your code snippit doesn't make any sense, you are clicking inputs if they are canceled?
Here's some things to clean up in your code
$('input','#XynBp0').each(function () {
var $this = $(this);
if ( this.value === 'Cancel' ) { //Don't need jQuery here
$this.trigger('click'); //Probably don't need it here either
}
});
What does click even do? If you are trying to submit a form, use form.submit();