добавленный div, выходящий из формы - PullRequest
0 голосов
/ 21 мая 2019

Здесь div выходит из формы, я хочу показать добавленную div внутри update_new_1, но div выходит из формы. Вот мой код

var maxAppend = 0;
$(document).on('click', '.update_more', function() {
  var u_id = $(this).attr("u_id");

  var add_new = $('<div class="form-group" style="margin-bottom: 0px">\n\
                    <label for="field-1" class="col-sm-4 control-label">Document</label>\n\
        <div class="col-sm-5">\n\
        <div class="fileinput fileinput-new" data-provides="fileinput">\n\
<span class="btn btn-default btn-file"><span class="fileinput-new" >Select file</span><span class="fileinput-exists" >Change</span><input type="file" name="files[]" ></span> <span class="fileinput-filename"></span><a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none;">&times;</a></div></div>\n\<div class="col-sm-2">\n\<strong>\n\
<a href="javascript:void(0);" class="remCF"><i class="fa fa-times"></i>&nbsp;Remove</a></strong></div>');
  maxAppend++;
  var resil = $(this).closest("#update_new_" + u_id).append(add_new);
  

});
<form method="post" class="form_1" action="" enctype="multipart/form-data">
      <div id="update_new_1" class="update_new_1 item-row">
  <div class="form-group mb0" style="margin-bottom: 0px">
<label for="field-1" class="col-sm-4 control-label">Other Document</label>
<div class="col-sm-5">
  <div class="fileinput fileinput-new" data-provides="fileinput">



  </div>
  <div id="msg_pdf" style="color: #e11221"></div>
</div>
<div class="col-sm-3">
  <strong>
      <a href="javascript:void(0);" id="update_more"  u_id="1" class="addCF item-row-click update_more">
      <i class="fa fa-plus">
      </i>
      &nbsp;Add More</a>
  </strong>
</div>
  </div>
</div>
<div class="modal-footer">
     <img src="<?php echo base_url();?>assets/resources/ajax-loader.gif" id="ajaxIndicator" style="display: none; margin-right: 10px" />
                <input type="submit" id="btnSubmit" class="btn btn-primary" style="font-weight: bold" value="Edit Details" />&nbsp;
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
  </div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
...