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

CSS achieves a proportional display effect of an element with fixed height and width

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

CSS achieves a proportional display effect of an element with fixed height and width

Vue 2.0 Basics in Detail

HTML+CSS+JS realizes canvas follows the mouse small circle special effect source code

How to use html table (to show the visual effect of web page)

Summary of HTML horizontal and vertical centering issues

In-depth analysis of MySQL query interception

A brief analysis of controlled and uncontrolled components in React

Docker image creation and one-click packaging and deployment of the entire project

Vue implements 3 ways to switch tabs and switch to maintain data status

In-depth explanation of MySQL stored procedures (in, out, inout)

Recommend

Pure CSS implementation of radio and checkbox effect example

Detailed introduction to deploying k8s cluster on centos7 system

IIS configuration of win server 2019 server and simple publishing of website

Detailed analysis of MySQL master-slave replication

Docker builds cluster MongoDB implementation steps

How to publish static resources in nginx

Ubuntu View and modify mysql login name and password, install phpmyadmin

How to count the number of specific characters in a file in Linux

Example code for implementing the secondary linkage effect of the drop-down box in Vue

Process analysis of deploying ASP.NET Core applications on Linux system Docker

jQuery implements a simple comment area

MySQL 5.7.17 winx64 installation and configuration graphic tutorial

Mysql join query principle knowledge points

Complete steps to use element in vue3.0

How to deploy zabbix_agent in docker