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

Detailed explanation of how to deploy SpringBoot in docker and replace jar packages

Table of contents Project Directory Dockerfile Fi...

Analysis of parameter transfer process of driver module in Linux

Declare the parameter name, type and permission y...

Detailed example of inserting custom HTML records in Quill editor

It is already 2020. Hungry humans are no longer s...

VUE render function usage and detailed explanation

Table of contents Preface The role of render Rend...

CSS and HTML and front-end technology layer diagram

Front-end technology layer (The picture is a bit e...

MySQL example of getting today and yesterday's 0:00 timestamp

As shown below: Yesterday: UNIX_TIMESTAMP(CAST(SY...

A practical guide to Vue project first screen performance optimization components

Table of contents Vue first screen performance op...

Implementing add, delete, modify and query operations on MySQL based on sqlalchemy

Demand scenario: The boss asked me to use the cra...

Web page printing thin line table + page printing ultimate strategy

When I was printing for a client recently, he aske...

Example of how to achieve semi-transparent background image and opaque content in CSS3

I encountered this problem when I was making the ...

Detailed explanation of the EXPLAIN command and its usage in MySQL

1. Scenario description: My colleague taught me h...

Detailed explanation of how to use binlog2sql to quickly roll back after MySQL misoperation

Preface In daily work or study, it is inevitable ...

Tomcat first deployment web project process diagram

Put your own web project in the webapps directory...

Hbase Getting Started

1. HBase Overview 1.1 What is HBase HBase is a No...

JavaScript to achieve JD.com flash sale effect

This article shares the specific code of JavaScri...