Text input does not appear when uploading file using file input in any table row except for first row

Question

I have an application here: APPLICATION

Please follow steps below:

Click on the Add Question button twice to append a 2 file inputs into the table below:
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.
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;   
}

do you know the hidden input is appending correctly? Perhaps there is a problem with the index you are providing to eq() method. You could try var_dump($_POST) in your insertQuestion.php script to see what's in the POST array. Or append a 'type = "text"' input instead of a hidden one to check it is going in ok. — charliefortune, Jan 22 '13 at 17:58
What is `window.lastUploadVideoIndex`? Are there more than one form? — gen_Eric, Jan 22 '13 at 17:58
@RocketHazmat Yes there is 2 forms, I tried to shorten code but what happens is that form gets appended into a table which is in the form above which you are seeing. I did not include this because I really tried to give an easy shortened code. If I include it then it will be too much code and people will be put off — user1830984, Jan 22 '13 at 18:03
@charliefortune Yes I know the hidden input has a value because I tested it by making it a text input before a hidden input — user1830984, Jan 22 '13 at 18:03
if you have appended more than one input element with the name 'vidid', then the values will be returned in an array of the same name. Does a var_dump of $_POST array give you any clues? — charliefortune, Jan 22 '13 at 18:35
@user1830984: In your PHP, you're using `$_POST['vidid']` as an array. If you want to do that, you need to add `[]` to the name when adding to the form. `.append(''); ` — gen_Eric, Jan 22 '13 at 18:35
btw, your question has nothing to do with mysqli as it is right now. — charliefortune, Jan 22 '13 at 18:36
@RocketHazmat Hi, sorry been running an errand, I actually tried the square brackets previously but that did not work. Will you have a check if I post more code which may give you more detail? — user1830984, Jan 22 '13 at 22:01
@RocketHazmat I included an update section where I included 4 steps so you can see the main code, hopefully this is enough information and easy to follow — user1830984, Jan 22 '13 at 23:21
Your `$fileVideo` variable contains a `
` tag, if I understand right, that will appended inside of `qandatbl_onthefly`. This will result in *nested* `
` tags. The behavior of nested `
` tags in undefined, and different in each browser. — gen_Eric, Jan 23 '13 at 14:36
@RocketHazmat Thanks for info, it means I have to put the hidden inputs outside the videoform and just include it in the QandA form to get round this problem — user1830984, Jan 24 '13 at 01:41
@user1830984: It means that the videoform itself should be outside of the QandA form. Put the inputs in the form that submits to the URL you want. — gen_Eric, Jan 24 '13 at 14:19

score 1 · Accepted Answer · edited May 23 '17 at 12:27

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?

I will get back to you, just busy on something else. I know nested forms are bad practice and will mention in my improvements. Thanks — user1830984, Jan 25 '13 at 03:58

Text input does not appear when uploading file using file input in any table row except for first row

1 Answers1