Question

I have an application here: APPLICATION

Please follow steps below:

1. Click on the Add Question button twice to append a 2 file inputs into the table below:

2. By using the file input in TABLE ROW 1 ONLY upload 2 images (one at a time), every time an image is successfully uploaded, it displays the name of the uploaded file underneath and below the table it displays it’s id in a text input.

3. Now the problem is here, in TABLE ROW 2, upload a file. You realise after uploading is finished it does not display a text input underneath my table.

So my quesion is that if the user uploads a file in any file input except for the file input in the first table row, why will it not display the text input associated with those uploaded files?

Below is the code showing the file input and how it is appended into html table below, as well as showing the .hiddenimg div where it stores the text inputs:

Jquery appending file input form:

function GetFormImageCount(){ 
  return $('.imageuploadform').length + 1;
}

function insertQuestion(form) {



    var $tbody = $('#qandatbl_onthefly > tbody');
    var $tr = $("<tr class='optionAndAnswer' align='center'>");
    var $image = $("<td width='17%' class='image'></td>");

    var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target_image' onsubmit='return imageClickHandler(this);' class='imageuploadform' >" +
        "<p class='imagef1_upload_form'><label>" +
        "Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/><br/><label class='imagelbl'>" +
        "<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label>" +
        "<p class='imagef1_upload_process'>Loading...<br/><img src='Images/loader.gif' /></p>" +
        "<input type='hidden' class='numimage' name='numimage' value='" + GetFormImageCount() + "' />" +
        "</p><p class='imagemsg'></p><p class='listImage'></p>" +
        "<iframe class='upload_target_image' name='upload_target_image' src='/' style='width:0px;height:0px;border:0px;solid;#fff;'></iframe></form>");

    $image.append($fileImage);



    $tr.append($image);
    $tbody.append($tr);


}

HTML Form and table where file input form is appended to and where the text inputs are stored in the .hiddenimg div tag:

<form id="QandA" action="insertQuestion.php" method="post">


<table id="questionBtn" align="center">
<tr>
<th>
<input id="addQuestionBtn" name="addQuestion" type="button" value="Add Question" onClick="insertQuestion(this.form)" />
</th>
</tr>
</table>

</div>
<hr/>

<table id="qandatbl" align="center" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
    <th width="17%" class="image">Image</th>
</tr>
</thead>
</table>
<div id="qandatbl_onthefly_container">
<table id="qandatbl_onthefly" align="center" cellpadding="0" cellspacing="0" border="0">
<tbody>
</tbody>
</table>
</div>

<div class="hiddenimg"><!-- All uploaded image file ids go here --></div>

</form>

Below is code where it controls the upload buttons, the start of the upload and when the upload has finished.

Upload button Handler:

  function imageClickHandler(imageuploadform){ 
  if(imageValidation(imageuploadform)){ 
      window.lastUploadImageIndex = $('.imageuploadform').index(imageuploadform); 
      return startImageUpload(imageuploadform); 
  } 
  return false;

Start Upload:

function startImageUpload(imageuploadform){

  $(imageuploadform).find('.imagef1_upload_process').show()
  $(imageuploadform).find('.imagef1_upload_form').hide();
  $(imageuploadform).find('.imagemsg').hide();
  sourceImageForm = imageuploadform;

      return true;
}

Upload finished:

 function stopImageUpload(success, imageID, imagefilename){

      var result = '';
      imagecounter++;

      if (success == 1){
         result = '<span class="imagemsg'+imagecounter+'">The file was uploaded successfully</span>';   
            $('.hiddenimg').eq(window.lastUploadImageIndex).append('<input type="text" name="imgid[]" id="'+imageID+'" value="' + imageID + '" />');
            $('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage" data-imageID="'+imageID+'"  data-image_file_name="' + imagefilename + '" value="'+imageID+'">Remove</button><br/><hr/></div>');
         }


  var _imagecounter = imagecounter;

$('.listImage').eq(window.lastUploadImageIndex).find(".deletefileimage").on("click", function(event) {
    jQuery.ajax("deleteimage.php?imagefilename=" + $(this).attr('data-image_file_name')).done(function(data) {
        $(".imagemsg" + _imagecounter).html(data);
    });

    var buttonid = $(this).attr('value');
    $(this).parent().remove();
     $("#"+ buttonid  +"").remove();
});

      return true;   
}

Answer 1

the problem is in the stopImageUpload() function.
when you load the data and appending it to the placeholders you use the index of the current form the select the correct element to append to (like listImage)

if (success == 1){
     result = '<span class="imagemsg'+imagecounter+'">The file was uploaded successfully</span>';   
     $('.hiddenimg').eq(window.lastUploadImageIndex).append('<input type="text" name="imgid[]" id="'+imageID+'" value="' + imageID + '" />');
     $('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage" data-imageID="'+imageID+'"  data-image_file_name="' + imagefilename + '" value="'+imageID+'">Remove</button><br/><hr/></div>');
}

but the hiddenimg element is only one so your selector doesn’t find any dom element where to append the new .
you code should be like this:

if (success == 1){
     result = '<span class="imagemsg'+imagecounter+'">The file was uploaded successfully</span>';   
     $('.hiddenimg').append('<input type="text" name="imgid[]" id="'+imageID+'" value="' + imageID + '" />');
     $('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage" data-imageID="'+imageID+'"  data-image_file_name="' + imagefilename + '" value="'+imageID+'">Remove</button><br/><hr/></div>');
}

btw, form inside form is bad practice Can you nest html forms?