Home Daily Programming HTML Knowledge HTML implementation of multi-select boxes and analysis of the reasons why multiple data cannot be submitted (video attached)

HTML implementation of multi-select boxes and analysis of the reasons why multiple data cannot be submitted (video attached)

Sep 11, 2018 pm 05:32 PM

This article mainly introduces you to the specific operation method of submitting data in the multi-select box in the HTML form and the analysis of the reasons why multiple data cannot be submitted.

HTML forms are usually used to collect data entered by users and then submit the data to the server for interaction. Then everyone should know that HTML can collect user data through radio button or multi-select boxes.

Below we will introduce to you the related operations of obtaining data from the HTML form multi-select box through specific code examples.

HTML form code example is as follows:

<form action="upload.php" method="post">
    <input type="checkbox" name="like" value="篮球">篮球<br>
    <input type="checkbox" name="like" value="足球">足球<br>
    <input type="checkbox" name="like" value="排球">排球<br>
    <input type="checkbox" name="like" value="乒乓球">乒乓球<br>
    <input type="submit" value="确定">
</form>
Copy after login

Accessed through the browser, the multi-select box effect is as follows:

HTML implementation of multi-select boxes and analysis of the reasons why multiple data cannot be submitted (video attached)

From the above HTML form code and pictures, you can see that when we select two options and click OK, the selected options will be submitted to the upload.php file through post submission.

upload.php code is as follows:

<?php
var_dump($_POST);
Copy after login


Then PHP processes the data submitted by the HTML form and prints it The result is as shown below:

HTML implementation of multi-select boxes and analysis of the reasons why multiple data cannot be submitted (video attached)

Everyone should have noticed at this time that we clearly submitted two data, why only one data is displayed? Below we will continue to analyze the reasons for this situation.

We changed the method submission method in the above HTML code to get, and then changed the PHP code to

<?php
var_dump($_GET);
Copy after login

Then select the new option, and submit the result accessed through the browser after confirmation As shown below:

HTML implementation of multi-select boxes and analysis of the reasons why multiple data cannot be submitted (video attached)

HTML implementation of multi-select boxes and analysis of the reasons why multiple data cannot be submitted (video attached)

##Here we can also find that although we selected three values, the submission was successful. Only one value is obtained. In fact, the main reason is because the names in the input are all the same, and when the name values ​​in the HTML form input are the same, the last value will overwrite the previously selected value. For example, in the above example, upload.php only receives one value of "volleyball", and the previous two values ​​​​are overwritten.

If you want to get multiple data, you need to use the JS method, which has been introduced to you in this article [

How to get multiple values ​​selected in the checkbox in js] , friends in need can refer to it.

So the above is an introduction to the operation method of submitting data in the multi-select box in the HTML form and the analysis of the reasons why multiple data cannot be submitted. We also have the corresponding

video tutorial[In the HTML form Analysis of the reasons why multiple data in the multi-select box cannot be submitted to the background] is available for everyone to learn from.

The above is the detailed content of HTML implementation of multi-select boxes and analysis of the reasons why multiple data cannot be submitted (video attached). For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)