Images as submit buttons

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Paddy
Forum Contributor
Posts: 244
Joined: Wed Jun 11, 2003 8:16 pm
Location: Hobart, Tas, Aussie
Contact:

Images as submit buttons

Post by Paddy »

Hey guys, I have come across a particular problem that I can not find a solution for in google. I am wondering if someone may have some sample code for me.

My problem is that I have a form with multiple submit buttons. These are images that require mouseovers. I tried using type="image" in the input tags but I could not get mouseovers to work. I also tried using onclick="submit();" in an img tag but then I could not differentiate between the multiple submits.

I feel like I am banging my head against the wall. I know the solution must be simple and I would appreciate any help to get me pass this.
User avatar
JAM
DevNet Resident
Posts: 2101
Joined: Fri Aug 08, 2003 6:53 pm
Location: Sweden
Contact:

Post by JAM »

You could...

Code: Select all

<form method="post">
<input type="image" src="image.gif" name="a" value="Submit" />
<input type="image" src="image.gif" name="b" value="Submit" />
<input type="image" src="image.gif" name="c" value="Submit" />
</form>
<?php
    if (!empty($_POST)) &#123;
        $newarray = array_flip($_POST);
        echo $newarray&#1111;'Submit'];
    &#125;
?>
Not sure this is "the" way tho... I flip the array, so note that you need to flip it once again to get the results as-is.
Paddy
Forum Contributor
Posts: 244
Joined: Wed Jun 11, 2003 8:16 pm
Location: Hobart, Tas, Aussie
Contact:

Post by Paddy »

My problem with that is that mouseovers do not work. I need the image to change when hovered.
User avatar
JAM
DevNet Resident
Posts: 2101
Joined: Fri Aug 08, 2003 6:53 pm
Location: Sweden
Contact:

Post by JAM »

Code: Select all

<input onmouseover="this.src='dossier2.gif'" alt="Hover Button" onmouseout="this.src='dossier.gif'" type="image" src="dossier.gif" name="a" value="Submit" />
...works here...
Moving this thread to client side...
Paddy
Forum Contributor
Posts: 244
Joined: Wed Jun 11, 2003 8:16 pm
Location: Hobart, Tas, Aussie
Contact:

Post by Paddy »

It seems it was the way I was doing mouse overs. Interesting that it works with anchor tags but not input ones. Ah well, works now.

Thanks a bunch Jam. :)
Paddy
Forum Contributor
Posts: 244
Joined: Wed Jun 11, 2003 8:16 pm
Location: Hobart, Tas, Aussie
Contact:

Post by Paddy »

Just another question. I found I could not compare the name of the input to the value of the input. So doing

Code: Select all

$a = (isset($_POST&#1111;'a'])?$_POST&#1111;'a']:"");
if ($a == "Submit")&#123;&#125;
always fails. I found an article that stated the form only posts the x and y coordinates of the click. So doing

Code: Select all

if ($_POST&#1111;'a_x'] != "")&#123;&#125;
will perform the test. The article can be found here.

http://builder.com.com/5100-6371-5242116-3.html

Is this the best/only way to do this?
User avatar
Calimero
Forum Contributor
Posts: 310
Joined: Thu Jan 22, 2004 6:54 pm
Location: Milky Way

...

Post by Calimero »

Don't know in php but,

Have you tried in JavaScript to add the name(s) of the fields and pass them as a variable ( there are numerous ways ) so then php can process them.


For submit-ing I would do this:

Code: Select all

<script language="Javascript">

Function go_baby(a)
&#123;
document.form_name.action = a;
document.form_name.submit();

&#125;

</script>

And those little buttons: onClick="javascript:go_baby(parameter_A)"


Parameter A - action: page to where the form should be submitted.

ex. onClick="javascript:go_baby('process_page.php');"

Parameter A - use unique parameter for each button ( image ) and in that way the form will be submited where you want.



Hope this helps.
Paddy
Forum Contributor
Posts: 244
Joined: Wed Jun 11, 2003 8:16 pm
Location: Hobart, Tas, Aussie
Contact:

Post by Paddy »

Hmmm...I really don't like js all that much. I will keep that in mind though. I do like the idea of the ability to send to different pages. This will go in my code library.

Cheers. :)
timvw
DevNet Master
Posts: 4897
Joined: Mon Jan 19, 2004 11:11 pm
Location: Leuven, Belgium

Post by timvw »

i think that a browser will add something to your original name....

so using <input type='image' name='foo'> will give you $_POST['foo_x']
but you have already read that ;)


afaik it is the only way....
Paddy
Forum Contributor
Posts: 244
Joined: Wed Jun 11, 2003 8:16 pm
Location: Hobart, Tas, Aussie
Contact:

Post by Paddy »

For those who don't know $_POST['somevar_y'] will give the y coordinate. I guess it is a way to do image maps to the same action without GET.
Post Reply