How do I detect which image button (input type=image) was clicked using webapp2?

Question

How do I determine, in a Python script running under Google App Engine (GAE), which input type=image (imagebutton) on a web page was clicked (using webapp2 handler)?

I have a web form with two (currently, will be more) image buttons, and I need to know which one was clicked. I’ve seen an answer that talks about using the buttons' id attributes. But it's not using Python / webapp2 so I'm not sure how to apply it, and I may not be understanding it properly anyway.

I have tried many things none of which worked, and this was my starting point

imgid = handler.request.id

in the POST handler, but that gives Attribute Error.

Searching the various information resources on image buttons and webapp2 request, I see very little about getting information back to the server from an imagebutton, other than the coordinates in the image where the pointer was clicked. I did glean that the value attribute is not used with image buttons unlike other buttons; and there was a post in a different environment (ASP.NET, not Python/webapp2) that said to use the id attribute, but that doesn’t work in Python.

(It seems odd that the same approach is not used as for other input button types, using the value attribute.)

This is the code for the POST handler attempting to pick up the id:

class image_button_set(webapp2.RequestHandler):
    def sails_spin_set(handler, SLurl):
        imgid = handler.request.id

And this is the HTML content for the form

<form action="/image_button_set" method="post">
    <input name="parm1" id="Button1" type="image" src="/images/spin-glasses3.jpg" height="256" width="256">
    <input name="parm1" id="Button2" type="image" src="/images/spin-spiral3.jpg" height="256" width="256">
    <input name = "parm1" value="Cancel" style="font-size: 16pt; color: DarkRed; font-weight: bold;" type="submit">
</form>

Here is how the code would look for other types of button, e.g., radio, (omitting the extraneous logging code, etc.):

class image_button_set(webapp2.RequestHandler):
    def sails_spin_set(handler, SLurl):
       image = self.request.get("image")

and the button definitions in the HTML would be

<input name="image" value="image1" type="radio">Image1
<input name="image" value="image2" type="radio">Image2

Could someone please explain what additional details are recquired, or what is not clear about the question "What is the correct way to determine which imagebutton was clicked (in Python / webapp2)?" Just in case people arent't reading the whole thing I have moved that sentence to the top. — RFlack, Jan 23 '21 at 19:10
If you are going to propose any kind of workaround, please check that it hasn't been proposed in places like [this](https://stackoverflow.com/questions/7935456/input-type-image-submit-form-value). That `input type=image` cannot send a value is well-known issue, and it's not really backend dependant. It's the same no matter if you use Python, ASP, PHP, Go, or whatever. If the browser does not send anything to identify the clicked element on the request, you can't do anything on the backend. — yivi, Jan 26 '21 at 08:04

score 1 · Accepted Answer · edited Jan 26 '21 at 20:55

I solved the problem by using the formaction attribute on the imagebutton.

<form action="/sails_spin_set?img=dummy" method="post">
  <input type="image" name="spin" formaction="/imgbtn_set?img=spin1" src="/images/spin-glasses3.jpg" style="font-size: 12pt; color: Navy; font-weight: bold;" height="256" width="256">
  <input type="image" name="spin" formaction="/imgbtn_set?img=spin2" src="/images/spin-spiral3.jpg" style="font-size: 12pt; color: Navy; font-weight: bold;" height="256" width="256"><br>
  <br>
  <input name="act" value="Cancel" style="font-size: 16pt; color: DarkRed; font-weight: bold;" type="submit">
</form>

And then handle the URL in the usual way, routing in the main script:

app = webapp2.WSGIApplication(
                              [('/', MainPage),
                               ('/imgbtn_show', image_button_show),
                               ('/imgbtn_set', image_button_set)])

and the POST handler for this:

class image_button_set(webapp2.RequestHandler):
    def post(self):
        imageid = self.request.get("img")  # from the selected imagebutton
        handler.response.write("image selected: "+imageid)

How do I detect which image button (input type=image) was clicked using webapp2?

1 Answers1