为什么这个条件不评估错误处理的任何一种情况？

Question

我的代码中某个地方似乎有一个小错误，我无法弄清楚到底是什么。

我有一个借助于PHP呈现为HTML的表。在此表中，如果预订要求他们输入体重，旅客可以选择增加其重量（对于直升机旅游供应商）。输入后，乘客提交，仅此而已！如果预订中包含“酒店项目”，则还有第二种选择，在该选项中，将为客户提供进入他们所住酒店的选项（以安排旅行的交通）。

适当地，我添加了一些简单的错误预防/检查功能，以确保使用门户的客户端无法将请求提交给服务器，除非输入中填入了值。

对重量字段的错误检查将按预期的方式工作（这是必需的），但是，当我遇到带有酒店项目的预订时，不仅会显示错误[[not，而且还会显示信息是输入到文本框中，它不遵循将请求提交为帖子的逻辑路径。

这是错误检查，当它

工作

并输入文本将提交到服务器后。

这是与酒店相同的表格，另外两个字段。需要注意的是，显示的是表单的状态

之后

我单击了“更新乘客详细信息”按钮。没有显示任何内容，当输入文字是时，按此按钮也没有任何反应。

现在输入一些代码：

HTML / PHP

<div class='col-sm-18 card my-3' id='passenger-table-$booking_id'>
    <div class='card-body px-0 px-sm-3'>
        <div class='col-sm-18 card-header mb-4'>
            <div class='row'>

                <div class='col-xs-18 col-sm-9 text-sm-left pb-3 pb-sm-0'>
                    <strong>
                        <span class='icon-user'></span> 
                                        Passengers
                    </strong>
                </div>

                $passenger_buttons_html
                <span class='col-xs-18 col-sm-9 text-sm-left pb-3 pb-sm-0'>
                    <small hidden class='text-danger' id='submit-error'>Please enter missing information before submitting</small>
                </span>
            </div>
        </div>

        <div id='passenger-table-overflow-div'>
            <table class='table table-bordered'>
                <thead>
                    <tr>
                        <th>Title&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Date of Birth</th>
                        " . ($supplierGenCheck ? "<th>Weight (lbs)</th>" : "" )
                         . ($hasHTLCheck ? "<th>Hotel Name</th>" : "") . "
                    </tr>
                </thead>
                <tbody>
                    " . $html . "
                </tbody>
            </table>
        </div>
        $update_btn
    </div>
</div>

jQuery / JS

let e_chk = 0;

// ERROR HANDLING
if (hasGen && hasHotel) {
  $(`#passenger-table-${booking_id} table tr > td > input`).each(function() {
    if (!$(this).val().trim()) {
      e_chk++;
    }
  });
} else if (hasGen && !(hasHotel)) {
  $(`.weight`).each(function() {
    if (!$(this).val().trim())
      e_chk++;
  })
} else if (hasHotel && !(hasGen)) {
  $(`.hotel`).each(function() {
    if (!$(this).val().trim())
      e_chk++;
  })
}

// Used simply for error checking as with most alerts etc...here (not final solutions for 
// confirmation/erroring 

alert("After checking, there are: (" + e_chk + ") errors");

// e_chk shows 2 errors if weight only and four if the hotel and weight inputs are present
// as expected? yes... but why won't the following if statement evaluate false and execute the
// else condition ?

// This whole area is skipped when there are two input columns (i.e. four text boxes)
if (e_chk < 1) {
  alert("got here...passed");
  // SAFETY AND ERROR HANDLING
  if (booking_id.length >= 5 && passenger_table.length > 10) {
    // POST DATA
    $.post("/customer-portal/assets/ajax/confirm-passenger-details.php", {
      booking_id,
      passenger_table
    }, function(data) {
      if (data.trim() !== "N") {
        alert(hasGen + "  " + hasHotel);
        alert("Thank you for submitting your correct details.  Our Operations Department will review these details and amend if necessary.");
        top.location.href = `/customer-portal/?id=${portalSessionID}`;
      } else {
        alert("Failed to save passenger information");
      }
    });
  } else {
    alert("Booking ID not found");
  }
} else {
  // this will evaluate for the first example (weight only) but will not execute
  // when the hotels fields are present?
  $(`#submit-error`).fadeIn();
  $(`.weight, .hotel`).removeAttr("disabled");
}
}

关于显示错误数量的警报：这是重量输入
仅

的结果（两个空输入有两个）：这是仅显示重量输入时的预期错误数

这是“体重”和“酒店”输入留为空白的结果（对于四个空白输入，报告了4个错误）：

开发人员工具中没有错误可提供

在bash控制台上编译和执行JS时，编译器没有错误

EDIT＃1

：根据建议，我在“ else”语句中放置了另一个警报，单击更新按钮后，它现在会产生两个警报。

else {
    alert("After checking else, there are: (" + e_chk + ") errors");
    $(`#submit-error`).fadeIn();
    $(`.weight, .hotel`).removeAttr("disabled");
}

输出

First alert...Second alert...

EDIT＃2

**“ $ html”中包含的HTML **

$html .= "
                <tr>
                    <td>
                        <select data-pax-key='$a' class='form-control chosen' $disabled>
                            <option value='Mr' ".($passenger['TITLE'] == "Mr" ? "selected" : "").">Mr</option>
                            <option value='Mrs' ".($passenger['TITLE'] == "Mrs" ? "selected" : "").">Mrs</option>
                            <option value='Ms' ".($passenger['TITLE'] == "Ms" ? "selected" : "").">Ms</option>
                        </select>
                    </td>
                    <td><input data-pax-key='$a' $disabled type='text' class='form-control' value='".$passenger['FIRST_NAME']."' /></td>
                    <td><input data-pax-key='$a' $disabled type='text' class='form-control' value='".$passenger['LAST_NAME']."' /></td>
                    <td><input data-pax-key='$a' $disabled type='text' class='form-control datepicker' value='".$passenger['DATE_OF_BIRTH']."' /></td>
                    ". ($supplierGenCheck == 1 ? "<td><input data-pax-key='$a' class='weight form-control' type='text'/></td>" : "")."
                    ". ($hasHTLCheck == 1 ? "<td><input data-pax-key='$a' class='hotel form-control' type='text'/></td>" : "")."



                </tr>

            ";

所有savePassengerDetails（）函数

// SAVE PASSENGER DETAILS OVER AJAX

function savePassengerDetails(booking_id, hasGen, hasHotel) {
  portalSessionID = getPortalSessionID();

  if (portalSessionID) {

    /*let weightType = $(`#wgt-convert option:selected`).val();

    // run this only if pounds not selected
    if(weightType !== "pounds") {
        // CONVERT VALUES TO POUNDS
        $(`.weightValue`).each(function(id, ele){
            let weightValue = ele.value;
            ele.replaceWith(weightToPounds(weightType, weightValue));
        });
    }*/

    // REMOVE SAVE BUTTON ROW
    $("#submit-button-row").remove().promise().done(function() {

      // REPLACE INPUT ELEMENTS WITH INPUT VALUES ONLY
      $("#passenger-table :input").each(function(id, ele) {
        ele.replaceWith(ele.value);
      });

      // DISABLE ALL INPUTS
      $(`#passenger-table-${booking_id} table input, #passenger-table-${booking_id} table select`).each(function(i, ele) {
        $(this).attr("disabled", "disabled");
      });

      // VARIABLES
      booking_id = $(`#booking_id_${booking_id}`).val();

      let paxKey = 0;
      let passenger_table = '';
      let tmp_passenger_table = '';

      // LOOP PASSENGER TABLE RECORDING THE PAXKEY AND VALUE OF EACH ELEMENT
      $(`#passenger-table-${booking_id} table tr > td > input, #passenger-table-${booking_id} table tr > td > select`).each(function(i, ele) {
        // IF THE PAX KEY MATCHES THE CURRENT PAXKEY, STORE THE VALUE
        if (ele.dataset.paxKey === paxKey) {
          tmp_passenger_table += `
                        <td>${ele.value}</td>
                    `;
        }
        // ELSE IF THE PAX KEYS ARE DIFFERENT,
        else {
          // SET THE NEW PAXKEY
          paxKey = ele.dataset.paxKey;

          // WRAP THE VALUE IN A <TR>
          passenger_table += `
                        <tr>${tmp_passenger_table}</tr>
                    `;

          // SAVE THE ELEMENT VALUE AND CONTINUE LOOPING
          tmp_passenger_table = `
                        <td>${ele.value}</td>
                    `;
        }
      });

      // WRAP THE FINAL RESULT IN A TR
      passenger_table += `
                <tr>${tmp_passenger_table}</tr>
            `;

      // BUILD THE FINAL HTML TABLE
      passenger_table = `
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>Title</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Date of Birth</th>
                            <th>Weight</th>
                            <th>Hotel Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${passenger_table}
                    </tbody>
                </table>
            `;

      let e_chk = 0;

      // ERROR HANDLING
      if (hasGen && hasHotel) {
        $(`#passenger-table-${booking_id} table tr > td > input`).each(function() {
          if (!$(this).val().trim())
            e_chk++;
        });
      } else if (hasGen && !(hasHotel)) {
        $(`.weight`).each(function() {
          if (!$(this).val().trim())
            e_chk++;
        })
      } else if (hasHotel && !(hasGen)) {
        $(`.hotel`).each(function() {
          if (!$(this).val().trim())
            e_chk++;
        })
      }

      alert("After checking, there are: (" + e_chk + ") errors");

      if (e_chk < 1) {
        alert("got here...passed");
        // SAFETY AND ERROR HANDLING
        if (booking_id.length >= 5 && passenger_table.length > 10) {
          // POST DATA
          $.post("/customer-portal/assets/ajax/confirm-passenger-details.php", {
            booking_id,
            passenger_table
          }, function(data) {
            if (data.trim() !== "N") {
              alert(hasGen + "  " + hasHotel);
              alert("Thank you for submitting your correct details.  Our Operations Department will review these details and amend if necessary.");
              top.location.href = `/customer-portal/?id=${portalSessionID}`;
            } else {
              alert("Failed to save passenger information");
            }
          });
        } else {
          alert("Booking ID not found");
        }
      } else {
        alert("After checking else, there are: (" + e_chk + ") errors");
        $(`.submit-error`).fadeIn();
        $(`.weight, .hotel`).removeAttr("disabled");
      }
    });
  }
}

Answer 1

更新/回答

在HTML中，我删除了id标记“ submit-error”，并添加了一个类“ submit-error”。然后，我在jQuery中更改了选择器，现在看来工作正常！

<span class='col-xs-18 col-sm-9 text-sm-left pb-3 pb-sm-0'>
    <small hidden class='text-danger submit-error'>Please enter missing information before submitting</small>
</span>

jQuery

(`.submit-error`).fadeIn();
$(`.weight, .hotel`).removeAttr("disabled");