pass 3 variables from a form to ajax

I have a form with 3 variables (day, month and year). I know how to pass one variable to a function, but how do I pass the three variables to a function when a users selects one parameter of the select box.

check the code for more info
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Naamloos document</title>
<script>
var xmlHttpfunction showDate(day, month, year)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
	{
 	alert ("Browser does not support HTTP Request")
 	return
 	}
var url="checkdate.php"
url=url+"?day="+day
url=url+"&month="+month
url=url+"&year="+year
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
 
function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}
 
function GetXmlHttpObject()
{
var xmlHttp=null;
try
 	{
 	// Firefox, Opera 8.0+, Safari
 	xmlHttp=new XMLHttpRequest();
 	}
catch (e)
 	{
 	//Internet Explorer
 	try
  	{
  	xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  	}
 	catch (e)
  		{
  		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  		}
 	}
return xmlHttp;
}
 
</script>
</head>
 
<body>
<form>
  <select name="day" onchange="showDate(this.value)">
    <option value="01">1</option>
    <option value="02">2</option>
    <option value="03">3</option>
    <option value="04">4</option>
    <option value="05">5</option>
    <option value="06">6</option>
    <option value="07">7</option>
    <option value="08">8</option>
    <option value="09">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="month" onchange="showDate(this.value)">
    <option value="01">1</option>
    <option value="02">2</option>
    <option value="03">3</option>
    <option value="04">4</option>
    <option value="05">5</option>
    <option value="06">6</option>
    <option value="07">7</option>
    <option value="08">8</option>
    <option value="09">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
  </select>
  <select name="year" onchange="showDate(this.value)">
    <option value="2008">2008</option>
    <option value="2009">2009</option>
    <option value="2010">2010</option>
    <option value="2011">2011</option>
    <option value="2012">2012</option>
    <option value="2013">2013</option>
    <option value="2014">2014</option>
    </select>
</form>
<p>
<div id="txtHint"><b>Checkdate comes here.</b></div>
</p>
</body>
</html>

Open in new window

LVL 2
Hori76Asked:
Who is Participating?
 
kurijovConnect With a Mentor Commented:
Your showDate function  header should looks something like this

showDate() {
day = document.getElementById('day_input_id');
month = document.getElementById('month_input_id');
year = document.getElementById('year_input_id');
//bla-bla-bla

}

Have a nice day...
0
 
kurijovCommented:
Oh.. and dont forget to get "value" property from day, month, and year variables.
0
 
Hori76Author Commented:
Thanks for you response, how do I pass the value property?
0
 
Hori76Author Commented:
Ok, great, i got it! Thanks for your help!

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Naamloos document</title>
<script>
var xmlHttp
function showDate()
{
day=document.getElementById('day').value;
month=document.getElementById('month').value;
year=document.getElementById('year').value;
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
	{
 	alert ("Browser does not support HTTP Request")
 	return
 	}
var url="checkdate.php"
url=url+"?d="+day
url=url+"&m="+month
url=url+"&y="+year
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
 
function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}
 
function GetXmlHttpObject()
{
var xmlHttp=null;
try
 	{
 	// Firefox, Opera 8.0+, Safari
 	xmlHttp=new XMLHttpRequest();
 	}
catch (e)
 	{
 	//Internet Explorer
 	try
  	{
  	xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  	}
 	catch (e)
  		{
  		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  		}
 	}
return xmlHttp;
}
 
</script>
</head>
 
<body>
<form>
<select name="day" id="day" onChange="showDate()">
    <option value="01">1</option>
    <option value="02">2</option>
    <option value="03">3</option>
    <option value="04">4</option>
    <option value="05">5</option>
    <option value="06">6</option>
    <option value="07">7</option>
    <option value="08">8</option>
    <option value="09">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="month" id="month" onchange="showDate()">
    <option value="01">1</option>
    <option value="02">2</option>
    <option value="03">3</option>
    <option value="04">4</option>
    <option value="05">5</option>
    <option value="06">6</option>
    <option value="07">7</option>
    <option value="08">8</option>
    <option value="09">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
  </select>
  <select name="year" id="year" onchange="showDate()">
    <option value="2008">2008</option>
    <option value="2009">2009</option>
    <option value="2010">2010</option>
    <option value="2011">2011</option>
    <option value="2012">2012</option>
    <option value="2013">2013</option>
    <option value="2014">2014</option>
    </select>
</form>
<p>
<div id="txtHint"><b>Checkdate comes here.</b></div>
</p>
 
</body>
</html>

Open in new window

0
 
Hori76Author Commented:
Thanks!
0
All Courses

From novice to tech pro — start learning today.