Trying to do a rollover image submit button

[bunner bob]

First of all, I don't know if this is even possible, but what the heck.

I'm using an image as a submit button
<input type="image" src="images/structure/updatescheme.jpg" onClick="javascript:document.schemestructure.submit();">

and it's the only button on the page that doesn't give visual feedback when the user rolls over it. So I've been trying to cobble up a rollover, including the below attempt to replace the image by putting it in a <span> tag and doing a getElementById/innerHTML swap. But it ain't working.

I admit my javascript skills are a little crusty, so it's entirely possible I just have some bad syntax somewhere, but it's equally possible that this either can't be done (ooh - them's fightin' words!) or it's a bad idea.

Any thoughts from the pros?

function switchschemeimg(value) {
if (value == "on") document.getElementById("updateschemeimg").innerHTML = "<input type=\"image\" src=\"images\/structure\/updatescheme-over.jpg\" onClick=\"javascript:document.schemestructure.submit();\">";
else document.getElementById("updateschemeimg").innerHTML = "<input type=\"image\" src=\"images\/structure\/updatescheme.jpg\" onClick=\"javascript:document.schemestructure.submit();\">";
}

<a href="nothing.html" onMouseover="javascript:switchschemeimg(on)" onMouseout="javascript:switchschemeimg(off)"><span id="updateschemeimg"><input type="image" src="images/structure/updatescheme.jpg" onClick="javascript:document.schemestructure.submit();"></span></a>

[bunner bob]

It's not working, Dave.

The browser goes to whatever I put in the href="" - in your instance, it calls a nonexistent page (Submit a Form). When I try entering the URL of my own page, it simply loads the page without submitting the form.

The form is processed via PHP. Since using an image as a submit button doesn't inherently pass a variable called "submit" (which my script looks for to process) I've created a hidden form item called "submit" with value "true", which causes the form to be processed correctly if I do the regular <input type="image"...> bit. So the form contains everything it should need to be processed even if the submit button isn't sending "submit" - as long as the data in the form is POSTed, it will be processed.

But that's not happening.

Here's the code as I put it together (note that earlier in the page I define the image objects I'm using in the mouseover):

<a href="edithome.php" onClick="document.schemestructure.submit(); return false;" onMouseover="window.status=this.href; document.updateschemeimg.src=updatescheme_over.src; return true;" onMouseout="window.status=''; document.updateschemeimg.src=updatescheme.src; return true;"><img src="images/structure/updatescheme.jpg" name="updateschemeimg" border="0"></a>

Curious - why the "return false" and "return true" bits?

[Jona]

I've had this problem before..

<A HREF="javascript:submitForm()"><IMG SRC="../images/submitA.gif"></A>

Use JavaScript to Submit the form. Using <INPUT TYPE="image"> will cause it to (usually) give the X and Y locations that were clicked on. (e.g., http://site.com/page.html?x=23&y=44)

[bunner bob]

I guess my post wasn't clear, Jona. <input type="image> DOES work for me. Using javascript in an href does NOT work.

[Jona]

Oh :D

[bunner bob]

I thought the first line of my code...

<a href="edithome.php" onClick="document.schemestructure.submit(); return false;" ...

did that. Since my form is named "schemestructure", isn't this the correct syntax?

[bunner bob]

Arrgghh!

I figured it out.

My PHP script is set to process "if($submit)" - so it's looking for a variable called "submit" to be posted, which is the case if you have a standard submit button. When I started using basic <input type='image'> tags, my form was submitting but there was no longer a 'submit' button to pass the variable $submit. So I created a hidden field with name="submit" and value="yes". This caused the script to process the form.

But that hidden submit field didn't get along with your script. Basically it would make your script call the href - in other words, the return false wasn't intercepting the call to the href.

So I tried deleting the hidden field, and back to the original problem - no "submit" variable getting passed, nothing gets processed (but at least the right URL gets called). So finally I realized I had to change the variable my form is looking for, and create a corresponding hidden form field to pass that variable.

FINALLY it seems to be working!

Thanks for all your help.

[bunner bob]

Just to complicate things further:

Okay - the rollover form submit buttons are working great. Now - I want to add another javascript function to the onClick.

What I need to do is set the value of a hidden form field if button A is clicked, and NOT set it if button B is clicked. I have this form field, script and link:

<input type="hidden" name="redirect" value="">

function setRedirect() {
document.updateshowform[redirect].value = "true";
}

<a href="update" onClick="setRedirect(); return false; document.updateshowform.submit(); return false;" (etc. mouseover etc.)

This keeps taking me to the nonexistent URL "update", instead of setting the field and processing the form. I added the second "return false;" after "setRedirect();" but that didn't fix this problem.

Is there a better way, or any way, to do this?

Thanks!

[bunner bob]

I figured out how to do this.

I got rid of the "href="whatever" in the <a> tag.

Apparently it's not necessary. After deleting that, I could also get rid of the "return false" statement. Now my tag looks like this:

function setRedirect(location) {
document.myform.redirect.value = location;
}

<form name="myform" method="post" action="samepage.html">
Stuff
<input type="hidden" name="redirect" value="">
</form>

<a onClick="setRedirect('newpage.html'); document.thisform.submit();" onMouseover=...and so on

Then I put a PHP conditional after the form processes that redirects to the new page if there's a value for the redirect form field.

Works great!