Page 1 of 1

Pass selected values frm two dropdown list with submit btn

Posted: Tue Oct 13, 2009 5:39 am
by little_girl
I'm new to php and currently I'm working on an assignment where the form has two drop-down list and a submit button and this is created using php ajax. I would like to know how to pass the selected values from the two drop down list to java script file and it will only do that after clicked the submit button.

Currently the submit button is not working and the selected values of drop-down list are not passing to the javascript. Hope someone could help me out. Thanks in advance.

Below is my code:

Startpage

Code: Select all

 
script type="text/javascript" src="selecttidmth.js"></script>
 
<title>Report</title>
</head>
 
<body>
<form action="getID.php" method="get">
Magaizne:
<select name="tid" onchange="showTid(this.value)">
<option value="">---Select---</option>
<option value="1">Magazine 1</option>
<option value="2">Magazine 2</option>
<option value="3">Magazine 3</option>
<option value="4">Magazine 5</option>
</select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
 
Month:
<select name="mth" onchange="showMonth(this.value)">
<option value="">---Select---</option>
<option value="Jan">January</option>
<option value="Feb">February</option>
<option value="Mar">March</option>
<option value="Apr">April</option>
<option value="May">May</option>
<option value="Jun">June</option>
<option value="Jul">July</option>
<option value="Aug">August</option>
<option value="Sept">September</option>
<option value="Oct">October</option>
<option value="Nov">November</option>
<option value="Dec">December</option>
</select> &nbsp; &nbsp;
 
<input type="submit" name="submit" Value="Submit">
</form>
 
<div id="txtHint"></div>
 
Javascript

Code: Select all

 
var xmlhttp;
 
function showTid(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
 
function showMonth(str2)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
  
var url="getID.php";
url=url+"?q="+str+"?m="+str2;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
 
function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
 
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}
 

Re: Pass selected values frm two dropdown list with submit btn

Posted: Tue Oct 13, 2009 8:26 am
by kthomp53
When you use ajax, you don't submit a form like a regular form.. The ajax (javascript) does that for you.
You should have the javascript file linked in your main page.
Your submit button should just be a button that calls your javascript like so:

<input type="button" onclick="javascript:yourajaxfunction()" value="Go!" />

So after you input fields into the form, the ajax is executed when you click the button.


Now to send the data you should use javascript to obtain the form field values:

Example:

Code: Select all

function showMonth()
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var str = document.yourform.elementname.value;
var str2 = document.yourform.elementname2.value;
var url="getID.php";
url=url+"?q="+str+"?m="+str2;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

Re: Pass selected values frm two dropdown list with submit btn

Posted: Tue Oct 13, 2009 7:16 pm
by little_girl
I have tried according to your answer suggestion, but it still not working. I got the error message : "Object Expected" for the line "Submit button".

The submit button that calls the javascript, I have changed as below:

Code: Select all

 
<input type="button" name="submit" onclick="javascript&#058;showMonth()" value="Submit">
 

Javascript:

Code: Select all

 
function showMonth()
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
  return true;
}
 
var str = document.f1.tid.selectedValue;
var str2 = document.f1.mth.selectedValue;
var url="getID.php";
url=url+"?q="+str+"?m="+str2;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
 
 

kthomp53 wrote:When you use ajax, you don't submit a form like a regular form.. The ajax (javascript) does that for you.
You should have the javascript file linked in your main page.
Your submit button should just be a button that calls your javascript like so:

<input type="button" onclick="javascript:yourajaxfunction()" value="Go!" />

So after you input fields into the form, the ajax is executed when you click the button.


Now to send the data you should use javascript to obtain the form field values:

Example:

Code: Select all

function showMonth()
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var str = document.yourform.elementname.value;
var str2 = document.yourform.elementname2.value;
var url="getID.php";
url=url+"?q="+str+"?m="+str2;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

Re: Pass selected values frm two dropdown list with submit btn

Posted: Tue Oct 13, 2009 8:08 pm
by kthomp53
Try adding this to your select elements:

onchange="javascript:this.blur();"

AND

Try using .value instead of .selectedvalue

Re: Pass selected values frm two dropdown list with submit btn

Posted: Tue Oct 13, 2009 8:30 pm
by little_girl
I have changed according to your suggestion. It still given me the error message:Object expected for the input button "Submit".

Code: Select all

 
<form name="f1" action="getID.php" method="get">
Provider:
<select id="tid" name="tid" onchange="javascript&#058;this.blur()">
<option value="">---Select---</option>
<option value="1">Magazine 1</option>
<option value="2">Magazine 2</option>
<option value="3">Magazine 3</option>
<option value="4">Magazine 4</option>
</select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
 
Month:
<select id="mth" name="mth" onchange="javascript&#058;this.blur()">
<option value="">---Select---</option>
<option value="Jan">January</option>
<option value="Feb">February</option>
<option value="Mar">March</option>
<option value="Apr">April</option>
<option value="May">May</option>
<option value="Jun">June</option>
<option value="Jul">July</option>
<option value="Aug">August</option>
<option value="Sept">September</option>
<option value="Oct">October</option>
<option value="Nov">November</option>
<option value="Dec">December</option>
</select> &nbsp; &nbsp;
 
<input type="button" name="submit" value="Submit" onclick="javascript&#058;checkForm()">
</form>
 
Javascript file:

Code: Select all

 
function checkForm()
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
  return true;
}
 
var str = document.f1.tid.value;
var str2 = document.f1.mth.value;
var url="getID.php";
url=url+"?q="+str+"?m="+str2;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
 

Re: Pass selected values frm two dropdown list with submit btn

Posted: Wed Oct 14, 2009 8:21 am
by kthomp53
okay, instead of using document.formname.elementname.value

try giving the select element an id and try:

document.getelementbyid().value

Re: Pass selected values frm two dropdown list with submit btn

Posted: Wed Oct 14, 2009 11:11 pm
by little_girl
Thanks alot. The problem has solved.