Develop Reference

How to create a loop using jQuery

I want to execute the below code by creating a simple loop using jQuery, I can also change the classes if needed.
I want to shrink the code as much as possible.
$( ".btn1" ).click(function() {
$( this ).toggleClass( "act-btn1" );
});
$( ".btn2" ).click(function() {
$( this ).toggleClass( "act-btn2" );
});
$( ".btn3" ).click(function() {
$( this ).toggleClass( "act-btn3" );
});
$( ".btn4" ).click(function() {
$( this ).toggleClass( "act-btn4" );
});
$( ".btn5" ).click(function() {
$( this ).toggleClass( "act-btn5" );
});
$( ".btn6" ).click(function() {
$( this ).toggleClass( "act-btn6" );
});
$( ".btn7" ).click(function() {
$( this ).toggleClass( "act-btn7" );
});
$( ".btn8" ).click(function() {
$( this ).toggleClass( "act-btn8" );
});
$( ".btn9" ).click(function() {
$( this ).toggleClass( "act-btn9" );
});
$( ".btn10" ).click(function() {
$( this ).toggleClass( "act-btn10" );
});
$( ".btn11" ).click(function() {
$( this ).toggleClass( "act-btn11" );
});
$( ".btn12" ).click(function() {
$( this ).toggleClass( "act-btn12" );
});

for (let i = 0; i <= 12; i++) {
$( ".btn" + i ).click(function() {
$( this ).toggleClass( "act-btn" + i );
});
}

I don't know about your logic, And number of elements is dynamic or static. Anyway using simple loop like below may solve your problem.
for(let i = 1; i < 13; i++) {
$(`.btn${i}`).click(function() {
$(this).toggleClass(`act-btn${i}`);
});
}

The best way to do this would be to make a general class like .button and add it to every button, thun also make a general action class .btn-action, it would look somthing like this:
$('.button').on('click', function(){
$(this).toggleClass('btn-action');
})

JQuery Datepicker erases already filled date field

could anyone please help?
I am using jquery datepicker for several fields and in an update form in php and it updates dates in database. All seems to work great except the fact that if some of the date fields are already populated in DB, the datepicker does not display them and upon update it erases the value in DB too.
the php sample:
<script>
$( function() {
$( "#datepicker" ).datepicker();
$( "#datepicker" ).datepicker("option", "dateFormat", "yy-mm-dd");
} );
</script>
...
<td><input type="text" id="datepicker" name="IM_request" value="'.$row["IM_request"].'"/></td>
So the variable $row["IM_request"] does not display if datepicker is enabled. if i disable it, it works fine, but a lot of manual work.
Any idea how to make the datepicker-enabled input field to display the value from DB?

<input type="text" id="txtSelectedDate" value="20-01-01" />
$('#txtSelectedDate').datepicker({
showButtonPanel: true,
dateFormat: 'dd-mm-yy',
});
JSFiddle example : http://jsfiddle.net/LgTZt/211/

I finally found the solution. Instead of:
$( function() {
$( "#datepicker" ).datepicker();
$( "#datepicker" ).datepicker("option", "dateFormat", "yy-mm-dd");
} );
I should have used:
$( function() {
$( "#datepicker" ).datepicker({dateFormat: "yy-mm-dd"});
} );

Keep Input Date Jquery

I am choosing a date with submit. What I want to do is keeping this date on the form when I am redirected to another web page.
https://jsfiddle.net/92gd7v26/
I tried this but it's not working:
$name7=$_SESSION['date'];
$name8=$_SESSION['date2'];
$name9=$_SESSION['date3'];
<script>// <![CDATA[
$( function() { $( "#datepicker" ).datepicker(); $( "#datepicker2" ).datepicker(); $( "#datepicker3" ).datepicker();
$('#datepicker').datepicker({
inline: true,
showOtherMonths: true,
})
$("#datepicker").datepicker("setDate", $name7);
$("#datepicker2").datepicker("setDate", $name8);
$("#datepicker3").datepicker("setDate", $name9);
} );
// ]]></script>
I don't know what's wrong. I am able to get the "date" values from $name7,$name8 and $name9. But when I try to put them on .datepicker("setDate") I am not getting the values I sent..

How to combine checkbox with jquery Datepicker

I want to combine checkbox with jquery Datepicker such that when checkbox is checked, the datepicker should become disable & show predefined date.
$(function() {
$( "#from" ).datepicker({
defaultDate: "today",
changeMonth: true, dateFormat: 'yy-mm-dd 00:00:00',
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "today",
changeMonth: true,dateFormat: 'yy-mm-dd 00:00:00',
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
Once checkbox is checked then -
from = 2000-11-04 00:00:00 & to = today's date.
I am passing these values to HTML Form.
Please help me.

You can use datepicker method setDate(e.g $( "#from" ).datepicker('setDate', new Date());
So your code should look something like that:
$('#checkbox').change(function(){
if($(this).is(':checked')){
$( "#to" ).datepicker('setDate', new Date()).datepicker( "option", "disabled", true );
$( "#from" ).datepicker('setDate', new Date(2000, 11, 04)).datepicker( "option", "disabled", true );
}else{
$( "#to" ).datepicker( "option", "disabled", false);
$( "#from" ).datepicker( "option", "disabled", false);
}
});
Here's jsFiddle

You can try something like this:
Fiddle
Code
$(function() {
$('#date').datepicker({
dateFormat: 'dd-mm-yy',
altField: '#thealtdate',
altFormat: 'dd-mm-yyyy'
});
});
function disableDP() {
$("#date").attr("disabled", $("#chkDisable").is(":checked")).val("25-11-2015");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
Shown Field :
<input id="date" type="text" />
<br/>
<input type="checkbox" id="chkDisable" onclick="disableDP()">Disable DatePicker

Adding selectmenu on select that's calling functions

I have a script that loads html content to a div and applies jquery tabs at the same time. However, I want to get JQuery Selectmenu on my select at the same time.
I'm having trouble figuring out how to nest these.
I'll be continuing looking at the API Docs, and tutorials, stackoverflow etc.
BUT, In the meantime, I thought someone could help expedite the process.
This is my script as is:
$(function() {
var work = $( "#display" );
$( "#selector" ).change(function( event ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
});
});
This script works just like i want it to, but It doesn't get styled with my theme because it's not a selectmenu
I want my select to use selectmenu:
$(function() {
$( "#selector" ).selectmenu();
});
Attempt 1:
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu(
$( "#selector" ).change(function( event, ui ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
);
});
});
});
Attempt 2:
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu({
change: function( event ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
});
});
});
Attempt 3:
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu({
change: function( event, ui ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
});
});
});
Attempt 4:
This attempt loads the selectmenu theme, but kills functionality
$(function() {
$( "#selector" ).selectmenu();
});
$(function() {
var work = $( "#display" );
$( "#selector" ).change(function( event ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
});
});
Attempt 5:
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu ({
selectmenuchange: function( event, ui ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
}
});
});

So, i went back to the Jquery Documentation and found the correct syntax to make this work. I also learned a little more about how to use the console tab in developer tools view to track down syntax errors.
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu ({
change: function( event, data ){
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
}
});
});