简体   繁体   中英

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

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.

<label> has two id's, remove one. It's probably breaking something in your code.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM