CODEWITHSUNDEEP
javascriptjquery
user1681039
user1681039

Reputation: 83

hidden input is being overwritten or removed

Basically the following code is causing the problem:

    var imagecounter = 0;

function stopImageUpload(success, imagefilename){

      var result = '';
      imagecounter++;

      if (success == 1){
         result = '<span class="imagemsg'+imagecounter+'">The file was uploaded successfully</span><br/><br/>';      
         $('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage" image_file_name="' + imagefilename + '">Remove</button><br/><hr/></div>'); 
      }
      else if (success == 2){
          result = '<span class="imagemsg'+imagecounter+'"> The file upload was canceled</span><br/><br/>';
      }
      else {
         result = '<span class="imagemsg'+imagecounter+'">There was an error during file upload</span><br/><br/>';
      }

      $(sourceImageForm).find('.imagef1_upload_process').css('visibility','hidden');
      $(sourceImageForm).find('.imagef1_cancel').css('visibility','hidden');
//THIS LINE BELOW
      $(sourceImageForm).find('.imagef1_upload_form').html(result + '<label>Image File: <input name="fileImage" class="fileImage" type="file"/></label><br/><br/><label><input type="submit" name="submitImageBtn" class="sbtnimage" value="Upload" /></label><label><input type="button" name="imageClear" class="imageClear" value="Clear File"/></label>');
//THIS LINE ABOVE
      $(sourceImageForm).find('.imagef1_upload_form').css('visibility','visible');

  var _imagecounter = imagecounter;

      return true;   
}

The above code is taken from the code that runs after a succesful/errorful upload has occured. This code proceeds to overwrite the form responsible for uploading the image. Now this is fine for successes because as the interface uses seperate forms for each image... once you get a success you don't reuse that form again (so no error on the server side for subsequent uploads).

However, when the image upload errors or cancels,I try and reuse that form to upload the image again? If so you have overwritten and removed the numimage input html:

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

Which means that I would get an error as this field doesn't exist anymore.

My question is that how can I fix this? How can I fix the problem so I don't lose the value in the hidden input form and that the field still exists?

Below is the full form which uploads the file (Each form is appended into a table everytime the user clicks on a button so its possible that there are multiple forms, one form per row:

  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_process' align='center'>Loading...<br/><img src='Images/loader.gif' /><br/></p><p class='imagef1_upload_form' align='center'><br/><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><p class='imagef1_cancel' align='center'><label>" +
    "<input type='reset' name='imageCancel' class='imageCancel' value='Cancel' /></label>" +
    "</p><p class='listImage' align='left'></p>" +
    "<iframe class='upload_target_image' name='upload_target_image' src='#' style='width:300px;height:300px;border:0px;solid;#fff;'></iframe></form>");     

    $image.append($fileImage);

Upvotes: 0

Views: 484

Answers (1)

Guffa
Guffa

Reputation: 700680

The two most obvious options would be:

  • When you replace the form, include the hidden field in the new content.

  • Don't replace the form, just put the result in an already existing element.

Put an empty element in the form:

...<p class='imagef1_upload_form' align='center'><br/><span class='msg'></span><label>...

Then put the result in the element:

$(sourceImageForm).find('.imagef1_upload_form .msg').html(result);

Upvotes: 1

Related Questions