Как я могу убедиться, что изменения в DOM формы завершены перед отправкой?

Question

В настоящее время в моем коде JavaScript существует условие гонки. С этим кодом я пытаюсь преобразовать все флажки, которые являются частью класса 'checkbox' и не отмечены в текстовые поля со значением ноль. В настоящее время, когда вы публикуете флажок, который не установлен, он не отображается в данных $_POST. Однако мне нужно знать все значения, будь то истина или ложь для этого конкретного набора флажков.

Код, который я имею здесь: Код:

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);
}

Теперь проблема, с которой я столкнулся, заключается в том, что при попытке отправить эту форму значения недавно измененных текстовых полей не отображаются в данных $_POST. Поэтому, как вы можете видеть выше, я отложил отправку страницы на 1 секунду, а затем у меня есть все доступные мне данные. Однако со временем, когда мой набор данных увеличивается, 1 секунды может уже не хватить. Я считаю, что это условие гонки, и мне нужно найти какой-то способ запуска кода только после того, как все флажки будут преобразованы и у них появятся новые значения. Я бы подумал, что это будет ненужным с самого начала, но по какой-то причине он пытается запустить обе части одновременно, и я не могу отправить, пока не установлю правильные значения.

Любая помощь очень ценится!

Answer 1

Это определенно не способ сделать веб. Я настоятельно советую вам отказаться от функции checkboxConvert и решить эту проблему на стороне сервера

Answer 2

JavaScript всегда выполняется однопоточным в браузере , поэтому я не думаю, что это может быть условием гонки.

Answer 3

Я бы вообще согласился с другими, что вы не должны этого делать, но ваша проблема может заключаться в том, что вы меняете элемент на тип «текстовое поле» вместо «текст». Если вы объявляете ввод типа «текстовое поле» в разметке HTML, он все равно будет отображаться как текстовое поле, потому что это значение по умолчанию. Однако изменение уже допустимого ввода типа «флажок» на недопустимое «текстовое поле» может работать непредсказуемо.

Попробуйте изменить это на:

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();
}

Answer 4

Должен быть лучший способ сделать это. Попробуйте что-то вроде:

1. Знайте обо всех возможных значениях на стороне сервера. Похоже, вы используете PHP; сохраняйте простой массив с именами ваших флажков.
2. Когда вы берете свои данные $ _POST, снимите имена флажков, значения которых вы получили из вашего массива.
3. Все остальные ложные.