JavaScript Forum

**beylah** · 07-05-2010, 01:04 PM

I have a form update in php that I am trying to update using javascript and the javascript submit is not being understood by the php.

Code:

<script type="text/javascript">
function red()
{
document.form.availability.value="Red";
document.form.submit();
}
function yellow()
{
document.form.availability.value="Yellow";
document.form.submit();
}
function green()
{
document.form.availability.value="Green";
document.form.submit();
}
function vacation()
{
document.form.availability.value="On Vacation";
document.form.submit();
}
</script>
 
<form id="form" name="form" method="post" action="<? echo $PHP_SELF; ?>">
<input type="hidden" name="id" value="<? echo $id; ?>" /> 
<table width="350" cellpadding="0" cellspacing="0" border="0">
<tr><td class="form">Name</td><td align="left" class="text"><input size="30" type="text" name="name" id="name" value="<?php echo $row['name']; ?>" /></td></tr>
</table>
 
<a href="javascript:red();" onmouseover=
"document.images['red'].src=image02.src" onmouseout=
"document.images['red'].src=image01.src"><img src="images/rlgl-2off.jpg" name="red" id="availability" width="522" height="93" border="0" /></a>
 
<a href="javascript:yellow();" onmouseover=
"document.images['yellow'].src=image04.src" onmouseout=
"document.images['yellow'].src=image03.src"><img src="images/rlgl-3off.jpg" name="yellow" id="availability" width="522" height="62" border="0" /></a>
 
<a href="javascript:green();" onmouseover=
"document.images['green'].src=image06.src" onmouseout=
"document.images['green'].src=image05.src"><img src="images/rlgl-4off.jpg" name="green" id="availability" width="260" height="115" border="0" /></a>
</form>

**stbuchok** · 07-05-2010, 03:01 PM

Is the postback even happening? What isn't working? Please be more specific.

**chrishirst** · 07-05-2010, 06:29 PM

It is not the " javascript submit" that not being "understood", it is simply that the form ISN'T being submitted.
Are you testing in IE by some chance?

don't name the form "form" and use document.forms['formname'].submit();

**beylah** · 07-06-2010, 08:28 AM

I have changed the form name to "rlgl" and rewrote the javascript as "chrishist" suggested and still nothing - the page just refreshes itself with no info - the form is not being sent and no data is being updated - i am testing only on explorer that is the only program i have at work and no error show

