Question

I am having trouble getting the correct value in my hidden input.

Below I have a form which gets appended into a table everytime he user clicks a button:

  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' align='center'><br/><span class='msg'></span><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>" + 
    "<input type='hidden' class='numimage' name='numimage' value='" + numimage + "' /></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); 

Now this is the problem I am recieving and it deals with the hidden input in the form:

<input type='hidden' class='numimage' name='numimage' value='" + numimage + "' />

Lets say I append two forms into a table, one form in row 1 (value in hidden input should be 1) and one form in row 2 (value in hidden input should be 2).

Now if I upload a file using form 1, then the value in hidden input equals 1 which is correct. If I then upload a file using form 2, then the value in the input equals 2. This is fine.

The problem is that if I revert back to form 1 and upload another file, because of the way I have coded it, the value of the hidden input is still 2 when it should really be 1.

So what my question is that how can the code below be changed so that the value of the hidden input is the number depending on which form is used to upload the file, (value = 1 for form 1 used, value = 2 for form 2 used, value =3 for form 3 used etc)

Below is the code:

var numimage = 0;

...//form code from top goes here

//CODE BELOW INCREMENTS A QUESTION NUMBER AND INCREMENTS THE HIDDEN VALUE FOR EACH ROW ADDED
          $('.num_questions').each( function() {

    var $this = $(this);

     var $questionNumber = $("<input type='hidden' class='num_questionsRow'>").attr('name',$this.attr('name')+"[]")
                   .attr('value',$this.val());

     $qid.append($questionNumber);                             


    ++numimage;        
    $(".numimage").val(numimage);



});

//BELOW STARTS THE UPLOADING OF THE FILE

function startImageUpload(imageuploadform){

  $(imageuploadform).find('.imagef1_upload_process').css('visibility','visible');
  $(imageuploadform).find('.imagef1_cancel').css('visibility','visible');
  $(imageuploadform).find('.imagef1_upload_form').css('visibility','hidden');
  sourceImageForm = imageuploadform;

}); 

//BELOW IS CODE FOR WHEN FILE UPLOAD STOPS  
function stopImageUpload(){

      $(sourceImageForm).find('.imagef1_upload_form .msg').html(result);
      $(sourceImageForm).find(".fileImage").replaceWith("<input type='file' class='fileImage' name='fileImage' />");
      $(sourceImageForm).find('.imagef1_upload_form').css('visibility','visible');  

return true;
}

Answer 1

Add this method in any place

function GetFormCount(){
  var frm = $('FORM');

    if(frm[0] != undefined)
    {
       if(length in frm )
       {
          return  frm.length ;
       }
        return 1;
    }
    return 0;
}

JS Change creation of your form

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' align='center'><br/><span class='msg'></span><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>" + 
    "<input type='hidden' class='numimage' name='numimage' value='" + GetFormCount()+ "' /></p>" +
    "<iframe class='upload_target_image' name='upload_target_image' src='#' style='width:0px;height:0px;border:0px;solid;#fff;'></iframe></form>");

p.s. As i understood you have this field in each form.