I have a application which you can access here. If you open the application please click on the "Add" button a couple of times. This will add a new row into a table below. In each table row there is an AJAX
file uploader.
Now the problem is that if I click on the "
Upload" button in any row except the first row, then the uploading only happens in the first row so it is only uploading the first
file input only.
Why is it doing this and how can I get it so that when then the user clicks the "
Upload" button, the
file input within that row of the "
Upload" button is uploaded and not the first row being uploaded?
Below is the full code where it appends the
file AJAX
file uploaded in each table row:
function insertQuestion(form) {
var $tbody = $('#qandatbl > tbody');
var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
var $image = $("<td class='image'></td>");
var $fileImage = $("<form action='
upload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='startUpload();' >" +
"<p id='f1_upload_process' align='center'>Loading...<br/><img src='Images/loader.gif' /><br/></p><p id='f1_upload_form' align='center'><br/><label>" +
"File: <input name='fileImage' type='
file' class='fileImage' /></label><br/><label><input type='submit' name='submitBtn' class='sbtn' value='
Upload' /></label>" +
"</p> <iframe id='upload_target' name='upload_target' src='#' style='width:0;height:0;border:0px solid #fff;'></iframe></form>");
$image.append($fileImage);
$tr.append($image);
$tbody.append($tr);
}
function startUpload(){
document.getElementById('f1_upload_process').style.visibility = 'visible';
document.getElementById('f1_upload_form').style.visibility = 'hidden';
return true;
}
function stopUpload(success){
var result = '';
if (success == 1){
result = '<span class="msg">The
file was uploaded successfully!<\/span><br/><br/>';
}
else {
result = '<span class="emsg">There was an error during
file upload!<\/span><br/><br/>';
}
document.getElementById('f1_upload_process').style.visibility = 'hidden';
document.getElementById('f1_upload_form').innerHTML = result + '<label>File: <input name="fileImage" type="
file"/><\/label><label><input type="submit" name="submitBtn" class="sbtn" value="
Upload" /><\/label>';
document.getElementById('f1_upload_form').style.visibility = 'visible';
return true;
}
