Html forms input array

Using Form Input Arrays For Checkboxes

One way that I’ve gotten faster at XHTML forms is using input arrays whenever possible. Input arrays allow me to deal with just one variable for checkboxes that serve as multiple answers to one question. Here’s how the process works.

Step 1: The XHTML Form

 
 
 />
 
Website
 
 
 />
 
TV Commercial
 
 
 />
 
Magazine Ad
 
 
 />
 
Billboard
 
 
 />
 
Other
 
 

Note that the name attribute of each input is the same: how_hear[] . The brackets indicate that the input field is an array. Also note the PHP in each input tag that determines if the chechbox should checked initially.

Step 2: The PHP Form Validation and Processing

//initialize $how_hear = count($_POST['how_hear']) ? $_POST['how_hear'] : array(); //echo out their choices separated by a comma echo count($how_hear) ? implode(', ',$how_hear) : 'Nothing';

To avoid PHP warnings, we declare the $how_hear array at the very top.

PHP’s count() function returns the number of items selected, so we you require at least one be checked, count() is what we’ll use.

Lastly, to display the selections as a list, we use the implode() function.

That’s it! Click here to see an example.

Источник

Работа с массивами в HTML-форме

В этой статье я покажу интересную возможность по работе с формами, которая в некоторых случаях может упростить и ускорить обработку форм. Это основано на работе с массивами в HTML-форме. А теперь более подробно об этом.

Вообще, массивы в HTML-форме используются часто, например, когда у нас есть несколько checkbox, отвечающих за одно и то же поле. Например, пользователю требуется выбрать те разделы сайта, которые ему наиболее интересны. Тогда выводится что-то наподобии этого:

После отправки формы в скрипт придёт массив sections со значениями, отмеченными пользователем. Такой приём использования массивов в HTML-форме очень часто можно встретить.

Но сейчас я Вам покажу ещё один вариант использования такой возможности, но уже более оригинальный и редко встречаемый. Создадим HTML-форму:

Обратите внимание, что мы для разных полей в форме указываем массив user с соответствующими ключами, которые уже характеризуют само поле. Теперь, чтобы получить уже готовый массив user для использования в PHP, достаточно написать в скрипте-обработчике так:

Проще и не бывает. Дальше уже можно использовать ассоциативный массив $user на своё усмотрение.

В этой статье я продемонстрировал, как можно работать с массивами в HTML-форме. Надеюсь, что это было полезно и интересно.

Создано 29.11.2013 12:54:10

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 3 ):

Хорошая статья, но как же со скоростью? Если делать вот так, как вы показали в статье, то не упадёт ли скорость?

Возможно, лучше писать к примеру name=»user[‘password’]», чтобы php при получении не подумал, что это зарезервированное слово или какая-то константа. Иногда бывает, и тогда уже очень трудно понять, в чём дело. Однако, возможно это проблема лишь некоторых версий php, это я точно не могу сказать. Если у вас работает без кавычек, то ок, делайте 🙂

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Источник

Submit an Array with a HTML Form

11 August 2014 · 262 words

Most of us will know how HTML forms work: inputs contained within the form send data to a url, by either a GET or POST request. This will result in the server being able to access this data on the other end.

The way to do this usually goes something like this:

Interestingly, and to the point of this post, you can also post an array of data with a form by using square brackets. If you place something within the square brackets then the resulting array becomes associative, otherwise it’ll be numeric.

Checkboxes#

This method makes submitting names and address neater. However, one of the biggest differences is when using checkboxes, as they don’t need a different name for each input, one name, one array, multiple values — no more huge isset checking statements!

As you can see this is a much neater way of submitting data with forms, both from a html and a server side point of view.

About the Author: Edd Turtle

Edd is a PHP and Go developer, specialising in building scalable web applications. He enjoys blogging about his experiences, mostly about creating and coding new things he’s working on and is a big beliver in open-source and Linux.

Источник

How to submit an associative array with HTML & PHP

This post will show you how to submit an associative array with HTML and PHP. This concept is quite useful when you need to submit array-type data such as shopping cart information.

Feel free to skip to ‘HTML forms and input‘ or to ‘Submitting Array data through HTML‘ if you’re quite familiar with the syntax of PHP’s array() function.

Latest Posts

Scan Your Docker Images and Containers with VirusTotal: A Step-by-Step Guide

Bitbucket for Newbies: Mastering Basic Commands and Collaborating on Code

Accelerate Your Performance Testing on Ubuntu with k6 and Postman-to-k6

Solve the “Cannot read properties of undefined (reading ‘type’)” error with these simple fixes

