Check Value of a Drop Down Box without Submitting?

[BenzZz]

Hi,

I have three drop down boxes for a Date field; one each for days, month and year.

I want it so that when a year and month are selected they can be checked and then i can use those variables to insert the options into the days drop down box. However obviously i do not want to submit the month and year first, so is there a way to check the current selected value of a drop down box?

Thanks.

[diafol]

You can't use a datepicker?

You'll need to use js to do this if you don't want a submit on each dropdown selection.
There's a function here: http://snippets.dzone.com/posts/show/2099

that may be of help:

function daysInMonth(iMonth, iYear){
   return 32 - new Date(iYear, iMonth, 32).getDate();
}

So, I suggest you only have real values in YEAR and MONTH fields as you don't want to provoke an error. So whenever these fields are selected/changed they will run daysInMonth, which will return the number of days. This can be modified if you're using jQuery:

function daysInMonth(){
   var days = 33 - new Date($("#year").val(), $("#month").val(), 32).getDate();
   for(var i = 1; i < days; i++){
     output += '<option value="' + i + '">' + i + '</option>';
   }
   $("#days").html(output);
}

THis is not tested and I'm forever getting my js knickers in a twist.

//EDIT

Obviously you'll need to set up .change handlers for the month and year fields:

$('#year, #month').change(function(){
  var days = 33 - new Date($("#year").val(), $("#month").val(), 32).getDate();
   for(var i = 1; i < days; i++){
     output += '<option value="' + i + '">' + i + '</option>';
   }
   $("#days").html(output);
});

You need to place this within a document.ready script or place at the bottom of the page.

[BenzZz]

Earlier i found a function to calculate the number of days in a certain month and year on

int cal_days_in_month ( int $calendar , int $month , int $year )

This works fine however i currently have to enter the parameters. I just need to find out a way to insert the month and year selected as parameters without submitting?

[diafol]

This is php not js. Equally you could use:

date('t', mktime(0, 0, 0, $m, 1, $y));

If you want php, use ajax, but it involves a round trip to the server just to find the number of days. You'll still have to use js. ;)

[BenzZz]

Never touched js before so i'll have to look over it. Just saw parts on 'OnChange' which could be useful?

I'll try and get my head round it!
Thanks for the help.

[diafol]

My js code uses jQuery .change method which is analogous to the OnChange method in vanilla javascript. If you're starting out in js, it's an idea to get a feel for normal js before getting into jQuery, but there again, if you're just using js for the trivial bits of functionality, you could just dive into it. As you are reasonably constrained by the structure and there's so much support out there, you could build functions quite quickly.

[BenzZz]

Okay, i haven't got lots of time to look in depth at js as my project is mainly php so i'll probably dive straight into the jQuery.

Just a few questions to get my head round the code...

function daysInMonth(){
   var days = 33 - new Date($("#year").val(), $("#month").val(), 32).getDate();
   for(var i = 1; i < days; i++){
     output += '<option value="' + i + '">' + i + '</option>';
   }
   $("#days").html(output);
}

THis is not tested and I'm forever getting my js knickers in a twist.

//EDIT

Obviously you'll need to set up .change handlers for the month and year fields:

$('#year, #month').change(function(){
  var days = 33 - new Date($("#year").val(), $("#month").val(), 32).getDate();
   for(var i = 1; i < days; i++){
     output += '<option value="' + i + '">' + i + '</option>';
   }
   $("#days").html(output);
});

You need to place this within a document.ready script or place at the bottom of the page.

What does each of the code snippets do? Don't they both do the same thing?

Where it says e.g. "#days" is that the variable that should be in the select name="" for the checkbox?

Once the code has ran, do i still have to refer to the variable as $("#days") in php or does it go back to normal?

[diafol]

They do the same thing, but if you just leave it as the first example, you'll need to set up an OnChange attribute in both month and year dropdowns - bit messy.

The #days, #month, #year references mean that they are looking for:

<select id="days">...
<select id="month">...
<select id="year">...

PHP is NOT involved.
If you submit the form once you've selected the date in full, you just pick up the data from $_POST,.. etc.

Of course you could run an ajax call to php every time that the month or year was changed, but that's a bit extreme IMO.

[BenzZz]

