Summary of several submission methods of HTML forms

Summary of several submission methods of HTML forms
The most common, most commonly used and most general method is to use submit type.. See the code:

Copy code
The code is as follows:

<form name=”form” method=”post” action=”#">
<input type=”submit” name=”submit” value=”Submit">
</form>

Another common method is to use pictures:

Copy code
The code is as follows:

<form name=”form” method=”post” action=”# ">
<input type=”image” name=”submit” src=”btnSubmit.jpg”>
</form>

The third method is to use a link to submit the form, using the javascript DOM model:

Copy code
The code is as follows:

<form name=”form” method=”post” action=”#”>
<a href="javascript:form.submit();">Submit</a>
</form>

This method actually calls a javascript function. Using javascript function to submit a form has many flexible methods. For example, you can add it to the onclick event of any tag:

Copy code
The code is as follows:

<form name=”form” method=”post” action=”#”>
<div onclick="javascript:form.submit();">
<span>Submit</span>
</div>
</form>

But what if a form needs to have multiple submit buttons?
For example, the submit buttons in a form point to different processing pages. Since the processing page of the form data has been determined when the form is defined, simply placing multiple submit buttons in the form will not achieve the desired result. This requires JavaScript.
First, define a function:

Copy code
The code is as follows:

<script language=javascript>
function query(){
form.action=”query.php”;
form.submit();}
function update(){
form.action=”update.php”;
form.submit();}
</script>

By changing the value of the form's action attribute through javascript, you can implement multiple submit buttons with different functions. The code on the page is as follows:

Copy code
The code is as follows:

<form name=”form” method=”post” action=”#”>
<input type=”button” name=”query” onclick=”query();” value=”query”>
<input type=”button” name=”update” onclick=”update();” value=”Update”>
</form>

The above code uses a normal button, and the submit function is implemented by calling a javascript function in its onclick event.
With the above methods of submitting forms, I think it is enough to handle complex forms.

<<:  How to install docker and portainer in kali

>>:  Possible reasons why the input type="reset" tag in HTML is invalid (does not work).

Recommend

The difference between JS pre-parsing and variable promotion in web interview

Table of contents What is pre-analysis? The diffe...

Best Practices for Developing Amap Applications with Vue

Table of contents Preface Asynchronous loading Pa...

MySQL statement to get all dates or months in a specified time period (without setting stored procedures or adding tables)

mysql gets all dates or months in a time period 1...

Use neat HTML markup to build your pages

The Internet is an organism that is constantly ev...

How to limit access frequency, download rate and number of concurrent connections in Nginx

1. Overview of modules and instructions used to l...

How to clear the timer elegantly in Vue

Table of contents Preface optimization Derivative...

How to maintain MySQL indexes and data tables

Table of contents Find and fix table conflicts Up...

Docker image import and export code examples

Import and export of Docker images This article i...

Example of ellipsis when CSS multi-line text overflows

Ellipses appear when multi-line text overflows Th...

Implementation of modifying configuration files in Docker container

1. Enter the container docker run [option] image ...

37 Tips for a Good User Interface Design (with Pictures)

1. Try to use single column instead of multi-colum...

Xhtml special characters collection

nbsp &#160; no-break space = non-breaking spa...

Sample code for implementing the Olympic rings with pure HTML+CSS

Rendering Code - Take the blue and yellow rings a...

Solve the problem that the CentOS7 virtual machine cannot access the Internet and set up the CentOS7 virtual machine to use a static IP to access the Internet

I was playing with CentOS in a VMware virtual mac...

Detailed explanation of Linux lsof command usage

lsof (list open files) is a tool to view files op...