fadlyfayruz
New Member
I have an application here: APPLICATIONPlease 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='http://stackoverflow.com/questions/14510624/Upload' /></label>" + "<p class='imagef1_upload_process'>Loading...<br/><img src='http://stackoverflow.com/questions/14510624/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='http://stackoverflow.com/' 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="http://stackoverflow.com/questions/14510624/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 when upload has finished: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; }