submitting options of a form with a rollover

[siege]

I have my rollovers working but I cannot find out how to submit an option that a user has selected.
head JS function:

function doSubmit(){ 
   document.OptSelVal.UpOption.value.submit();

body:

<table border="0" cellspacing="0" cellpadding="0"> 
                  <tr> 

              <td> 
              <form action="<?php echo $SCRIPT_NAME; ?>" method="post" enctype="application/x-www-form-urlencoded" name="OptSelVal" id="formA"> 
                    Date       Article<br /> 
                    10-13-07 Article 1<br /> 
                    09-14-07 Article 2<br /> 
                    <select name = "UpOption" size="5" class="mine"> 
                          <?php 

                          $query = "select * from articles;"; 
                          $result=mysql_query($query); 

                          ?> 
                                                        <?php 
                          while($articlerow=mysql_fetch_assoc($result)) 

                          { 

                                      echo " <option value='". $articlerow['primindex'] . "'>". $articlerow['Title'] ."</</option>"; 

                          } 

                          ?> 
                    </select> 
                    </td> 

                    </tr> 

                    <tr> 
                          <td><a href="javascript:doSubmit()" onMouseUp="switchImage('Retrieve',0)" onmouseout = "switchImage('Retrieve',0)" onmouseover = "switchImage('Retrieve',1)" onmousedown = "switchImage('Retrieve',2)"><img name="Retrieve" src="images/editBtn_up.jpg" border="0"/></a> 
              </form> 
              </tr> 

        </table>

If I use a regular input button everything works fine. But when i try a rollover button using the JS function above nothing seems to happen when submitted.

---

best
siege

[paulnaj]

Hi,

You're trying to submit the SELECT box value ... you should be submitting the form:

function doSubmit(){ 
    document.OptSelVal.submit();
}

P.

[siege]

I tried that and it didnt work. What am I missing?

[paulnaj]

What happened?

What errors did you get?

[siege]

I didnt get any errors. The page reloads then nothing else happens. If I put this in the form:

<input type ="submit" name = "Retrieve" value ="Edit">

and press it, I see results

[paulnaj]

Do you know any debugging techniques?

I can only guess that your 'results' depend on a variable called 'Retrieve' being sent and possibly tested to see if it contains the value 'Edit'.

To test this add a hidden field to your form and try again ...

<input type="hidden" name="Retrieve" value="Edit">

P.

PS If this doesn't work, then you are going to have to show us the code that processes the form data.

[siege]

Below is my code (most of it). With the hidden field the 'edit' btn works. Now i have to get the rest of my buttons to work just as they did before. I tried the 'hidden' technique again but that didn't work quiet right - it only pickep up the last 'hidden' tag and not the one that matched the button.

<?php
include("SessionViews.php");
include("dbCONNECT.php");
?>
<link href="articleAdminStyle.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="dropDownLeapYear.js"></script>
		<style type="text/css">
<!--
.mine {
	background-color: #000044;
	color: #EFE7DF;
	border: 1 solid #6E6650;
	scrollbar-base-color: #FF8000;
}
-->
</style>
		<script type="text/javascript">

// ======================================================================
// Preload the images to be used with the form
// ======================================================================
var Pic = new Array
Pic[0] = 'images/editBtn_up.jpg'
Pic[1] = 'images/editBtn_over.jpg'
Pic[2] = 'images/editBtn_down.jpg'
Pic[3] = 'images/submitBtn_up.jpg'
Pic[4] = 'images/submitBtn_over.jpg'
Pic[5] = 'images/submitBtn_down.jpg'
Pic[6] = 'images/newBtn_up.jpg'
Pic[7] = 'images/newBtn_over.jpg'
Pic[8] = 'images/newBtn_down.jpg'
Pic[9] = 'images/deleteBtn_up.jpg'
Pic[10] = 'images/deleteBtn_over.jpg'
Pic[11] = 'images/deleteBtn_down.jpg'
Pic[12] = 'images/upBtn_up.jpg'
Pic[13] = 'images/upBtn_over.jpg'
Pic[14] = 'images/upBtn_down.jpg'
Pic[15] = 'images/downBtn_up.jpg'
Pic[16] = 'images/downBtn_over.jpg'
Pic[17] = 'images/downBtn_down.jpg'
var p = Pic.length
var preLoad = new Array()
var i = 0;
for (i = 0; i < p; i++){
     preLoad[i] = new Image()
     preLoad[i].src = Pic[i]
}
// ----------------------------------------------------------------------
// handles all image switching in response to mouseOver, mouseOut, and
// mouseDown events.
//
// whichImage=the name of the image to be
// switched (see the comments in the HTML below) -- in this case, either
// 'Retrieve' or 'submitBtnImage'.
//
// imageNumber=the number of the image to be called,
// as per the numbers in the Pic[] array up above.
function switchImage(whichImage,imageNumber){
   document.images[whichImage].src = preLoad[imageNumber].src
}
// ----------------------------------------------------------------------

function doSubmit(){
document.OptSelVal.submit();
  //alert('submitting') 
}

</script>
		</head><body>
				<?php

if($_SESSION['views']==1)
{
Echo "<span class=\"welcomeTxt\">Welcome, you may retrieve, update and add a new articles here.</span>";
}
else	{		//else
Echo "<span class=\"welcomeTxt\">Retrieve, delete and add below</span>";

if($_POST['update'])
{
include("actuallyupdates.php");
}

if($_POST['submit']) //checks if form input has been posted
{
include("actuallyadds.php");
}
	}		//else

if($_POST['Delete']) 
{
//include("actuallyadds.php");


$articledeleted = $_POST['UpOption'];
echo "<br /><span class=\"successTxt\">article with index $articledeleted deleted.</span><br />";

$sql="Delete from articles where primindex = '" .$_POST['UpOption'] . "';";

mysql_query($sql);
}

?>
				<div id="formAContainer">
						<table border="0" cellspacing="0" cellpadding="0">
								<tr>

							<td>
							<form action="<?php echo $SCRIPT_NAME; ?>" method="post" enctype="application/x-www-form-urlencoded" name="OptSelVal" id="formA">
									Date       Article<br />
									10-13-07 Article 1<br />
									09-14-07 Article 2<br />
									<select name = "UpOption" size = "5" class="mine">
											<?php

$query = "select * from articles;"; 
$result=mysql_query($query);

?>
												<?php
while($articlerow=mysql_fetch_assoc($result))

{

			echo " <option value='". $articlerow['primindex'] . "'>". $articlerow['Title'] ."</</option>";

}

?>
										</select>
										</td>

									</tr>

									<tr>
											<td><input type ="submit" name = "Retrieve" value ="Edit">
													<input type ="submit" name = "Delete" value ="Delete">
													<input type ="submit" name = "Add" value ="Add">
													<input type="hidden" name="Retrieve" value="Edit">
											</td>
									</tr>
									<tr>
											<td><a href="javascript:doSubmit()" onMouseUp="switchImage('Retrieve',0)" onmouseout = "switchImage('Retrieve',0)" onmouseover = "switchImage('Retrieve',1)" onmousedown = "switchImage('Retrieve',2)"><img name="Retrieve" src="images/editBtn_up.jpg" border="0"/></a> <a href="javascript:doSubmit()" onMouseUp="switchImage('submitBtnImage',3)" onmouseout = "switchImage('submitBtnImage',3)" onmouseover = "switchImage('submitBtnImage',4)" onmousedown = "switchImage('submitBtnImage',5)"><img name="submitBtnImage" src="images/submitBtn_up.jpg" border="0"/></a> <a href="javascript:doSubmit()" onMouseUp="switchImage('Delete',9)" onmouseout = "switchImage('Delete',9)" onmouseover = "switchImage('Delete',10)" onmousedown = "switchImage('Delete',11)"><img name="Delete" src="images/deleteBtn_up.jpg" border="0"/></a> <a href="javascript:doSubmit()" onMouseUp="switchImage('newBtnImage',6)" onmouseout = "switchImage('newBtnImage',6)" onmouseover = "switchImage('newBtnImage',7)" onmousedown = "switchImage('newBtnImage',8)"><img name="newBtnImage" src="images/newBtn_up.jpg" border="0"/></a> </td>
							</form>
							</tr>

					</table>
			</div>
			<div id="formBContainer">
					<?php

if($_POST['Retrieve'])
{
Echo "<span class=\"generalInfoTxt\">Below is the info for the article you have retrieved</span>";
include("update.php");
}
else
	{
	Echo "<span class=\"generalInfoTxt\">If you'd like to enter a new article please enter the information below</span>";
	include("addnew.php");
	}
?>
				</div>
		</body>
</html>

[paulnaj]

I've got to ask ... did you write this code?

[siege]

Half and half.... working with someone else on this. Both are pretty new to PHP. I am more of an AS, XHTML and JS person.

[paulnaj]

OK I've tweaked your code as much as I can. I've put some comments in to help. See how far you get.

I've only actioned two 'buttons' but you should be able to extend it.

However, I must say that if this is a production site (not just for testing) then I think you have to use a more rigorous approach to db entry/retrieval etc.

Remember the old motto, if something can go wrong, it will!!

// DOCTYPE/HTML Tag/HEAD TAG missing here
<?php
include("SessionViews.php");
include("dbCONNECT.php");
?>
<link href="articleAdminStyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="dropDownLeapYear.js"></script>
<style type="text/css">
<!--
.mine {
    background-color: #000044;
    color: #EFE7DF;
    border: 1 solid #6E6650;
    scrollbar-base-color: #FF8000;
}
-->
</style>
<script type="text/javascript">
// ======================================================================
// Preload the images to be used with the form
// ======================================================================
var Pic = new Array
Pic[0] = 'images/editBtn_up.jpg'
Pic[1] = 'images/editBtn_over.jpg'
Pic[2] = 'images/editBtn_down.jpg'
Pic[3] = 'images/submitBtn_up.jpg'
Pic[4] = 'images/submitBtn_over.jpg'
Pic[5] = 'images/submitBtn_down.jpg'
Pic[6] = 'images/newBtn_up.jpg'
Pic[7] = 'images/newBtn_over.jpg'
Pic[8] = 'images/newBtn_down.jpg'
Pic[9] = 'images/deleteBtn_up.jpg'
Pic[10] = 'images/deleteBtn_over.jpg'
Pic[11] = 'images/deleteBtn_down.jpg'
Pic[12] = 'images/upBtn_up.jpg'
Pic[13] = 'images/upBtn_over.jpg'
Pic[14] = 'images/upBtn_down.jpg'
Pic[15] = 'images/downBtn_up.jpg'
Pic[16] = 'images/downBtn_over.jpg'
Pic[17] = 'images/downBtn_down.jpg'
var p = Pic.length
var preLoad = new Array()
var i = 0;
for (i = 0; i < p; i++){
     preLoad[i] = new Image()
     preLoad[i].src = Pic[i]
}
// ----------------------------------------------------------------------
// handles all image switching in response to mouseOver, mouseOut, and
// mouseDown events.
//
// whichImage=the name of the image to be
// switched (see the comments in the HTML below) -- in this case, either
// 'Retrieve' or 'submitBtnImage'.
//
// imageNumber=the number of the image to be called,
// as per the numbers in the Pic[] array up above.
function switchImage(whichImage,imageNumber){
   document.images[whichImage].src = preLoad[imageNumber].src
}
// ----------------------------------------------------------------------



function doSubmit(sAction){
	// Here we need to set the value of the hidden dbaction field ...
	document.OptSelVal.dbaction.value = sAction;

// ... before we submit the form.
document.OptSelVal.submit();
}


</script>
</head>
<body>
<?php

if($_SESSION['views'] == 1){
	echo '<span class="welcomeTxt">Welcome, you may retrieve, update and add a new articles here.</span>';
} else {
	echo '<span class="welcomeTxt">Retrieve, delete and add below</span>';

// No field called 'update' is ever sent
//if($_POST['update']){ include("actuallyupdates.php");}

// No field called 'submit' is ever sent
//if($_POST['submit']){ include("actuallyadds.php");}
}     

// Check to see if a field called 'dbaction' was actually and that it's value is 'Delete'
if(isset($_POST['dbaction']) && $_POST['dbaction'] == 'Delete'){
	$articledeleted = $_POST['UpOption'];
	echo '<br /><span class="successTxt">article with index '.$articledeleted.' deleted.</span><br />';
	// !!Should check that 'UpOption' has been sent as well, but that's another story
	$sql = "DELETE FROM articles WHERE primindex = '".$_POST['UpOption']."';";
	mysql_query($sql);
}

?>
<div id="formAContainer">

<!-- form start/end tags outside table -->
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="application/x-www-form-urlencoded" name="OptSelVal" id="formA">

<!-- Blank hidden field called 'dbaction' ... value set in doSubmit() --> 
<input type="hidden" name="dbaction" value="">

<table border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td>
				Date       Article<br />
				10-13-07 Article 1<br />
				09-14-07 Article 2<br />
				<select name="UpOption" size="5" class="mine">
<?php
$query = "SELECT * FROM articles";
$result = mysql_query($query);
while($articlerow = mysql_fetch_assoc($result)){
	echo '
						<option value="'.$articlerow['primindex'].'">'.$articlerow['Title'].'</</option>';
}
?>

				</select>
			</td>
		</tr>
		<tr>
			<td>
				<!-- Two buttons, both using updated doSubmit() -->
				<a href="javascript:doSubmit('Retrieve')" onmouseout="switchImage('Retrieve',0)" onmouseover="switchImage('Retrieve',1)"><img name="Retrieve" src="images/editBtn_up.jpg" border="0"/></a> 
				<a href="javascript:doSubmit('Delete')" onmouseout="switchImage('Delete',9)" onmouseover="switchImage('Delete',10)"><img name="Delete" src="images/deleteBtn_up.jpg" border="0"/></a>

				<!-- No PHP code yet defined to handle this (as far as I can see) -->
				<!-- a href="javascript:doSubmit('Add')" onmouseout="switchImage('newBtnImage',6)" onmouseover="switchImage('newBtnImage',7)"><img name="newBtnImage" src="images/newBtn_up.jpg" border="0"/></a --> 

			</td>
		</tr>
</table>
</form>
</div>
<div id="formBContainer">
<?php
// Check to see if a field called 'dbaction' was actually and that it's value is 'Retrieve'
if(isset($_POST['dbaction']) && $_POST['dbaction'] == 'Retrieve'){
	echo '<span class="generalInfoTxt">Below is the info for the article you have retrieved</span>';
	include("update.php");
} else {
	echo '<span class="generalInfoTxt">If you\'d like to enter a new article please enter the information below</span>';
	include("addnew.php");
}
?>
</div>
</body>
</html>

Finally, a couple of tips:
1. Do your best to use a consistent 'code layout' ... really helps with debugging.
2. For strings, always use single-quotes (there are one or two exceptions) and never embed variables (helps with debugging, and makes echo-ing out HTML a whole lot simpler)
3. Turn on full error-reporting, at least whilst you're building.