javascript - if语句只执行第一个条件并运行其他条件但没有结果

Question

我正在使用以下 php 代码对我的数据库运行一些查询器。

if ($Name !="" && $newName !=""){ 
    $sql = "UPDATE PRODUCTS SET P_NAME = '$newName' WHERE P_Name = '$Name'";
    $conn->exec($sql);
    echo 'name was run';
}
if($Name !="" && $Description !=""){
    $sql = "UPDATE PRODUCTS SET P_Description = '$Description' WHERE P_NAME = '$Name'";
    $conn->exec($sql); 
    echo 'des worked';
}
if($Name !="" && $Price !=""){
    $sql = "UPDATE PRODUCTS SET P_Price = '$Price' WHERE P_NAME = '$Name'";
    $conn->exec($sql);
    echo 'price worked';
}
if ($Name !="" && $newQuant!=""){
    $sql = "UPDATE PRODUCTS SET P_Quantity = '$newQuant' WHERE P_NAME = '$Name'";
    $conn->exec($sql);
    echo 'quant worked';
}

当我使用 action= 在表单中使用它时，所有更新都会从表单中获取值并在代码中使用它们。不过，我现在尝试使用以下 JavaScript 代码来插入数据，但它只接受第一个条件并起作用。 else if 条件运行时没有错误，但不传递数据。谁能明白这是为什么吗？

function editData(){
    xmlhttp = new XMLHttpRequest();
    var name = document.getElementById("orginalName");
    var newName = document.getElementById("newName");
    var Description = document.getElementById("newDescription");
    var Price = document.getElementById("newPrice");
    var Quant = document.getElementById('newQuantity');
    if (name.value !="" && newName.value !="" ){
        xmlhttp.open("POST","editForm.PHP",true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send("Name=" + name.value + "&newName=" + newName.value);
    }
    else if (name.value !="" && Description.value !=""){
        xmlhttp.open("POST","editForm.PHP",true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send("Name=" + name.value + "&Description=" + Description.value);
    }
    else if (name.value !="" && Price.value !=""){
        xmlhttp.open("POST","editForm.PHP",true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send("Name=" + name.value + "&Price=" + Price.value);
    }
    else if (name.value !="" && Quant.value !=""){
        xmlhttp.open("POST","editForm.PHP",true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send("Name=" + name.value + "&newQuant=" + Quant.value);
    }
    else{
        alert("please enter some data");
    }
}

submitButton = document.getElementById("editButton");
submitButton.addEventListener("click", editData);

下面是 JS 使用的形式:

<form id="dataForm" method="post">
  <h2 id="formheader"> Edit Product</h2>
    <div>
      <label>Product Name:</label>
      <input class="inputForm" id="orginalName" type="text" name="Name">
    </div>
    <div>
      <label>New Name:</label>
      <input class="inputForm" id="newName" type="text" name="newName">
    </div>
    <div>
      <label>New Description:</label>
      <input class="inputForm" id="newDescription" type="text" name="description">
    </div>
    <div>
      <label>New Price:</label>
      <input class="inputForm" id="newPrice" type="text" name="Price">
    </div>
    <div>
    <label>New Quantity:</label>
    <input class="inputForm" id="newQuantity" type="text" name="quantity">
  </div> 
    <div id="theSubmit">
      <button id="editButton">Submit</button>
    </div>
  </form>
</section>

Answer 1

您的 JS 代码使用级联 if，而您的 php 代码由一个接一个处理的单独条件组成。

删除所有else关键字。最后一个 else 分支将需要不同的守卫。

所以你的 JS 代码应该如下所示:

    //..
    var Quant = document.getElementById('newQuantity');
    var data_seen = false;
        // this is a flag to record whether any data has been seen. Used in the guard ofthe alert statement.
    if (name.value !="" && newName.value !="" ){
        data_seen = true;
        xmlhttp.open("POST","editForm.PHP",true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send("Name=" + name.value + "&newName=" + newName.value);
    }
    if (name.value !="" && Description.value !=""){
        data_seen = true;
        xmlhttp.open("POST","editForm.PHP",true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send("Name=" + name.value + "&Description=" + Description.value);
    }
    if (name.value !="" && Price.value !=""){
        data_seen = true;
        xmlhttp.open("POST","editForm.PHP",true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send("Name=" + name.value + "&Price=" + Price.value);
    }
    if (name.value !="" && Quant.value !=""){
        data_seen = true;
        xmlhttp.open("POST","editForm.PHP",true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send("Name=" + name.value + "&newQuant=" + Quant.value);
    }
    if (!data_seen) {
        alert("please enter some data");
    }
    //...