Category Archives: Web

PHP $_POST returns only one item for SELECT multiple HTML tag

PHP developers decided that values posted from HTML select tag with attribute multiple, somehow overwrites some internal variable data. Basically it goes like this – you have the following form with a select tag:
<form action="/post.php" method="post">
  <select name="MyMultiSelect" multiple>
    <option>one</option>
    <option>two</option>
    <option>three</option>
    <option>four</option>
  </select>
  <input type="submit" value="send">
</form>

and in PHP you try to access $_POST (An associative array of variables passed to the current script via the HTTP POST method):
var_dump($_POST);

And guess what? When you select, lets say one, two and three in browser, the array looks something like:
array(1) { ["MyMultiSelect"]=> string(5) "three" }

Strangely, the cause is some overwrite that is described in PHP FAQ: How do I get all the results from a select multiple HTML tag? For me it is mystery, why did PHP developers choose to overwrite values posted by HTTP standard post?

The problem is, that they propose to add square brackets to HTML code, like:
<select name="MyMultiSelect[]" multiple>

Beside, that I do not like ‘[]’ in my Valid HTML 4.01 Strict code, the problem is, that you may not have access to that HTML code. In my case it is legacy application, that is available in binary form only.

The solution that I come up is, to use raw $_POST data using PHP file_get_contents in combination with PHP input/output streams namely php://input

php://input allows you to read raw POST data.

Here is a sample code:
$data_from_post = file_get_contents("php://input");
var_dump($data_from_post);

And output is:
string(...) "MyMultiSelect=one&MyMultiSelect=two&MyMultiSelect=three"

CSS pseudo-element first-letter using form label element

Today I spent 1/2 hour trying to understand, why my labels do not respect CSS rule first-letter. Here is an example snippet:
#myform label:first-letter {text-decoration:underline}

<form id="myform" action="/test/" method="post">
<label title="From">From:</label>

The problem was, that The ‘first-letter’ pseudo-element can only be attached to a block-level element.

Reference: w3 – 2.4 The ‘first-letter’ pseudo-element

Also, space is mandatory after ‘first-letter’ in CSS, so that this rule are displayed correctly in older browsers, such as Internet Explorer 6.

Edit any website / webpage with simple JavaScript

Copy the following one line JavaScript into address bar of browser to enable ‘edit mode’.
javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

Now you can add or delete any text, move images and objects, and more. Have a fun!

Tested on Internet Explorer 8 and 6, Firefox 3.5.2, Opera 10, Google Chrome 2.0.172.39 and Apple Safari 4.0.3.