Pass selected values frm two dropdown list with submit btn

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
little_girl
Forum Newbie
Posts: 20
Joined: Tue Oct 13, 2009 5:11 am

Pass selected values frm two dropdown list with submit btn

Post 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;
}
 
User avatar
kthomp53
Forum Newbie
Posts: 8
Joined: Mon Oct 12, 2009 6:12 pm

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

Post 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);
}
little_girl
Forum Newbie
Posts: 20
Joined: Tue Oct 13, 2009 5:11 am

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

Post 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);
}
User avatar
kthomp53
Forum Newbie
Posts: 8
Joined: Mon Oct 12, 2009 6:12 pm

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

Post by kthomp53 »

Try adding this to your select elements:

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

AND

Try using .value instead of .selectedvalue
little_girl
Forum Newbie
Posts: 20
Joined: Tue Oct 13, 2009 5:11 am

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

Post 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);
}
 
User avatar
kthomp53
Forum Newbie
Posts: 8
Joined: Mon Oct 12, 2009 6:12 pm

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

Post by kthomp53 »

okay, instead of using document.formname.elementname.value

try giving the select element an id and try:

document.getelementbyid().value
little_girl
Forum Newbie
Posts: 20
Joined: Tue Oct 13, 2009 5:11 am

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

Post by little_girl »

Thanks alot. The problem has solved.
Post Reply