CODEWITHSUNDEEP
phpjavascriptjqueryhtmlforms
Tatarin
Tatarin

Reputation: 1298

After input hidden field has been added (appendTo), $_POST is empty on submit

I've looked at some of the similar posts on stack, but cannot find the answer nor solution. After append happens, I submit the form and var comes out to be empty. I checked html, after appending input field, it looks good: 

<input type="hidden" name="imgdelete[]" value="5">

Please help, spent over 3 hours on this. Thank you

JQUERY

$('a.delete-img').bind('click',function()
{
    var imgid = $(this).attr('id');

    // add hidden field to let php know that this image was deleted
    $('<input>').attr({
        type: 'hidden',
        name: 'imgdelete[]',
        id: imgid,
        value: imgid
    }).prependTo('.tablepics tr:last');
});

HTML

<html>
<head></head>
<body>
<form action="" method="post" id="editCarForm" novalidate="novalidate" enctype="multipart/form-data">
<table border="0" cellpadding="0" cellspacing="0" class="tablepics" id="id-form">
        {foreach from=$CARIMGS item=carimg}
        <tr class="car-row">
        <td id="{$carimg.imgid}">
            <a class="fancybox" href="../{$carimg.img}">
                <img width="{$THUMB_WIDTH}" alt=""  src="../{$carimg.thumb}"/></img>
            </a>
        </td>
        <td style="padding:5px" id="{$carimg.imgid}">
            <input type="text" id="imgorder" name="imgorder[{$carimg.imgid}]" value="{$carimg.order}" size="2" maxlength="2" />
            <br><br>
            <a href="javascript:void(0);" id="{$carimg.imgid}" class="delete-img">delete</a><br>
        </td>
        </tr>
        {/foreach}      
        <tr>
        <br>
        </tr>
        <tr>
            <th>Images: </th>
            <td><input name="upload[]" type="file" accept="image/*" multiple="multiple" /></td>
        </tr>

        <tr>
            <th>&nbsp;</th>
            <td valign="top"> //this would be last one
                <input type="submit" value="" class="form-submit" />
                <input type="reset" value="" class="form-reset"  />
            </td>
        </tr>
</table>
</form>
</body>
</html>

Upvotes: 0

Views: 362

Answers (1)

Barmar
Barmar

Reputation: 781004

Try this:

$('a.delete-img').bind('click',function()
{
    var imgid = $(this).attr('id');

    // add hidden field to let php know that this image was deleted
    $('<input>').attr({
        type: 'hidden',
        name: 'imgdelete[]',
        id: imgid,
        value: imgid
    }).prependTo('#editCarForm');
});

This inserts the hidden fields into the form outside the table. Your code was creating an invalid DOM, because you had <input> elements as direct children of <tr>, which is not permitted.

Upvotes: 1

Related Questions