Image button inside of form, don't want to submit

Question

I have a form with an image button inside of it, and this image button is submitting the form. How do I override this functionality?

<form><input type="image" src="/images/arrow.png" id="imageButton" onClick="javascript:autofill();"/></form>

Congruous

Answer 1

Why not just have image? return false would also stop the form submit action.

<form><input type="image" src="/images/arrow.png" id="imageButton" onClick="autofill();return false;"/></form>

Tret

Answer 2

simply return false after your autofill() function.

onclick="autofill();return false;"

Charcoal

Answer 3

Why use an input element at all? I'd have thought just using an image with an onclick event would be more appropriate if you don't want to cause any submit or reset behaviour

<image src="/images/arrow.png" onclick="javascript:autofill();" width="xxx" height="xxx" alt="Autofill" />

Imitable

based on the way the question is asked this is the correct answer – Swill

Answer 4

Clicking on button inside a form, submit the form by default. To change it, you have to define a button with type="button". Then, you can add img element inside it. This is the best way I found to do it.

<form>
    <button type="button" id="imageButton" onclick="javascript:autofill();">
        <img src="images/arrow.png">
    </button>
</form>

Rousseau

Hi Uri, welcome to stack overflow. Normal usage is to provide an explanation as to why your code provides the solution that the OP question asks. – Glaudia

Explanation added. Thanks for the enlightenment. – Rousseau

Answer 5

Try to use event.preventDefault to abort submit event on button click

for example:

$("#idButton").click(function(event) {
    if(!valid)
    {
        //stopEvent
        event.preventDefault();

    } else {
        //submit your form
        $("#form").submit();
    }
}); 

Paracelsus

Answer 6

Do you want to disable your button after click the submit button/image?

if you're using php you can use the code below or add disabled="disabled" to disable the button as long as you keep it in your input form..

 <?php if (isset($disable) && $disable === true) echo ' disabled="disabled"'; ?>

how to add my code

if you use your line of code with an image type:

try:

<form><input type="image" src="/images/arrow.png" id="imageButton" onClick="javascript:autofill();" <?php if (isset($disable) && $disable === true) echo ' disabled="disabled"'; ?> /></form>

Please, read this answer from me (jagb) too if you'd like to use an image without javascript, the needed css can be found on there as well.

Succoth

Answer 7

Adding attribute type="button" to button tag resolved my issue.

Dispensation