php drop down list onChange not submitting the form

Hi,
This is a very simple code where I am populating a drop down list from mysql table PERIODS and upon selecting the value from the drop down, I want the starttime and endtime fields filled from the table PERIODS. Then the details are entered into another table on clicking the submit button.

I thought this is very simple and can be finished in 20 to 30 minutes. But I am struggling with this for more than 2 hours because the drop down change event does not do anything. I tried many variations and nothing works.

I don't want to use AJAX here, because, this code is to demonstrate to a beginner coder.  Also, if you find anything insecure in the code, please feel free to tell me.

Thanks.
<? 
$host = "localhost";	//This is your mysql server host name
$db_user="lessons";//"dbuser";		//Substitute your Database user name here
$db_pwd="lessons";//"password";		//Substitute your Database user password here
$db_name="lessons";//"dbname";		// Your database name
$connection = mysql_connect($host, $db_user, $db_pwd)
or die (mysql_error()); //	'database_name' 
$db = mysql_select_db($db_name, $connection) or die (mysql_error());
?>
 
<?
$desc = mysql_real_escape_string($_POST['perioddesc']);
$query = "select * from periods order by Perioddesc";	//Querying the Periods table
$result = mysql_query($query) or die(mysql_error());	//Execute the Query
if($desc==""){
$option="<option>-- Select --</option>";
}else{
$option="<option>".$desc."</option>";
}
while($rs=mysql_fetch_array($result)){		// Fetch each record from the result set
$option.= "<option>".$rs['Perioddesc']."</option>";
}
?>
<?
if(isset($_POST['submit'])){
$desc = mysql_real_escape_string($_POST['perioddesc']);
$starttime = mysql_real_escape_string($_POST['starttime']);
$endtime = mysql_real_escape_string($_POST['endtime']);
$query = "insert into daylessons(lessondesc, starttime, endtime) values('$desc', '$starttime', '$endtime')";
$res = mysql_query($query) or die(mysql_error());
echo "Record inserted!";
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Day Lessons</title>
<script language="javascript">
function callsubmit(){
var dform = document.getElementById("daylessonfrm");
dform.setAttribute("action", "insertlesson.php?action=displaytime");
document.getElementById("daylessonfrm").submit();
//document.getElementById("daylessonfrm").action="insertlesson.php?action=displaytime";
//document.getElementById("daylessonfrm").submit();
}
</script>
</head>
<body>
<?
if($_REQUEST['action']=="displaytime"){
$desc = mysql_real_escape_string($_POST['perioddesc']);
$db_query = "select * from periods where perioddesc='".$desc."'";
$resultset = mysql_query($db_query);
$rowset = mysql_fetch_array($resultset);
$starttime = $rowset['starttime'];
$endtime = $rowset['endtime'];
}
 
?>
<form name="daylessonfrm" id="daylessonfrm" action="insertlesson.php" method="post" >
<span>Period : <select name="perioddesc" id="perioddesc" onChange="callsubmit();">
<? echo $option; ?>
</select></span>
<br /><br />Start Time: <input type="text" name="starttime" id="starttime" value="<?=$starttime?>"  />
<br /><br />End Time: <input type="text" name="endtime" id="endtime" value="<?=$endtime?>"  />
<input type="submit" name="submit" value="submit"  />
</form>
</body>
</html>

Open in new window

LVL 16
CWS (haripriya)Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

strickddCommented:
I would recommend putting an alert('test') in the callSubmit function and make sure it is actually executing. You may also need to tab out of the drop down for it to fire the event.
0
cmaohioSenior Systems ManagerCommented:
Is it submitting at all? Or is the javaScript submitting the initial time?

In Firefox, I know you, can bring up the error console and then try to execute the form and see what errors you get.

Perhaps instead of changing the action to include a querystring, perhaps have an empty hidden field: <input type="hidden" name="action" value=""/>

then use the JS to update that and submit.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
CWS (haripriya)Author Commented:
Hi,

Sorry It works now. I was rephrasing the question, while you posted, it doen't allow me to edit it now :)

I am attaching the working code.

I am going to teach a beginner how it works. So, please leave my initial question and look at the other part of the code and suggest me if I can improve it keeping in mind the security and performance issues.

Thanks
<? 
$host = "localhost";	//This is your mysql server host name
$db_user="lessons";//"dbuser";		//Substitute your Database user name here
$db_pwd="lessons";//"password";		//Substitute your Database user password here
$db_name="lessons";//"dbname";		// Your database name
$connection = mysql_connect($host, $db_user, $db_pwd)
or die (mysql_error()); //	'database_name' 
$db = mysql_select_db($db_name, $connection) or die (mysql_error());
?>
 
<?
$desc = mysql_real_escape_string($_POST['perioddesc']);
$query = "select * from periods order by Perioddesc";	//Querying the Periods table
$result = mysql_query($query) or die(mysql_error());	//Execute the Query
if($desc==""){
$option="<option>-- Select --</option>";
}else{
$option="<option>".$desc."</option>";
}
while($rs=mysql_fetch_array($result)){		// Fetch each record from the result set
$option.= "<option>".$rs['Perioddesc']."</option>";
}
?>
<?
if(isset($_POST['Submit'])){
$desc = mysql_real_escape_string($_POST['perioddesc']);
$starttime = mysql_real_escape_string($_POST['starttime']);
$endtime = mysql_real_escape_string($_POST['endtime']);
$query = "insert into daylessons(lessondesc, starttime, endtime) values('$desc', '$starttime', '$endtime')";
$res = mysql_query($query) or die(mysql_error());
echo "Record inserted!";
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Day Lessons</title>
<script language="javascript">
function callsubmit(){
var a=document.getElementById("daylessonfrm").action;
 
document.getElementById("daylessonfrm").action="insertlesson.php?action=displaytime";
var b=document.getElementById("daylessonfrm").action;
//alert(b);
document.getElementById("daylessonfrm").submit();
}
</script>
</head>
<body>
<?
if($_REQUEST['action']=="displaytime"){
$desc = mysql_real_escape_string($_POST['perioddesc']);
$db_query = "select * from periods where perioddesc='".$desc."'";
$resultset = mysql_query($db_query);
$rowset = mysql_fetch_array($resultset);
$starttime = $rowset['starttime'];
$endtime = $rowset['endtime'];
}
 
?>
<form name="daylessonfrm" id="daylessonfrm" action="insertlesson.php" method="post" >
<span>Period : <select name="perioddesc" id="perioddesc" onchange="this.form.action='insertlesson.php?action=displaytime';this.form.submit();">
<? echo $option; ?>
</select></span>
<br /><br />Start Time: <input type="text" name="starttime" id="starttime" value="<?=$starttime?>"  />
<br /><br />End Time: <input type="text" name="endtime" id="endtime" value="<?=$endtime?>"  />
<input type="submit" name="Submit" value="Submit" onclick="this.form.action='insertlesson.php'"  />
</form>
</body>
</html>

Open in new window

0
Vimal DMSenior Software EngineerCommented:
Hi,
function callsubmit(){
var a=document.getElementById("daylessonfrm").action;
document.getElementById("daylessonfrm").action="insertlesson.php?action=displaytime";
var b=document.getElementById("daylessonfrm").action;
document.getElementById("daylessonfrm").submit();
}

if not using "getElementById" u can use the following one

document.formname.submit();
this will work both in iexplore and firefox

some times the "getElementById" won't work
0
CWS (haripriya)Author Commented:
Hi,
That javascript is not called anywhere. I forgot to remove that from code.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.