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

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:

<form id="loginform" name="loginform" action="upload/2022/web/<input type=image src=login.gif" name="imagesubmit" />
</form>

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:

<form id="loginform" name="loginform" action="upload/2022/web/<input onclick=document.loginform.submit() type=image src=login.gif" name="imagesubmit" />
</form>

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:

<input type="SUBMIT" onclick="submit()">

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:

<form id="loginform" name="loginform" action="upload/2022/web/<img onclick=document.loginform.submit() src=login.gif" name="imagesubmit" />
</form>

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:

<input type="image" src="bt.gif" onclick="submit()">

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

Copy code
The code is as follows:

<input type="image" src="bt.gif" onclick="submit();this.disabled=true">

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:

<script language="JavaScript">
function test(){
for(i=0;i<document.getElementsByName('t1').length;i++)
document.getElementsByName('t1')[i].disabled=true;
}
</script>
<form name="f1" method="post" action="1.htm" target="_blank" onsubmit="test()">
<input type="image" name="t1" src="upload/2022/web/newtopic.gif">
<input type="image" name="t1" src="upload/2022/web/newtopic.gif">
<input type="image" name="t1" src="upload/2022/web/newtopic.gif">
</form>

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:

<input type="image" src="xxx.gif" onclick="return dosubmit();">

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

Recommend

Detailed explanation of fuser command usage in Linux

describe: fuser can show which program is current...

How to store images in MySQL

1 Introduction When designing a database, it is i...

Ideas and practice of multi-language solution for Vue.js front-end project

Table of contents 1. What content usually needs t...

Implementation of formatting partitions and mounting in Centos7

Linux often encounters situations such as adding ...

JS realizes the scrolling effect of announcement online

This article shares the specific code of JS to ac...

WeChat applet implements calculator function

This article shares the specific code for the WeC...

VMware Workstation 14 Pro installs CentOS 7.0

The specific method of installing CentOS 7.0 on V...

Detailed explanation of map overlay in openlayers6

1. Overlay Overview Overlay means covering, as th...

Summary of basic operations for MySQL beginners

Library Operations Query 1.SHOW DATABASE; ----Que...

What is a MySQL tablespace?

The topic I want to share with you today is: &quo...

Detailed tutorial on building a local idea activation server

Preface The blogger uses the idea IDE. Because th...

About CSS floating and canceling floating

Definition of Float Sets the element out of the n...

Pure CSS implementation (no script) Html command-style tooltip text prompt effect

Analyze the execution process. Move the mouse int...

More Ways to Use Angle Brackets in Bash

Preface In this article, we will continue to expl...

vue perfectly realizes el-table column width adaptation

Table of contents background Technical Solution S...