Discussion on the Issues of Image Button Submission and Form Repeated Submission

In many cases, in order to beautify the form, the submit button is replaced with an image. However, if you don't pay attention to the details, it will cause repeated submission of the form, leading to some inexplicable errors, such as repeated insertion of database records.
Let's look at the following simple form code:

Copy code

The code is as follows:

This code is correct and there will be no duplicate submission problem. “<input type="image">” actually has the same function as “<input type="SUBMIT">”. Clicking on the image will execute the submit() operation.
But some people are not assured, and add an onclick action to the image, such as the code:

Copy code

The code is as follows:

Now clicking the image button once will submit it twice, resulting in duplicate submission. Its function is equivalent to:

Copy code

The code is as follows:

Of course that is not right.
If you must use the onclick event, you can use <img> instead of <input type="image">. The following code can also work normally:

Copy code

The code is as follows:

I encountered this problem myself, which caused the graphic verification code submitted by the user when logging in to be incorrect. Think about it, the user has submitted twice, will the verification code be correct when submitting the second time?
2. How to prevent duplicate submission of image buttons?

Copy code

The code is as follows:

How to prevent duplicate submission of such a button?
Solution:

Copy code

The code is as follows:

This method can avoid repeated submission using image buttons, but now there are three such buttons together. I want to press one of them, and all three can no longer be submitted.
Solution:

Copy code

The code is as follows:

There are two ways to submit a form using an image:
1.<input type="image" src="xxx.gif" >
This image will automatically submit the Form, that is, type="submit". If you need to make a judgment or test before submission, use

Copy code

The code is as follows:

However, submitting the form in this way will cause the form to be submitted twice, which often results in form elements being submitted repeatedly and the database being written abnormally! !
The problem is especially serious when using IE, but there will be no error when using Firefox! At this time, please note that you must set the database to be unique for the same information!
Reason: The description of image in HTML is "Create an image control that will cause the form to be submitted immediately when clicked."
2.<img alt="Submit" src="xxx.gif" onclick="return dosubmit();" style="cursor:pointer;">
This method of submission is normal and has no problem, the effect is the same as above. Therefore, please use the first method less often to submit data, especially in struts applications. Note: css: cursor: hand can only be recognized by IE, not Firefox. But pointer is compatible!
Note! No matter which method you submit, it must be contained between <form></form>, otherwise, the submission will be invalid.

<<: MySQL learning database operation DML detailed explanation for beginners

>>: Practice of using Tinymce rich text to customize toolbar buttons in Vue