Shiva Acharjee Shiva Acharjee - 28 days ago 5
HTML Question

Dynamic input field being rendered after the </form> tag

This is weird but I have a button id #fusk on click of which I am adding some dynamic elements as such

$('#imgc').append(
"<div class='divi'>" +
"<input type='hidden' name='"+i+"' value='"+e.target.result+"' />" +
"<div class='remove_f' onClick='remove_f()'>" +
"<a href='#'><i class='glyphicon-circle_remove icon_margin'></i></a>" +
"</div><img style='float:left' class='oni_wh' src='"+e.target.result+"'/></div>");


the elements are being added inside a form

<form method="post" id="frmi" enctype="multipart/form-data" >
<div class="right_btn_holder_">
<label id="add_i" for="fusk" id="fuskb" class="btn btn-success">
<i class="glyphicon-circle_plus icon_margin"></i>
</label>

<button id="uim" type="submit" id="remove_data" class="btn btn-danger">
<i class="glyphicon glyphicon-upload icon_upload"></i><?php echo strings("upload"); ?>
</button>
</div>
</div>
<div class="box-content nopadding">
<div class="tab-content padding tab-content-inline tab-content-bottom">
<div class="control-group">
<label class="control-label"><?php echo strings("offer_titl"); ?></label>
<div class="controls">
<input maxlength="50" type="text" name="on" placeholder="<?php echo strings("titl");?>"/>
</div>
</div>
<input multiple accept="image/x-png,image/jpeg" id="fusk" type="file" name="photo[]" style="display: none;">

<div id="imgc" class="control-group">

</div>
</form>


But when the elements are added is see the elements are appearing after
</form>
tag thus no data is being sent

Answer Source

Form should have Proper starting and closing tags.

There are lots of divs which not closing and some of them closed without starting. That's why the issue is occurring.

<div id="imgc" class="control-group">

Jquery really can't finding closing div that's why Append not working properly.