Using <input type="image"

[cynix666]

Ok, new to Forms Tools (2.1.2) have installed and successfully built API and simple POST forms up to this point. I am now trying to use an image as the submit button like this:

Code:

<input type="image" value="submit" src="/i/hm_cta_bot.gif" name="mrcontactsubmit" alt="Get Started" />

Everything else is the same as has been successful before. But, using the image submit, I get a page refresh and all values are lost. FT cannot initialize the form and data is not being submitted. Then, if I swap out the image for a regular button it seems to work great again.

It seems to me that FT just does not want to take an image for a Submit button. Is this the case or is there special syntax that should be used when trying to use an image?

Running out of ideas, any help/insight is very much appreciated!

-Aaron

[Ben]

Hey Aaron,

MAN, I must document this! This has tripped up lots of people.

Image submit buttons are handled differently in the HTML spec. Simple submit buttons sent along a name-value pair corresponding to the button that was clicked; image buttons don't: they pass along some X & Y coordinates with the submit name attribute as the prefix. I'm not entirely sure this is consistent across browsers, either...

Anyway, to use a image submit button in an API form (POST forms are fine), you need to let the ft_api_process_form() function know that the form has been submitted by specifying a different form field - one that you know will always be included on the POST request.

So, add this to your form:

Code:

<input type="hidden" name="is_submitted" value="1" />

Then, in your API code at the top of the page, use the "is_submitted" hidden field as the fake submit button.

PHP Code:

$params = array(
 ... 
 "submit_button" => "is_submitted",
  ...
); 


In retrospect, the "submit_button" key wasn't named very well: I didn't take into account this situation with image submit buttons. I should have called it something like "form_submit_includes_key" or something more generic. Oh well. In the code, all it's doing is checking to confirm that the POST request includes that name-value pair. If it IS, it processes the form. Otherwise it ignores it.

Anyway, hope this helps! Let me know if you run into any other problems.

- Ben