How can I ensure that changes to a form DOM are complete before POSTing?

Question

Currently I have a race condition existing in my JavaScript code. What I am trying to do with this code is convert all check boxes which are a part of the 'checkbox' class and are not checked into text boxes with a value of zero. Currently when you post a check box that is not checked it does not appear in the $_POST data. However I need to know all the values whether true or false for these particular set of check boxes.

The code I have is here: Code:

function checkboxConvert() {

  var chkBxs = $$('.checkbox');
  for (var i = 0; i < chkBxs.length; i++) {
    if (chkBxs[i].checked == false) {
      chkBxs[i].type = 'textbox';
      chkBxs[i].value = '0';
    }
  }

  setTimeout("document.productForm.submit();",1000);
}

Now the problem that I have been getting is that when I try to submit this form the values of the recently changed text boxes does not appear in the $_POST data. Therefore, as you can see above I have postponed the page submit for 1 sec and then I have all the data available to me. However as time goes on and my data set gets larger, 1 sec may no longer be enough. This I think is a race condition and I need to figure some way of running the code only after all the check boxes have been converted and they have their new values. I would have thought that this would be unnecessary from the start, but for some reason it's trying to run both pieces simultaneously and I can't submit until I have the proper values in place.

Any help is much appreciated!

Answer 1

JavaScript always runs single-threaded in the browser so I don't think it can be a race condition.

Answer 2

This is definitely not the way to do web. I strongly advise you abandon your checkboxConvert function, and solve this issue on the server side

Answer 3

There's got to be a better way to do this. Try something like:

1. Know about all your possible values on the server side. It looks like you're using PHP; keep a simple array with the names of your checkboxes.
2. When you take your $_POST data, remove the names of checkboxes you've received values for from your array.
3. The remaining are all false.

Answer 4

I'd generally agree with others that you shouldn't do this, but your problem may be that you're changing the element to a type of "textbox" instead of "text". If you declare an input of type "textbox" in HTML markup, it will usually render as a text field anyway because that's the default. However, changing an already valid "checkbox" type input to the invalid "textbox" may not work predictably.

Try changing it to this:

function checkboxConvert() {

  var chkBxs = $$('.checkbox');
  for (var i = 0; i < chkBxs.length; i++) {
    if (chkBxs[i].checked == false) {
      chkBxs[i].type = 'text';
      chkBxs[i].value = '0';
    }
  }

  // Because JS in the browser is single-threaded, this
  //  cannot execute before the preceding loop completes anyway.
  document.productForm.submit();
}