The image button inside the form, do not want to send

Question

I have a form with an image button inside it, and this image button submits the form. How to override this functionality?

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

Answer 1

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

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

Answer 2

just return false after autofill () function.

 onclick="autofill();return false;" 

Answer 3

Why use an input element at all? I would think that just using an image with an onclick event would be more appropriate if you don't want to call submit or reset behavior

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

Answer 4

By clicking on the button inside the form, submit the default form. To change it, you must define a button with type = "button". Then you can add the img element inside it. This is the best way I've found for this.

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

Answer 5

Try using event.preventDefault to abort the dispatch of an event by clicking a button

eg:

 $("#idButton").click(function(event) { if(!valid) { //stopEvent event.preventDefault(); } else { //submit your form $("#form").submit(); } }); 

Answer 6

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

if you use php , you can use the code below or add disabled="disabled" to disable the button while you save 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 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 want to use an image without javascript, the necessary css can be found there too.