Databases
StackOverflow2013
Postsdbo
POText input does not appear when uploading file using file input in any table row except for first row
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POText input does not appear when uploading file using file input in any table row except for first row
    text
    copied!<p>I have an application here: <a href="http://helios.hud.ac.uk/u0867587/Mobile_app/InputTest.php" rel="nofollow">APPLICATION</a></p> <p>Please follow steps below:</p> <ol> <li><p>Click on the <code>Add Question</code> button twice to append a 2 file inputs into the table below:</p></li> <li><p>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.</p></li> <li><p>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.</p></li> </ol> <p>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?</p> <p>Below is the code showing the file input and how it is appended into html table below, as well as showing the <code>.hiddenimg</code> div where it stores the text inputs:</p> <p><strong>Jquery appending file input form:</strong></p> <pre><code>function GetFormImageCount(){ return $('.imageuploadform').length + 1; } function insertQuestion(form) { var $tbody = $('#qandatbl_onthefly &gt; tbody'); var $tr = $("&lt;tr class='optionAndAnswer' align='center'&gt;"); var $image = $("&lt;td width='17%' class='image'&gt;&lt;/td&gt;"); var $fileImage = $("&lt;form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target_image' onsubmit='return imageClickHandler(this);' class='imageuploadform' &gt;" + "&lt;p class='imagef1_upload_form'&gt;&lt;label&gt;" + "Image File: &lt;input name='fileImage' type='file' class='fileImage' /&gt;&lt;/label&gt;&lt;br/&gt;&lt;br/&gt;&lt;label class='imagelbl'&gt;" + "&lt;input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /&gt;&lt;/label&gt;" + "&lt;p class='imagef1_upload_process'&gt;Loading...&lt;br/&gt;&lt;img src='Images/loader.gif' /&gt;&lt;/p&gt;" + "&lt;input type='hidden' class='numimage' name='numimage' value='" + GetFormImageCount() + "' /&gt;" + "&lt;/p&gt;&lt;p class='imagemsg'&gt;&lt;/p&gt;&lt;p class='listImage'&gt;&lt;/p&gt;" + "&lt;iframe class='upload_target_image' name='upload_target_image' src='/' style='width:0px;height:0px;border:0px;solid;#fff;'&gt;&lt;/iframe&gt;&lt;/form&gt;"); $image.append($fileImage); $tr.append($image); $tbody.append($tr); } </code></pre> <p><strong>HTML Form and table where file input form is appended to and where the text inputs are stored in the <code>.hiddenimg</code> div tag:</strong></p> <pre><code>&lt;form id="QandA" action="insertQuestion.php" method="post"&gt; &lt;table id="questionBtn" align="center"&gt; &lt;tr&gt; &lt;th&gt; &lt;input id="addQuestionBtn" name="addQuestion" type="button" value="Add Question" onClick="insertQuestion(this.form)" /&gt; &lt;/th&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;hr/&gt; &lt;table id="qandatbl" align="center" cellpadding="0" cellspacing="0" border="0"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th width="17%" class="image"&gt;Image&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;/table&gt; &lt;div id="qandatbl_onthefly_container"&gt; &lt;table id="qandatbl_onthefly" align="center" cellpadding="0" cellspacing="0" border="0"&gt; &lt;tbody&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;div class="hiddenimg"&gt;&lt;!-- All uploaded image file ids go here --&gt;&lt;/div&gt; &lt;/form&gt; </code></pre> <p>Below is code where it controls the <code>upload</code> buttons, the start of the upload and when the upload has finished. </p> <p><strong>Upload button Handler:</strong></p> <pre><code> function imageClickHandler(imageuploadform){ if(imageValidation(imageuploadform)){ window.lastUploadImageIndex = $('.imageuploadform').index(imageuploadform); return startImageUpload(imageuploadform); } return false; </code></pre> <p><strong>Start Upload:</strong></p> <pre><code>function startImageUpload(imageuploadform){ $(imageuploadform).find('.imagef1_upload_process').show() $(imageuploadform).find('.imagef1_upload_form').hide(); $(imageuploadform).find('.imagemsg').hide(); sourceImageForm = imageuploadform; return true; } </code></pre> <p><strong>Upload finished:</strong></p> <pre><code> function stopImageUpload(success, imageID, imagefilename){ var result = ''; imagecounter++; if (success == 1){ result = '&lt;span class="imagemsg'+imagecounter+'"&gt;The file was uploaded successfully&lt;/span&gt;'; $('.hiddenimg').eq(window.lastUploadImageIndex).append('&lt;input type="text" name="imgid[]" id="'+imageID+'" value="' + imageID + '" /&gt;'); $('.listImage').eq(window.lastUploadImageIndex).append('&lt;div&gt;' + htmlEncode(imagefilename) + '&lt;button type="button" class="deletefileimage" data-imageID="'+imageID+'" data-image_file_name="' + imagefilename + '" value="'+imageID+'"&gt;Remove&lt;/button&gt;&lt;br/&gt;&lt;hr/&gt;&lt;/div&gt;'); } 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; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload