0

I have created Dynamic Add / Remove fields... Along with other fields there is an Image file field... Every thing is working well except the image preview.

The preview of first field is working well, but in other added fields the preview is not working...

I m not getting, where I m wrong... Plz help me... Thanks...

Following is my Code:

<div class="card">
  <div class="card-header text-center">
    <b>Team Members</b>
  </div>
  <div class="card-body">

  <div class="row">

    <div class="col-4">

<img src="<?php echo esc_url( site_url('/wp-content/img/blank-image.png') ); ?>" class="img-thumbnail" id="output_member0">

<br><br>

<label class="btn btn-success btn-block btn-file">Select Image<input type="file" name="member_image[]" onchange="preview_member(event, 0)" style="display: none;"></label>

    </div>

    <div class="col-8">

  <div class="form-group">
    <label for="member_name"><b>Member Name</b> <b style="color:#FF0000;">*</b></label>
    <input type="text" class="form-control" name="member_name[]">
  </div>
  <div class="form-group">
    <label for="member_email"><b>Email Address</b> <b style="color:#FF0000;">*</b></label>
    <input type="text" class="form-control" name="member_email[]">
  </div>
  <div class="form-group">
    <label for="member_role"><b>Role in Project</b> <b style="color:#FF0000;">*</b></label>
    <input type="text" class="form-control" name="member_role[]">
  </div>
  <div class="form-group">
    <label for="member_fb"><b>Facebook Username</b> <b style="color:#FF0000;">*</b></label>
    <input type="text" class="form-control" name="member_fb[]">
  </div>

    </div>

  </div>

    <div id="team-member-fields">

    </div>

<button type="button" class="btn btn-success btn-block" id="add-member-fields">Add Member</button>

  </div>
</div>


<script type="text/javascript">

var i = 0;

function preview_member(event, inp) {
  var reader = new FileReader();
  console.log(inp);
  reader.onload = function() {
    var output = document.getElementById("output_member" + inp);
    output.src = reader.result;
  };

  reader.readAsDataURL(event.target.files[0]);
}

jQuery(document).ready(function($) {
  //fadeout selected item and remove
  $(document).on("click", "#remove-member-fields", function(event) {
    event.preventDefault();
    $(this)
      .parent()
      .fadeOut(300, function() {
        $(this).empty();
        return false;
      });
  });

  //add input
  $("#add-member-fields").click(function() {
    i++;

    var rows = '<div class="member-fields"><div class="row"><div class="col-4"><img src="<?php echo esc_url( site_url('/wp-content/img/blank-image.png') ); ?>" class="img-thumbnail" id="output_member${i}"><br><br><label class="btn btn-success btn-block btn-file">Select Image<input type="file" name="member_image[]" onchange="preview_member(event, ${i})" style="display: none;"></label></div><div class="col-8"><div class="form-group"><label for="member_name"><b>Member Name</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_name[]"></div><div class="form-group"><label for="member_email"><b>Email Address</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_email[]"></div><div class="form-group"><label for="member_role"><b>Role in Project</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_role[]"></div><div class="form-group"><label for="member_fb"><b>Facebook Username</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_fb[]"></div></div></div><button type="button" class="btn btn-danger btn-block" id="remove-member-fields">Remove Member</button></div>';

    $(rows)
      .fadeIn("slow")
      .appendTo("#team-member-fields");
    return false;
  });
});

</script>
Minesh
  • 217
  • 2
  • 7

1 Answers1

1

Your rows variable is a bit mixed up with string literals and single quotation marks.

If you want to output a string like ${variablename} you have to put backticks around that string. (see Template literals)

Check the follwing snippet (just surrounded the row string with backticks). 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
  <div class="card-header text-center">
    <b>Team Members</b>
  </div>
  <div class="card-body">

  <div class="row">

    <div class="col-4">

<img src="<?php echo esc_url( site_url('/wp-content/img/blank-image.png') ); ?>" class="img-thumbnail" id="output_member0">

<br><br>

<label class="btn btn-success btn-block btn-file">Select Image<input type="file" name="member_image[]" onchange="preview_member(event, 0)" style="display: none;"></label>

    </div>

    <div class="col-8">

  <div class="form-group">
    <label for="member_name"><b>Member Name</b> <b style="color:#FF0000;">*</b></label>
    <input type="text" class="form-control" name="member_name[]">
  </div>
  <div class="form-group">
    <label for="member_email"><b>Email Address</b> <b style="color:#FF0000;">*</b></label>
    <input type="text" class="form-control" name="member_email[]">
  </div>
  <div class="form-group">
    <label for="member_role"><b>Role in Project</b> <b style="color:#FF0000;">*</b></label>
    <input type="text" class="form-control" name="member_role[]">
  </div>
  <div class="form-group">
    <label for="member_fb"><b>Facebook Username</b> <b style="color:#FF0000;">*</b></label>
    <input type="text" class="form-control" name="member_fb[]">
  </div>

    </div>

  </div>

    <div id="team-member-fields">

    </div>

<button type="button" class="btn btn-success btn-block" id="add-member-fields">Add Member</button>

  </div>
</div>


<script type="text/javascript">

var i = 0;

function preview_member(event, inp) {
  var reader = new FileReader();
  console.log(inp);
  reader.onload = function() {
    var output = document.getElementById("output_member" + inp);
    output.src = reader.result;
  };

  reader.readAsDataURL(event.target.files[0]);
}

jQuery(document).ready(function($) {
  //fadeout selected item and remove
  $(document).on("click", "#remove-member-fields", function(event) {
    event.preventDefault();
    $(this)
      .parent()
      .fadeOut(300, function() {
        $(this).empty();
        return false;
      });
  });

  //add input
  $("#add-member-fields").click(function() {
    i++;

    var rows = `<div class="member-fields"><div class="row"><div class="col-4"><img src="<?php echo esc_url( site_url('/wp-content/img/blank-image.png') ); ?>" class="img-thumbnail" id="output_member${i}"><br><br><label class="btn btn-success btn-block btn-file">Select Image<input type="file" name="member_image[]" onchange="preview_member(event, ${i})" style="display: none;"></label></div><div class="col-8"><div class="form-group"><label for="member_name"><b>Member Name</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_name[]"></div><div class="form-group"><label for="member_email"><b>Email Address</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_email[]"></div><div class="form-group"><label for="member_role"><b>Role in Project</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_role[]"></div><div class="form-group"><label for="member_fb"><b>Facebook Username</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_fb[]"></div></div></div><button type="button" class="btn btn-danger btn-block" id="remove-member-fields">Remove Member</button></div>`;

    $(rows)
      .fadeIn("slow")
      .appendTo("#team-member-fields");
    return false;
  });
});

</script>
Recep Karadas
  • 669
  • 4
  • 10