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
How to build a standardized vmware image for kubernetes under rancher
When learning kubernetes, we need to practice in ...
VMware Workstation 14 Pro installs CentOS 7.0
The specific method of installing CentOS 7.0 on V...
How to prevent users from copying web page content using pure CSS
Preface When I was typing my own personal blog, I...
Why does MySQL database index choose to use B+ tree?
Before further analyzing why MySQL database index...
Echarts tutorial on how to implement tree charts
Treemaps are mainly used to visualize tree-like d...
Detailed process of installing Presto and connecting Hive in Docker
1. Introduction Presto is an open source distribu...
The role and opening of MySQL slow query log
Preface The MySQL slow query log is a type of log...
Solution to the root password login problem in MySQL 5.7
After I found that the previous article solved th...
Detailed explanation of jQuery chain calls
Table of contents Chain calls A small case Chain ...
CSS code to control the background color of the web page
I think everyone often worries about finding pict...
Nginx Layer 4 Load Balancing Configuration Guide
1. Introduction to Layer 4 Load Balancing What is...
Three steps to solve the IE address bar ICON display problem
<br />This web page production skills tutori...
In-depth explanation of SQL statement execution (MySQL architecture overview -> query execution process -> SQL parsing order)
Preface: I have always wanted to know how a SQL s...
Detailed explanation of the default values of width and height in CSS: auto and %
in conclusion % of width: defines the percentage ...
Analysis of CocosCreator's new resource management system
Table of contents 1. Resources and Construction 1...