PHP Code:


			
<?
include("connectdb.php");
if($_POST['submit']){
$id=$_POST['id'];
$name=$_POST['name'];
$availability=$_POST['availability'];
$pg=$_POST['pg'];
$date=$_POST['date'];
mysql_query("UPDATE rlgl_std SET availability='$availability', date='$date' WHERE id='$id'");
header("location:confirmation.php?id=$id");
exit;
}
$id=$_GET['id'];
$result=mysql_query("select * from rlgl_std where id='$id'");
$row=mysql_fetch_assoc($result);
mysql_close();
?>
<!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=utf-8" />
<title>Student RLGL</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<link href="http://www.webmaster-talk.com/images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="http://www.webmaster-talk.com/images/favicon.ico" rel="icon" type="image/x-icon" />
<script language="javascript1.1">
<!--
image01=new Image (522,93)
image01.src="http://www.webmaster-talk.com/images/rlgl-2off.jpg"
image02=new Image (522,93)
image02.src="http://www.webmaster-talk.com/images/rlgl-2on.jpg"
image03=new Image (522,62)
image03.src="http://www.webmaster-talk.com/images/rlgl-3off.jpg"
image04=new Image (522,62)
image04.src="http://www.webmaster-talk.com/images/rlgl-3on.jpg"
image05=new Image (260,115)
image05.src="http://www.webmaster-talk.com/images/rlgl-4off.jpg"
image06=new Image (260,115)
image06.src="http://www.webmaster-talk.com/images/rlgl-4on.jpg"
//-->
</script>
<script language="javascript">
<!--
function filter(imagename,objectsrc)
{
var n=navigator.appName
var v=parseInt(navigator.appVersion)
var browsok=((n=="Netscape")&&(v>=3))
var browsok2=((n=="Microsoft Internet Explorer")&&(v>=4))
if ((browsok)||(browsok2))
document.images[imagename].src=eval(objectsrc+".src")
}
//-->
</script>
<script type="text/javascript">
function red()
{
document.forms['rlgl'].availability.value="Red";
document.forms['rlgl'].submit();
}
function yellow()
{
document.forms['rlgl'].availability.value="Yellow";
document.forms['rlgl'].submit();
}
function green()
{
document.forms['rlgl'].availability.value="Green";
document.forms['rlgl'].submit();
}
function vacation()
{
document.forms['rlgl'].availability.value="On Vacation";
document.forms['rlgl'].submit();
}
</script>
</head>
<body><br /><br />
<form id="rlgl" name="rlgl" method="post" action="<? echo $PHP_SELF; ?>">
<input type="hidden" name="id" value="<? echo $id; ?>" /> 
<div class="info">
<p class="form">Name: &nbsp;<span class="data"><?php echo $row['name']; ?></span></p>
<p class="form">Practice Group: &nbsp;<span class="data"><?php echo $row['pg']; ?></span></p>
</div>
<div id="wrapper">
<div id="top"><img src="http://www.webmaster-talk.com/images/rlgl-1.jpg" width="522" height="108" /></div>
<div id="red"><a href="javascript:red();" onmouseover=
"document.images['red'].src=image02.src" onmouseout=
"document.images['red'].src=image01.src"><img src="http://www.webmaster-talk.com/images/rlgl-2off.jpg" name="red" id="availability" width="522" height="93" border="0" /></a></div>
<div id="yellow"><a href="javascript:yellow();" onmouseover=
"document.images['yellow'].src=image04.src" onmouseout=
"document.images['yellow'].src=image03.src"><img src="http://www.webmaster-talk.com/images/rlgl-3off.jpg" name="yellow" id="availability" width="522" height="62" border="0" /></a></div>
<div id="green"><a href="javascript:green();" onmouseover=
"document.images['green'].src=image06.src" onmouseout=
"document.images['green'].src=image05.src"><img src="http://www.webmaster-talk.com/images/rlgl-4off.jpg" name="green" id="availability" width="260" height="115" border="0" /></a></div>
<div id="vacation"><img src="http://www.webmaster-talk.com/images/rlgl-5.jpg" width="262" height="115" border="0" usemap="#navigator" /></div>
<div id="bottom"><img src="http://www.webmaster-talk.com/images/rlgl-6.jpg" width="522" height="90" /></div>
</div>
<map name="navigator" id="navigator">
<area shape="rect" coords="33,0,115,100" href="javascript:vacation();" name="vacation" id="availability" />
<area shape="rect" coords="115,0,189,100" href="Templates/rlgl-status.php" />
</map>
</form>
</body>
</html>

**stbuchok** · 07-06-2010, 09:25 AM

I only see one input field, where are the other ones you are using to post the data?

Also if you use get instead of post you will be able to see the information being passed in the querystring (if you don't want to do that use Fiddler to check what is being posted.)

You also have 4 elements with the id of availability.

**beylah** · 07-06-2010, 10:07 AM

ok what i am creating is an update availability of workload (red, yellow, green or vacation)

they need not input any data - it is in the database already - i am just calling the data to show their name and work area - and they need to click on one of the lights to update their workload availability (thus the 4 elements with the id of availability)

**stbuchok** · 07-06-2010, 01:19 PM

OK, from what I see you have it so that if there is a submit that you are updating, but how are you updating anything. You have no input fields to pass data back.

How is availability being posted back to the page or date, or pg?

document.forms['rlgl'].availability is referencing the image and then you are adding a property called value to it and setting a value. This will not be posted back to the server for you to use. Again, you need to use fields (input, dropdown, checkbox, radiobutton...)

**beylah** · 07-06-2010, 01:53 PM

ok that makes sense and i know how to do it with a form and an input - but how do i use it with a mouseover onclick - i dont want and input i want to use the mouseovers

see this page (it's not functioning but just so you can see the mouseover)

http://students.fasken.com/Std_RLGL/test.php

**stbuchok** · 07-06-2010, 03:32 PM

Onlick of the image set the value of a hidden textbox to whatever you want via javascript then use the document.forms['rlgl'].submit(); statement. The value in the hidden textbox will be posted back to the server and then you can do what you wish.

**chrishirst** · 07-06-2010, 03:40 PM

get rid of the href attribute and use the onclick event to call the function.