Tried the second code snippet and the days drop down box still sppear to be empty?

[diafol]

Well, as I said, I'm no pro with JS - however, I don't think it's far off.
You have included the jquery library in the head and placed the code inside a document.ready?

[diafol]

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('#year, #month').change(function(){
  var days = 33 - new Date($("#year").val(), $("#month").val(), 32).getDate();
   for(var i = 1; i < days; i++){
     output += '<option value="' + i + '">' + i + '</option>';
   }
   $("#days").html(output);
});
});
</script>
</head>

[BenzZz]

You have included the jquery library in the head and placed the code inside a document.ready?

Have no idea about what to include?
What do you mean document.ready?

Sorry if these questions may be stupid, i have no experience with this.

[diafol]

You're too quick for me - see my last post...

[BenzZz]

I added the code but it still did not work.
Thanks for the help though.

[diafol]

Ok i'll have a look when i get home

[BenzZz]

Ok i'll have a look when i get home

Thanks

[kalaban]

excuse me, just an off topic question,
Is sir BenZzZ from philippines?

[BenzZz]

excuse me, just an off topic question,
Is sir BenZzZ from philippines?

No.

[diafol]

OK, had a look - no wonder you couldn't get it to work! Had a 'few' errors:
Try

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  function getDays(){
	var days = 32 - new Date($("#year").val(), $("#month").val()-1, 32).getDate();
   var output = "";
   for(var i = 1; i <= days; i++){
     output += '<option value="' + i + '">' + i + '</option>';
   }
   $("#days").html(output);  
  }
  getDays();
  
  
  	$('#year, #month').change(function(){
   		getDays();
	});
});
</script>

which the following:

<form>
	<select id="days">
    </select>
	<select id="month">
    	<option value="1">Jan</option>
    	<option value="2">Feb</option>
        <option value="3">Mar</option>
        <option value="4">Apr</option>
        <option value="5">May</option>
        <option value="6">Jun</option>
        <option value="7">Jul</option>
        <option value="8">Aug</option>
        <option value="9">Sep</option>
        <option value="10">Oct</option>
        <option value="11">Nov</option>
        <option value="12">Dec</option>            
    </select>
	<select id="year">
    	<option value="2010">2010</option>
        <option value="2011">2011</option>
        <option value="2012">2012</option>
        <option value="2013">2013</option>
    </select>

</form>

You can produce your years (and months for localization purposes) dynamically from php if req'd. Can't help thinking that this should have gone in the js forum though. :)

[BenzZz]

Thanks a lot :) that works great.

Just wondering, could you tell me how a few things work in it...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  function getDays(){
	[B]var days = 32 - new Date($("#year").val(), $("#month").val()-1, 32).getDate();[/B]
   var output = "";
   for(var i = 1; i <= days; i++){
     output += '<option value="' + i + '">' + i + '</option>';
   }
   $("#days").html(output);  
  }
  [B]getDays();[/B]
  
  
  	$('#year, #month').change(function(){
   		[B]getDays();[/B]
	});
});
</script>

I can see how most of it works. Just not sure fully of the lines in bold.
I know the first part calculates the number of days, just not sure how?

And i don't understand why the getDays() is called twice?

[diafol]

Ok:

var days = 32 - new Date($("#year").val(), $("#month").val()-1, 32).getDate();

This will take a bit of explaining, so forgive me if I don't go into detail.
It (obviously) gives the number of days in a specified month of a given year - it will even give the right answer for leap years.
You provide the details for a date:

new Date(year, previous month number, day overflow).getDate

This calculates by how much the day has been overflowed (1 for 31 day month, 2 for 30 day, 3 for 29 day and 4 for 28 day).

Then you take that away from 32, e.g. 32-1 = 31 (for 31 day month), etc...

getDays();

This is not called twice. It is called once on page load (see immediately below the function itself). You have to have this otherwise the days dropdown will be blank. You could however, populate days with php prior to page load, but as we're using js, why not use the function, right?

It is then only called if a change is made to either month or year dropdowns.

If you want to check when it is run, insert an alert into the function:

function getDays(){
   alert('getdays run');
  ...

OK, remember to mark this solved if it's done. :)

[BenzZz]

Thanks for taking the time for that, i get it now :)
Appreciate the help!