CODEWITHSUNDEEP
phphtmlcross-browser
Sod Almighty
Sod Almighty

Reputation: 1786

HTML <input> element not POSTing value?

Okay, this is a weird one.

Best I can tell, my code is correct. And it works in Safari on a Mac, Safari on an iPhone and Google Chrome on an Android tablet. What it doesn't work on, however, is Firefox or Internet Explorer; and I can't for the life of me figure out why!

The problem is this: That when I click an <input> tag, and the form is submitted, the value of this tag is not being POSTed. Even stranger, the X and Y values are being posted - this being an image input tag - but no value.

Here is the relevant piece of HTML:

<input type='image' name="edit" value="59" class="news-control news-control-hidden" src="assets/edit.png"/></input>

Here are the values that are POSTed when I click the tag, as output by a print_r($_POST) call:

Array ( [edit_x] => 29 [edit_y] => 9 )

I have the following code on my PHP web page:

<form name="newsform" method="post" action="Admin.php">
    <table class="editable-list">
<?php
        $entries = get_news_posts();
        if (empty($entries)) {
?>
            <tr><td><p style='margin: 6px 10px 16px 0px'>No news posts exist.<br><br>Click the button below to create one.</p></td></tr>
<?php
        } else
            foreach ($entries as $row) {
                make_editable_news_item($row['date'], $row['content'], $row['ID'], isset($_POST['edit']) ? $_POST['edit'] : null);
            }
        if (!isset($_POST['edit'])) {
?>
            <tr><td class='news-add-post' colspan='7'>
                <input type="submit" name="create_new" value="Create new post"/><br>
            </td></tr>
<?php                       }       ?>
    </table>
</form>

I also have this function:

    function make_editable_news_item($datestamp, $content, $id, $editing_id) {
?>
    <tr class="news-item">
        <td class="news-controls">
<?php   if ($id == $editing_id) {       ?>
                <input type='image' class="news-control" src="assets/undo.png"/></input>
<?php       } else if (!isset($editing_id)) {                   ?>
                <input type='image' name="edit" value="<?= $id ?>" class="news-control news-control-hidden" src="assets/edit.png"/></input>
<?php       }       ?>
            &nbsp;
        </td>
        <td class="news-datestamp">
            <?= format_datestamp($datestamp) ?>
<?php   if ($id == $editing_id) {       ?>
                <div style="background-color: #eee; height: 1px; margin: 6px;"></div>
                <div class="news-control-datestamp">
                    <input name='update_date' class="news-control-datestamp" type="checkbox">
                        Update
                    </input>
                </div>
<?php       }       ?>
        </td>
        <td class="news-separator"/>
        <td class="news-divider"/>
        <td class="news-separator"/>
        <td class="news-content">
<?php   if ($id == $editing_id) {       ?>
                <textarea name="content" class="news-content"><?= $content ?></textarea>
<?php   } else {    ?>
                <div class="news-content"><?= $content ?></div>
<?php       }       ?>
        </td>
        <td class="news-separator"/>
        <td class="news-separator"/>
        <td class="news-separator"/>
        <td class="news-controls">
<?php   if ($id == $editing_id) {       ?>
                <input type='image' name='save' value='<?= $id ?>' class="news-control" src="assets/save.png"/></input>
<?php       } else if (!isset($editing_id)) {                   ?>
                <input type='image' name="delete" value="<?= $id ?>" class="news-control news-control-hidden" src="assets/delete.png"/></input>
<?php       }       ?>
            &nbsp;
        </td>
    </tr>
    <tr class="news-separator"></tr>
<?php } ?>

This code gives rise to the following HTML:

<form name="newsform" method="post" action="Admin.php">
    <table class="editable-list">
    <tr class="news-item">
        <td class="news-controls">
            <input type='image' name="edit" value="59" class="news-control news-control-hidden" src="assets/edit.png"/></input>
            &nbsp;
        </td>
        <td class="news-datestamp">     5th Dec 2015<br>11:12pm         </td>
        <td class="news-separator"/>
        <td class="news-divider"/>
        <td class="news-separator"/>
        <td class="news-content">
            <div class="news-content">...</div>
        </td>
        <td class="news-separator"/>
        <td class="news-separator"/>
        <td class="news-separator"/>
        <td class="news-controls">
            <input type='image' name="delete" value="59" class="news-control news-control-hidden" src="assets/delete.png"/></input>
            &nbsp;
        </td>
    </tr>
    <tr class="news-separator"></tr>
        <tr><td class='news-add-post' colspan='7'>
            <input type="submit" name="create_new" value="Create new post"/><br>
        </td></tr>
    </table>
</form>

So the question is, why don't Firefox and IE respect the input tag's value attribute?

Upvotes: 0

Views: 256

Answers (1)

Quentin
Quentin

Reputation: 943220

Image inputs are supposed to be used for server side image maps.

They don't post their values, they post (as name.x and name.y (PHP converts . to _ because you can't have . in a variable name so it would have failed with the old, default register globals)) the coordinates of the pixel you clicked on.

If you want to pass a value, use a regular submit button instead.

<button name="edit" value="59">
    <img src="assets/edit.png" alt="Edit: 59">
</button>

Upvotes: 2

Related Questions