Using two images as submit's for a form

Question

Possible Duplicate:
How to change an input button image using CSS?

Is it possible to use two images as submit buttons for a form?

I have a language selection page with two flags (.png's) on it, I want it so when the user clicks on a flag it submits the form.

How would I go about doing that?

Possible duplicate: http://stackoverflow.com/a/195637/794234 — just.another.programmer, Aug 06 '12 at 09:37

score 2 · Accepted Answer · answered Aug 06 '12 at 09:35

2

<a href="javascript:document.myform.submit()" name="flag1">
    <img src="img1.png" width="20" height="10" alt="" />
</a>

<a href="javascript:document.myform.submit()" name="flag2">
    <img src="img2.png" width="20" height="10" alt="" />
</a>

That should work for you :) Just remember to change javascript:document.myform.submit() to the name attribute of your form element.

answered Aug 06 '12 at 09:35

Chris Clower

5,036
2
18
29

Thanks. Is it possible to attach a value to the submit as well? Just so I can use $_GET? – Rob Aug 06 '12 at 09:55
@Rob: That should be done with the form. `method="get"`. – Purag Aug 06 '12 at 09:56
@Purmou So it's not possible to give each image/link a different value such as `value="UK"`? – Rob Aug 06 '12 at 10:02
@Rob: Well, sure, you can customize the data that is submitted with the for, but that's when you should get into jQuery to handle the submission. You can prevent the default submission and gather the values yourself and submit it that way. – Purag Aug 06 '12 at 10:04
1

@Rob the value of the `name` attribute on the anchor should be automatically submitted with the form, so that will tell the script which one the user clicked on. – Chris Clower Aug 06 '12 at 10:06
@ChrisClower Ok that's great. – Rob Aug 06 '12 at 10:06
@Rob: Look for my updated answer! – Amberlamps Aug 06 '12 at 10:06

score 0 · Answer 2 · answered Aug 06 '12 at 09:33

0

This is possible with inline events, but I recommend using either pure Javascript or jQuery to do it. jQuery covers cross-browser implementations for you.

For example (with jQuery):

$("#imgID").click(function(){
    $("#formID").submit();
});

answered Aug 06 '12 at 09:33

Purag

16,941
4
54
75

There is no jQuery in the question! – Amberlamps Aug 06 '12 at 09:33
@Amberlamps: Am I not allowed to recommend it? – Purag Aug 06 '12 at 09:34
You had only posted your code snippet when I commented on your answer. – Amberlamps Aug 06 '12 at 09:53
@Amberlamps: I do that to get my answer in first--then I edit it accordingly. – Purag Aug 06 '12 at 09:54
Why you do that? Do not complain if people do not get the gist when they can only read half of your answer. – Amberlamps Aug 06 '12 at 09:56
@Amberlamps: ...I do it to get my answer in first? – Purag Aug 06 '12 at 09:59

score 0 · Answer 3 · answered Aug 06 '12 at 09:37

You can use javascript like

<img src="image.png" onclick="submit_form()" />
<img src="image.png" onclick="submit_form()" />

JavaScript function

function submit_form()
{
  // If you want to change action then

  document.form_name.action="your action";

  document.form_name.submit();
}

Amberlamps · Answer 4 · 2012-08-06T10:06:09.060

-1

Try this for also passing a parameter:

<form name="FormularName">
    <input type="hidden" name="valueField" />
    <a href="#" onclick="submit_form('Flag1')"><img src="image1.jpg" /></a>
    <a href="#" onclick="submit_form('Flag2)"><img src="image2.jpg" /></a>
</form>

JS:

function submit_form(value) {
    document.FormularName.valueField.value = value;
    document.FormularName.submit()
}

edited Aug 06 '12 at 10:06

answered Aug 06 '12 at 09:33

Amberlamps

39,180
5
43
53

Eh, inline event handling isn't really the best option here, but is one nonetheless. :) – Purag Aug 06 '12 at 09:34
@Purmou: Please explain why inline event handling is not the best answer here! – Amberlamps Aug 06 '12 at 09:55
It's not neat and and harder to maintain if you have other Javascript in a separate file or on other parts of the page. Just keep every aspect of your site separate--layout (HTML), design (CSS), and functionalities (Javascript). – Purag Aug 06 '12 at 09:58
I generally agree with you, when you have some processing to do. But when you have just a function call, you might want to keep that in your element. – Amberlamps Aug 06 '12 at 10:01
I guess it's a matter of style then. – Purag Aug 06 '12 at 10:02

Using two images as submit's for a form

4 Answers4