Click on image in triggers form submit

Question

I have a form and on clicking the image submit form is triggered by default. I am not understanding why click is triggering form submit. Can someone please guide on this?

<form name="test1" action="er" method="post" onsubmit="return validateForm()"
<input type="text" id="du" name="du" value="74491" onkeyup="showButton()">
<input type="image" src="../images/save-icon.png" width="20" height="20" ></form>

there is probably a piece of JavaScript that is being called that you are not including here... — DrCord, Aug 27 '19 at 21:44
its a functionality..got it from he answers below. Thanks for looking into it. — Pran, Aug 28 '19 at 02:23

score 5 · Accepted Answer · answered Aug 27 '19 at 21:44

5

This is the expected behavior. According to the standard:

input elements of type image are used to create graphical submit buttons, i.e. submit buttons that take the form of an image rather than text.

answered Aug 27 '19 at 21:44

Eriks Klotins

4,042
1
12
26

Indeed, the browser will also send x and y parameters giving the coordinates of the image that was clicked. – Lee Kowalkowski Aug 27 '19 at 21:56

score 2 · Answer 2 · answered Aug 27 '19 at 21:49

2

An input type="image" only defines that image as the submit button. For more check this one

answered Aug 27 '19 at 21:49

nagiatzi

106
5

Adnane Ar · Answer 3 · 2019-08-28T10:14:11.333

Please use <img src=''>

instead of <input type='image'>.

Because input type image fires a default submit action! Otherwise here is a sample script that stops form submitting whenever you click a image input.

Hope my code will help you!

document.addEventListener("click", function(e){
  const path=e.path;
  for(let i=0;i<path.length-4;i++){
    if(path[i].tagName=="INPUT"&&path[i].type=="image"){
      var form=path[i].parentNode;
      while(form.tagName!="FORM") form=form.parentNode;
      
      let currentSubmitAttr=form.getAttribute("onsubmit");
      
      form.setAttribute("onsubmit", "return false;");
      setTimeout(function(){
        form.setAttribute("onsubmit", currentSubmitAttr);
      }, 100);
    }
  }
  return false;
});

<form action="action.php">
  <input type="text" name="du">
  <br><br>
  <input type='image' src='https://dummyimage.com/300x250/000/fff'>
</form>

You are welcome, anything else that I can help you at ? – Adnane Ar Aug 28 '19 at 10:10 — Adnane Ar, Aug 28 '19 at 10:10

Click on image in triggers form submit

3 Answers3