Question

I have a hidden input which appends into a table, this is below:

var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target_image' onsubmit='return imageClickHandler(this);' class='imageuploadform' >
<input type='hidden' class='numimage' name='numimage' value='" + GetFormImageCount() + "' /></form>");
$image.append($fileImage);

Below is the function which determines the value of the hidden input:

function GetFormImageCount(){ 
  return $('.imageuploadform').length;
}

How it hould work is that form 1 is appended in table row 1, this means the value of the hidden input should be 1. Problem is that it isn’t doing this, the value is 0.

When form 2 is appended it appends into table row 2, this means the value of the hidden input should be 2 but problem is that value for this input is 1.

So my question is why is the value of the hudden inputs are 1 less than what the values should be?

Answer 1

For me it’s working as it should. You’re selecting all .imageuploadform elements, there are none at the beginning so the length is 0.

You can either +1 to the value when setting the attribute or append the element before setting the value.

var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target_image' onsubmit='return imageClickHandler(this);' class='imageuploadform' >
<input type='hidden' class='numimage' name='numimage'/></form>");
$image.append($fileImage);
setTimeout(function () {
    $fileImage.attr('value', GetFormImageCount());
}, 0);

The setTimeout function is used to wait for the DOM to append the element, be careful 😉 I’d go with the +1 solution as it’s easier.