Develop Reference

Javascript global variable vs. HTML data attribute

When we use $(this).data('options',$('#send1 option').clone());, it works, but when I use a global variable to store list data, it does not work. What is the difference between these two methods?
First method (works): This code clones data to the data attribute and then filters and copies to both send1 and send2.
$("#receiver").change(function() {
if ($(this).data('options') == undefined) {
/* Takes an array of all options-2 and kind of embeds it in select1 */
$(this).data('options',$('#send1 option').clone());
}
if ($(this).data('options-2') == undefined) {
$(this).data('options-2',$('#send2 option').clone());
}
var id1 = $(this).val();
console.log(id1);
var options1 = $(this).data('options').filter('[value=' + id1 + ']');
var options2 = $(this).data('options-2').filter('[value=' + id1 + ']');
$('.send1 ').html(options1);
$('.send2 ').html(options2);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<h5>Hello ListBox</h5>
<div>
<select name="Receiver" id="receiver">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select class="send1" name="ShipFrom1" id="send1">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
<select class="send2" name="ShipFrom2" id="send2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
</div>
Second method (doesn't work): This code uses a Javascript global variable. I am trying to clone the send1 options to a and then filter the global variable according to the value of receiver. Then, I copy the a result to both send1 and send2.
var a = $('#send1 option').clone();
$("#receiver").change(function() {
var id1 = $(this).val();
console.log(id1);
var options1 = a.filter('[value=' + id1 + ']');
$('.send1 ').html(options1);
$('.send2 ').html(options1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div>
<select name="Receiver" id="receiver">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select class="send1" name="ShipFrom1" id="send1">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
<select class="send2" name="ShipFrom2" id="send2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
</div>

I don't think you are using the best method for this ...
I suggest:
function setOption() {
var receiverVal = $('#receiver').val()
$('#send1 option:not(.'+receiverVal+')').hide();
$('#send2 option:not(.'+receiverVal+')').hide();
$('#send1 option.'+receiverVal).show();
$('#send2 option.'+receiverVal).show();
$('#send1 option:visible').first().attr('selected', 'selected');
$('#send2 option:visible').first().attr('selected', 'selected');
}
setOption();
$("#receiver").change(setOption)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<select name="Receiver" id="receiver">
<option value="fruit" >Fruit</option>
<option value="animal">Animal</option>
<option value="bird" >Bird</option>
<option value="car" >Car</option>
</select>
<select class="send1" name="ShipFrom1" id="send1">
<option value="10" class="fruit" >Banana </option>
<option value="11" class="fruit" >Apple </option>
<option value="12" class="fruit" >Orange </option>
<option value="21" class="animal" >Wolf </option>
<option value="22" class="animal" >Fox </option>
<option value="23" class="animal" >Bear </option>
<option value="31" class="bird" >Eagle </option>
<option value="32" class="bird" >Hawk </option>
<option value="41" class="car" >BWM <option>
</select>
<select class="send2" name="ShipFrom2" id="send2" class="bird">
<option value="10" class="fruit" >Banana </option>
<option value="11" class="fruit" >Apple </option>
<option value="12" class="fruit" >Orange </option>
<option value="21" class="animal" >Wolf </option>
<option value="22" class="animal" >Fox </option>
<option value="23" class="animal" >Bear </option>
<option value="31" class="bird" >Eagle </option>
<option value="32" class="bird" >Hawk </option>
<option value="41" class="car" >BWM <option>
</select>

How to make an if statement to disable select option?

I have three select menus where the user selects a subject, year and season. However, I want it so that if the user selects the year '2019', the 'Fall' option will get disabled.
<select name="Subject">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</select>
<select name="Year">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select name="Season">
<option value="Spring">Spring</option>
<option value="Fall">Fall</option>
</select>

Create and event handler for the Year's change event and disable the season based on what Year's new value is.
https://jsfiddle.net/075fnm4a/
HTML
<select name="Subject">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</select>
<select name="Year">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select name="Season">
<option value="Spring">Spring</option>
<option value="Fall">Fall</option>
</select>
Jquery
$(document).ready(function(){
$('select[name="Year"]').on('change',function(){
var $this = $(this);
$('select[name="Season"]').find('option[value="Fall"]').prop('disabled', ($this.val() == '2019') ); // disabled or enabled
});
$('select[name="Year"]').trigger('change');
});

Like this.
document.querySelector('#year').onchange = ev => {
const value = ev.target.value;
if (value === '2019') {
document.querySelector('#fall').disabled = true;
} else {
document.querySelector('#fall').disabled = false;
}
}
<select name="Subject">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</select>
<select name="Year" id="year">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select name="Season">
<option value="Spring">Spring</option>
<option value="Fall" id="fall" disabled>Fall</option>
</select>

<select name="Subject">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</select>
<select name="Year" id="years">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select name="Season" id="seasons">
<option value="Spring">Spring</option>
<option value="Fall">Fall</option>
</select>
$('#years').on('change', function(){
if($(this).val()==='2019'){
$("#seasons option").each(function()
{
if($(this).val() === 'Fall'){
$(this).attr('disabled', 'disabled');
}
});
}
});

You can onchange event and bind callback to it that get season select element and enable and disable Fall season according to selection value
<select name="Subject">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</select>
<select name="Year" onchange="changeYear(this.value)">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select name="Season">
<option value="Spring" >Spring</option>
<option value="Fall" disabled>Fall</option>
</select>
<script>
function changeYear(value)
{
var seasons = document.getElementsByName("Season")[0].options;
var fallSeason = Array.apply(null, seasons).find(season => season.value === 'Fall');
fallSeason.disabled = (value==='2019')
}
</script>

Get data from Select box

I have a select box in html and Ajax which calls a php page that returns the values of the selected option.
The problem is that when I want to send data to another php page the selection that I got from the ajax call does not get sent.
Index code:
<!DOCTYPE html>
<html>
<head>
<title>Booking - Online Belt</title>
</head>
<body>
<center><h3>Book Your Private Transfer</h3>
<form action="./elabora.php" method="POST" id="formregservizio">
<p>DATA
<input type="date" name="data"/>
HOURS <select name="ore">
<option value="00" selected>00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="vuoto"></option>
</select>
Minuti:<select name="minuti">
<option value="00" selected>00</option>
<option value="05">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
Passeggeri:<select name="pax">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
Large Bag<select name="large_bag">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
Small Bag<select name="small_bag">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select></p>
<!-- SEZIONE FROM -->
<p>FROM <select name="FROM" id="from">
<option value="vuoto">Select...</option>
<?php
include('./includedb.php');
$result = $conn->query("SELECT DISTINCT areak FROM weblocalita ORDER BY ordinamento ASC");
while($row = mysqli_fetch_array($result)) {
echo '<option value="'.$row['areak'].'">'.$row['areak'].'</option>';
}
?>
</select>
<!-- SEZIONE sub_FROM -->
<select name ="subfrom" id="subfrom">
<option value="vuoto">Select...</option>
</select>
</p>
<!-- SEZIONE TO -->
<p>FROM
<select name="to" id="to">
<option value="vuoto">Select...</option>
<?php
include('./includedb.php');
$result = $conn->query("SELECT DISTINCT areak FROM weblocalita ORDER BY ordinamento ASC");
while($row = mysqli_fetch_array($result)) {
echo '<option value="'.$row['areak'].'">'.$row['areak'].'</option>';
}
?>
</select>
<!-- SEZIONE sub_TO -->
<select name="subto" id="subto">
<option value="vuoto">Select...</option>
</select>
</p>
<input type="submit" name="submit" value="NEXT">
</form>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$('#from').on('change',function(){
var scelta = $(this).val();
if(scelta){
$.ajax({
type:'POST',
url:'./update_status.php',
data:'scelta='+scelta,
success:function(html){
$('#subfrom').html(html);
}
});
}else{
$('#subfrom').html("<option>Errore</option>");
}
});
});
$(document).ready(function(){
$('#to').on('change',function(){
var sceltadestinazione = $(this).val();
var sceltadopo = $('#subfrom').val();
if(sceltadestinazione){
$.ajax({
type:'POST',
url:'./update_status.php',
data:'sceltadestinazione='+sceltadestinazione,
success:function(html){
$('#subTO').html(html);
}
});
}else{
$('#subto').html("<option>Errore</option>");
}
});
});
</script>
</center>
</body>
</html>
Then the PHP page that is called by the Ajax Request:
update_status.php
<?php
include('./includedb.php');
$area = $_POST['scelta'];
if($area == 'vuoto') {
echo '<option value="'."vuoto".'">'."Select...".'</option>';
}
$result = $conn->query("SELECT DISTINCT klocalita FROM weblocalita WHERE areak = '$area'");
while($row = mysqli_fetch_array($result)){
echo '<option value="'.$row['klocalita'].'">'.$row['klocalita'].'</option>';
}
$areadestinazione = $_POST['sceltadestinazione'];
$sceltadopo = $_POST['sceltadopo'];
if($areadestinazione == 'vuoto') {
echo '<option value="'."vuoto".'">'."Select...".'</option>';
}
$result = $conn->query("SELECT DISTINCT klocalita FROM weblocalita WHERE areak = '$areadestinazione'");
while($row = mysqli_fetch_array($result)){
echo '<option value="'.$row['klocalita'].'">'.$row['klocalita'].'</option>';
}
?>
And now from Index.php I want to send the data to another page in php called Elabora.php that should display all data sent.
Elabora.php
<center>
<h3>Configure Service</h3>
Dati Inseriti:<br>
Date: <?php echo $_POST['data']; ?>
Hours: <?php echo $_POST['ore']; ?>
Minutes: <?php echo $_POST['minuti']; ?>
Px: <?php echo $_POST['pax']; ?>
Large Bags: <?php echo $_POST['large_bag']; ?>
Small Bags: <?php echo $_POST['small_bag']; ?><br>
From: <?php echo $_POST['from'] . $_POST['subfrom'];?><br>
To: <?php echo $_POST['to'] . $_POST['subto'];?><br>
</center>
Now the problem is that the select boxes with the IDs: From and To are not sent to the elabora.php page.

Your Select need a name-attribute, if you want to get it through POST.
<select id="subTO">
<option value="vuoto">Select...</option>
</select>
should be:
<select id="subTO" name="subTo">
<option value="vuoto">Select...</option>
</select>
I also noticed:
<select name=TO id=to>
You're missing the "" here.

Replace value from select inside hidden input

The main mission was to add the values from two select dropdowns to one hidden input. That works great but now if a user decides to choose another input, it adds to the hidden input value rather than replace it.
Live Code: DEMO
$('#expireMM').change(function() {
var theMonth = $(this).val();
$("#expiry").val( theMonth )
})
$('#expireYY').change(function() {
var theYear = $(this).val();
$('#expiry').val($('#expiry').val() + "/" + theYear );
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="expireMM" id="expireMM" >
<option value="">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="expireYY" id="expireYY" >
<option value="">Year</option>
<option value="17">2017</option>
<option value="18">2018</option>
<option value="19">2019</option>
<option value="20">2020</option>
<option value="21">2021</option>
</select>
<input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4" />

You can update the value of the #expiry input in an external function, and not based on the current value:
function getExpirationDate() {
var monthVal = $('#expireMM').val();
var yearVal = $('#expireYY').val();
if (monthVal && yearVal) {
$('#expiry').val(`${monthVal}/${yearVal}`);
} else if (monthVal) {
$('#expiry').val(monthVal);
}
console.log($('#expiry').val());
}
$('#expireMM').change(getExpirationDate)
$('#expireYY').change(getExpirationDate)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="expireMM" id="expireMM" >
<option value="">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="expireYY" id="expireYY" >
<option value="">Year</option>
<option value="17">2017</option>
<option value="18">2018</option>
<option value="19">2019</option>
<option value="20">2020</option>
<option value="21">2021</option>
</select>
<input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4" />

$("#expiry").val($("#expireMM").val() + "/" + $("#expireYY").val())

Why not generate you expiry input value on form submit?
Here is the code.
jQuery(document).ready(function($) {
$("#my-form").submit(function() {
var monthYearVal = $('#expireMM').val() + "/" + $('#expireYY').val();
$("#expiry").val(monthYearVal);
$(this).submit();
return false;
});
});
<form id="my-form" method="POST">
<table class="table">
<tr>
<td>
<select name="expireMM" id="expireMM">
<option value="">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="expireYY" id="expireYY">
<option value="">Year</option>
<option value="17">2017</option>
<option value="18">2018</option>
<option value="19">2019</option>
<option value="20">2020</option>
<option value="21">2021</option>
</select>
<input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4" /></tr>
</td>
<tr>
<tr>
<td colspan="2" align=center>
<input type="hidden" name="cvv">
<input class="right-col-inner-box" type="submit" value="Submit">
</td>
</tr>
</table>
</form>

Select box Date validation in javascript

I am not even new to javascript. just learning through some tutorials, but i have three slelct boxes in html as follows.
Html form.
<table>
<form id="enrolment" name="enrolment" onsubmit="return datevalidate();" action="" method="POST" >
<div style="text-align: center"><h3>Enrolement Form</h3></div>
<hr>
<div style="text-align: center"><h4>Personal details.</h4></div>
<hr>
<tr>
<td align="left">Course Date:</td>
<td align="left">
<select name="Coursedate" id="Coursedate">
<option selected="" value="Default">Date</option>
<option value="1">1</option>
<option value="2">2</optio
n>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="coursemonth" id="coursemonth">
<option selected="" value="Default">Month</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="courseyear" id="courseyear">
<option selected="" value="Default">year</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit" value="validate">
</td>
</tr>
</form>
</table>
And the javascript as follows
<script>
function datevalidate()
{
var d = new Date();
var date = d.getDate();
var month = d.getMonth()+1;
var year = d.getFullYear();
var cdate = document.getElementById("Coursedate").value;
var cmonth = document.getElementById("coursemonth").value;
var cyear = document.getElementById("courseyear").value;
if (cdate > date && cmonth >= month && cyear >= year)
{
alert("Date is greater");
}
else
if(cdate < date && cmonth > month && cyear >= year)
{
alert("Month and year greater");
}
else
if(cdate < date && cmonth >= month && cyear > year)
{
alert(" year greater");
}
else
if(cdate > date && cmonth < month && cyear > year)
{
alert(" year greater");
}
}
</script>
somehow i feel mysqlf that this is not very impressive.
How to get full validation in javascript. Any tutorials?
i need that the date should not exceed the current date.
Thanks in advance
Amod India

To better handle dates in Javascript, check out this other question: Compare two dates with JavaScript.
That being said, since you're talking about validation, because Javascript is a client-side language you can never get full date validation with your code. Someone can disable the code altogether by disabling Javascript, or they can rewrite the code and use it as the framework for an XSS attack.
The best way to do this is with a server side language like PHP, .Net, Java, and so forth.
Ultimately you would have the code only print dates that were before today's date, then the only way someone could submit a date in the future was if they were passing modified variables. Then, rather than falling back on a client-side language for the filtering you would use the server side language to validate the code and make sure that the variables were within parameters before passing the query to a database.

// day : 1-31
// month : 1-12
function dateIsValid(day, month, year) {
return !isNaN(new Date([month, day, year].join('/')).getDate());
}
It's not the prettiest, but I'm relying on the fact that an invalid date passed to the constructor for the Date class in JavaScript will give you a date object back whose timestamp is NaN.
So obviously this handles corner cases like leap years.
EDIT:
Actually, this isn't fool-proof. The days (up to 31) can overflow into the next month.
new Date([2, 31, 2012].join('/')); // Fri Mar 02 2012

i have done date validation such as Day,month as well as year validation using javascript
<html>
<head>
<title></title>
<script language = "Javascript">
// Required variable
var digits="0123456789";
//non-digit Characters which are allowed in phone number
var phoneNumChacters="()-";
//Chacter are allowed in international phone numeber
var validWorldPhoneCars=phoneNumChacters+ "+";
var minDigitsphoneNum=9;
function isInteger(k)
{
var i;
for(i=0; i<k.lenght; i++)
{
var h=k.charAt(i);
if((h<"0") ||(h>"9"))
return false;
}
// all are numbers
return true;
}
function trim(k)
{
var i;
var returnStringValue ="";
//character is not a whitespace, append to returnString.
for(i=0; i<k.lenght; i++)
{
var h=k.charAt(i);
if(h!=" ")
returnStringValue +=h;
}
return returnStringValue;
}
function stripCharsInBag(k, bag)
{
var i;
var returnStringValue="";
for(i=0; i<k.lenght; i++)
{
var h=k.charAt(i);
if(bag.indexOf(h)==-1)
returnStringValue +=h;
}
return returnStringValue;
}
function CheckInternationalPhoneNum(strPhone)
{
var bracket =3;
strPhone=trim(strPhone);
if(strPhone.indexOf("+")>1)
return false;
if(strPhone.indexOf("-")!=-1)
bracket=bracket+1;
if(strPhone.indexOf("(")!=-1 && strPhone.indexOf("(")>bracket)
return false;
var brchr=strPhone.indexOf("(");
if(strPhone.indexOf("(")!=-1 && strPhone.charAt(brchr+2)!=")")
return false;
if(strPhone.indexOf("(")==-1 && strPhone.indexOf(")")!=-1)
return false;
k=stripCharsInBag(strPhone,validWorldPhoneCars);
return (isInteger(k) && k.lenght>=minDigitsphoneNum);
}
function ValidateForm()
{
var phoneNumber =document.sampleForm.txtPhone;
if((phoneNumber.value==null)||(phoneNumber.value==""))
{
alert ("Please enter you phone number");
phoneNumber.focus();
return false;
}
if(phoneNumber.value<9)
{
alert("Number is Less then 9 ");
phoneNumber.focus();
return false;
}
if(CheckInternationalPhoneNum(phoneNumber.value)==false)
{
alert("Enter a valid number");
phoneNumber.value="";
phoneNumber.focus();
return false;
}
}
</script>
</head>
<body>
<center>
<form name="sampleForm" method="post" action="" onSubmit="return ValidateForm()">
<p>Enter a phone number : <input type="text" name="txtPhone"></p>
<p><input type="submit" name="Submit" value="Submit"></p>
</form>
</center>
</body>
</html>