Submitting a form using 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:

Code: Select all

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

body:

Code: Select all

<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.

[bobbyblades]

Your not accessing the form correctly, it should be:


document.forms.OptSelVal.submit();

[siege]

Thanks so much for your reply. I tried what you had suggested and that didnt work.... just so you know the typical <input.... tag works just fine... so i know the form can work. any other ideas?

on a side note. my CSS class is not working on the <select... tag. all the other places I use CSS i have no problem. this is the CSS code <script type="text/javascript" src="dropDownLeapYear.js"></script>

Code: Select all

      <style type="text/css">
<!--
.mine {
   background-color: #000044;
   color: #EFE7DF;
   border: 1 solid #6E6650;
   scrollbar-base-color: #FF8000;
}
-->
</style>

[bobbyblades]

I don't know what you mean by submitting an option?

an option element is submitted when the form which contains it is submitted
the option element which is selected is then the selected value of the select list which contains it.

there's no submit method for an option element

[siege]

This is the style form I have....
Go to where it says: HTML Selection Forms
http://www.tizag.com/htmlT/forms.php

Looking at that example, I would like to change the button to a rollover. I am obvously not emailing the selection but rather sending the selection to a php script.

[bobbyblades]

ok I understand, but what Im saying is the function doSubmit is not coded correctly you are not going to be able to submit a form that way because again the option element does not have a submit method, you need to submit the entire form via it's submit method.

[siege]

How do I adjust my code so that I can submit the entire form? for instance the equivilent of this <input type ="submit" name = "Retrieve" value ="Edit">

[bobbyblades]

all you should have to to is change the doSubmit function to submit the form


doSubmit() {
document.forms.formname.submit()
}


and call that function where ever you need it or just call the statement inline in the eventhandler:

onmouseenter = "document.forms.formname.submit()"