I am using the following javascript to hide a form if the user clicks on a checkbox.
I am trying to get the code to run on page load but am not able to work out how to do this. Can anyone help?
$('#no_cage').change(function(){
if (this.checked) {
$('#cage_details').fadeOut();
} else {
$('#cage_details').fadeIn();
}
});
HTML:
<input name="no_cage" id="no_cage" type="checkbox" value="1" <?php echo $checked; ?>><label for="no_cage">Check if not required</label>
<div id="cage_details">
<form>
...
</form>
</div>
This works fine when a user clicks on the checkbox. But does not when it pulls from the DB and the checkbox is already selected on page load.
Just add this code inside the document ready handler. It will trigger the change event handler without it needing to actually change...
$('#no_cage').trigger("change");
Alternatively, just trigger the event where you declare it...
$('#no_cage').change(function(){
if (this.checked) {
$('#cage_details').fadeOut();
}
else {
$('#cage_details').fadeIn();
}
}).trigger("change");
That will add the event handler and then immediately execute it, in order to set the form to the correct state when the document has loaded.
You can either change the checked property or trigger the change event.
$(function() {
$('#no_cage').change(function() {
if (this.checked) {
$('#cage_details').fadeOut();
} else {
$('#cage_details').fadeIn();
}
});
// Change the checked property
$('#no_cage').prop('checked', true);
// OR trigger the change event
// $('#no_cage').trigger('change');
});
Related
When using customized checbox (i.e., icheck v1.0.1 from the website http://icheck.fronteed.com/), i am not able to use the "onclick" and "onchange" functions that i create manually. I have to use the custom "ifClicked" and "ifChanged" functions that the plugin provides.
Here is my code:-
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="divchkBox">
<input type="checkbox" id="extEmailChk" name="custEmailChkBox" onchange="foo()"/><br />
</div>
<script>
function foo(){
alert("hi");
}
</script>
</body>
</html>
But the "foo" function doesn't get called. I have to use the custom "ifChanged" function.
<script>
$('#divchkBox input').on('ifClicked', function (event) {
alert("hi");
});
</script>
I have tried to add the "onclick","onchange" functions in many ways but nothing works.
Actually i need to show a confirm box at the click of the checkbox and depending on the confirmation value(i.e., whether the user clicks 'OK' or 'Cancel') toggle or retain the checkbox's checked state. But since i am using this plugin's custom callbacks, even though i set the checked property of the checkbox as checked/unchecked in the 'else' part(i.e., if i click 'Cancel' button) at the end of function call the checkbox's value gets altered instead of getting retained.
Here is the code i am using:-
$('#divchkBox input').on('ifClicked', function (event) {
var checkbox = document.getElementById("extEmailChk");
if (checkbox.checked) {
var result = confirm("Are you sure you DONT want to send email to customer?");
if (result) {
$('#extEmailChk').iCheck('uncheck');
}
else {
$('#extEmailChk').iCheck('check');
}
}
else {
var result = confirm("Are you sure you want to send email to customer?");
if (result) {
$('#extEmailChk').iCheck('check');
}
else {
$('#extEmailChk').iCheck('uncheck');
}
}
});
I am achieving the functionality i want when i am creating custom methods for the click and change events of the checkbox, but not when i am using the icheck callbacks.
Please help...
I have a gridview, I've added a Checkbox column.
With checkbox select all, I am using jQuery to check all the checkboxes.
Following code is what i have tried,
function checkBoxSelectAll() {
$("#chkSelectAll").click(function () {
$('input:checkbox').not(this).prop('checked', this.checked);
});
}
I used DevExpress Gridview in MVC5, This is my code in View
#(Html.DevExpress()
.GridView(settings =>
{
//settings.Settings.ShowVerticalScrollBar = true;
settings.Height = Unit.Percentage(100);
settings.SettingsPager.Mode = GridViewPagerMode.ShowAllRecords;
settings.Settings.ShowFooter = true;
settings.Name = "gvw1";
settings.Width = Unit.Percentage(100);
settings.CallbackRouteValues = new
{
Controller = "Vehicle",
Action = "ListPartial"
};
settings.SettingsBehavior.AllowGroup = false;
settings.SettingsBehavior.AutoExpandAllGroups = true;
settings.KeyFieldName = "Id";
settings.Columns.Add("VehicleGroupName", Html.GetResource("group")).GroupIndex = 0;
settings.Columns.Add(column =>
{
column.SetHeaderTemplateContent(content =>
{
ViewContext.Writer.Write(string.Format("<input type='checkbox' name='chkSelectAll' id='chkSelectAll' onchange='checkBoxSelectAll()'/>"));
});
column.SetDataItemTemplateContent(c =>
{
ViewContext.Writer.Write(string.Format("<input type='checkbox' name='chkID' id='" + #c.KeyValue + "' />"));
});
});
Devexpress Gridview generate HTML below
<tr id="gvw1_DXDataRow1" class="dxgvDataRow_DevEx">
<td class="dxgvIndentCell dxgv" style="width:0px;border-left-width:0px;border-bottom-width:0px;"> </td>
<td id="gvw1_tccell1_1" class="dxgv" style="border-left-width:0px;">
<input type="checkbox" name="chkID" id="1657">
</td>
</tr>
It works good in Chrome, Safari, Opera, IE11, Microsoft Edge.
But in firefox, at the first time, It doesn't work. (When I click on the checkbox select all, all checkbox in this gridview doesn't checked).
Then I unchecked the Checkbox Select All, then I checked it again, It worked, All checkbox in gridview be checked.
Anyone can tell me why?
I am using jQuery 1.9.1.
Sorry for my bad English.
Thanks a lot,
Truong Mai
You are calling javascript function checkBoxSelectAll for every click on select all checkbox and registering click handler every time. Instead you need to register click handle or change handler only once when document get loaded.
try below code
$(document).ready(function(){
$("#chkSelectAll").change(function () {
$('input:checkbox').not(this).prop('checked', this.checked);
});
});
As given above the problem is how you are registering the event handler. You are adding the handler which actually sets the checked property only on change of the all checkbox, so when the first click happens the handler which really changes the checked property is not present so it is not fired.
When the second click happens, you have already added a click handler which will add the desired click behavior, but now you are adding an additional click handler so the 3rd click will trigger the jQuery handler twice.
As discussed above the solution is to use a single click handler which is registered in the dom ready handler like
jQuery(function ($) {
$("#chkSelectAll").click(function () {
$('input:checkbox').not(this).prop('checked', this.checked);
});
})
But going back to why it is working in chrome, I think it is because of the choice of event handler you have choose, you are calling checkBoxSelectAll in an onchange handler, but it looks like the order of change and click handler order defers in FF and other browsers. In chrome the change event is fired first then the click handlers... so by the time the click handlers are triggered your checkBoxSelectAll would have already added the jQuery handlers causing the click to work. But in FF the click handlers is fired first then the change handler so when click is processed there is no jQuery handler.
$("#chkSelectAll").on('click change', function(e) {
snippet.log('event: ' + e.type)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<input id="chkSelectAll" type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
I have three radio buttons and I want, by default, to have the "BOTH" location which has a value of 3 to be clicked on page load so that it will run my jQuery post function. The radio button is filled-in giving the appearance of being clicked, but the click is not happening to post my function. Once I change the radio button however, the code works fine.
This is my code:
$("input:radio[name='location'][value='3']").click();
$('input[name="location"]').change(function() {
var location = $('input[name="location"]:checked').val(); var category = getUrlVars()["category"];
$.post(
'db/functions/package_conf.php',
{category:category, location:location},
function(data) {
$('#package_info').html(data);
});
});
Would you try to register the event handle first before trigger the event? $("input:radio[name='location'][value='3']").click(); after the .change' event..
you may consider use the checked too, like $("input:radio[name='location'][value='3']").prop("checked", true).
but for my personally preference, any default state should be done before hand and not the in the script, for example initiate your radio DOM element to have checked property <input type="radio" value="3" checked />, and then onLoad script call the post directly (anyway POST is not designed for this purpose, just imagine POST as to save something, if you just want to get/query some data, GET would be more reasonable)
click was triggered before the change's event handler was regestered.
$('input[name="location"]').change(function() {
var location = $('input[name="location"]:checked').val(); var category = getUrlVars()["category"];
$.post(
'db/functions/package_conf.php',
{category:category, location:location},
function(data) {
$('#package_info').html(data);
});
});
$("input:radio[name='location'][value='3']").click();
$(window).on('load', (e) => { $("#test").focus() })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="test" value="23" type="number" style="font-size:30px;width:150px;">
How come the following code does not work. I prevent the default action on the event. Then I want to check the box anyway.
html
<input type="checkbox" class="checkbox" />
javsacript
$('.checkbox').click( function(e) {
e.preventDefault();
// some logic happens... now i may decide to check the box (in this case we want to check it for testing)
$('.checkbox').prop('checked',true);
});
You would think clicking the checkbox would still check the box.. but it doesnt. Check the fiddle to see what I mean.
http://jsfiddle.net/5KDH8/
I have also tried using the attr function without any luck.
You have to put the code that sets the "checked" property in a separate event loop:
setTimeout(function() { $('.checkbox').prop('checked', true); }, 1);
Either the browser or the library has to un-set the checkbox after the event handler returns, because it sets it in response to the click before the handler is invoked.
$('.checkbox').click( function(e) {
// do some logic that returns true or false
if (!mylogic) {
return false;
// returning false will prevent the checkbox to be checked.
}
});
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.)