December 19, 2022 May 1, 2023

Solving the ‘tail: inotify resources exhausted’ Error on Ubuntu

December 18, 2022 May 1, 2023

Copyright 2018-2022 Anto Online.

All rights reserved. Please consider the information, scripts and instructions carefully before using it yourself. Make sure you have ample backups! The information, scripts and instructions are provided without warranty. Consult a professional if you are unsure. Anto does not speak on behalf of any company and our opinions are our own.

The feature images have been provided by pexels.com and unsplash.com.

Источник

Post Array From HTML Form To PHP (Simple Examples)

Welcome to a tutorial on how to post an array from an HTML form to PHP. The “standard” HTML form fields are easy enough. Just add the name attribute to the fields, submit the form, and that’s it. But what if we want to post an array instead?

To post an array from an HTML form to PHP, we simply append a pair of square brackets to the end of the name attribute of the input field. For example:

But how about doing this with AJAX? How about multi-dimensional arrays? How do we handle the post data in PHP? That is what we will walk through in this guide, with examples. Read on to find out!

TLDR – QUICK SLIDES

TABLE OF CONTENTS

HTML POST ARRAY TO PHP

All right, let us now get into the various examples of posting an array to a PHP script.

EXAMPLE 1) POST A SIMPLE ARRAY TO PHP

1A) THE HTML

As in the introduction, we only need to append square brackets [] behind the name to POST arrays to the PHP script.

1B) SERVER-SIDE PHP

Yep, this should be straightforward enough. Since we defined colors[] , $_POST[«colors»] will be an array.

EXAMPLE 2) POST NESTED ARRAY TO PHP

2A) THE HTML

Favorite Colors Favorite Food

Multi-dimensional array fields are not that difficult either – Just use 2 square brackets, and give the first one a key. That’s it, done.

2B) SERVER-SIDE PHP

No mystery here either – $_POST[«fav»] is a multi-dimensional array as expected.

EXAMPLE 3) POSTING ARRAY WITH AJAX

3A) THE HTML

Favorite Colors Favorite Food

Not much of a difference here – Still the same HTML form, but using onsubmit=»return save()» to use Javascript AJAX to handle the submission instead.

3B) THE JAVASCRIPT

function save () < // (A) GET FORM DATA var form = document.getElementById("myForm"), data = new FormData(form); // (B) TO MANUALLY APPEND MORE DATA data.append("address[]", "Foo Street 123"); data.append("address[]", "Hello World #234"); // (C) AJAX FETCH fetch("3c-AJAX.php", < method:"POST", body:data >) .then(res => res.text()) .then(res => < console.log(res); // DO SOMETHING >); return false; >

1. Collect data from the HTML form.
2. Optional, we can manually append more fields to the data.
3. Lastly, send the data to the server, and read the server response as text.

3C) SERVER PHP

Nothing to see here… Just a dummy script that will echo whatever is being submitted.

DOWNLOAD & NOTES

Here is the download link to the example code, so you don’t have to copy-paste everything.

SUPPORT

600+ free tutorials & projects on Code Boxx and still growing. I insist on not turning Code Boxx into a «paid scripts and courses» business, so every little bit of support helps.

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

EXTRA BITS & LINKS

That’s all for this project, and here is a small section on some extras that may be useful to you.

ONLY FOR PHP!

Before the toxic trolls get angry – Take note that the above method of name=»something[]» works for PHP, but it can be different for other languages. For example, some languages may require all the name attribute to be the same instead:

JSON ENCODE-DECODE

To better support cross-platform data exchange, the common industry practice is to turn the array into a flat string, using JSON encode:

On the server side, we can do a JSON decode to get the array back.

P.S. Any programming language can encode-decode a JSON string so long as there is a library or parser.

LINKS & REFERENCES

YOUTUBE TUTORIAL

INFOGRAPHICS CHEAT SHEET

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment Cancel Reply

Search

Breakthrough Javascript

Take pictures with the webcam, voice commands, video calls, GPS, NFC. Yes, all possible with Javascript — Check out Breakthrough Javascript!

Socials

About Me

W.S. Toh is a senior web developer and SEO practitioner with over 20 years of experience. Graduated from the University of London. When not secretly being an evil tech ninja, he enjoys photography and working on DIY projects.

Code Boxx participates in the eBay Partner Network, an affiliate program designed for sites to earn commission fees by linking to ebay.com. We also participate in affiliate programs with Bluehost, ShareASale, Clickbank, and other sites. We are compensated for referring traffic.

Источник