Question

当用户选择诸如Windows或linux之类的选项之一时，会出现一个表单文本字段，cpu和内存的文本字段将下拉，然后用户选择任意一个选项并尝试将其添加到购物车，但它给出了错误消息即使插入了值，它也没有进入购物车，但是当用户单击表格中的solaries时，当用户插入值并单击添加到购物车时，cpu和内存将显示文本字段，它工作正常，即使对于也下降。请帮助我解决这个问题

我的整个代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">

<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
</head>

<body>


    <br>
</header>
<div align="center">
    <form action = "GetEstimation" method = "post">
    <p id="message"></p>
    <table id="formTable">
    <tbody>

        <tr>
            <td> <label>Environment </label> </td>
            <td> <label>form </label> </td>
            <td> <label>Type </label> </td>

            <td><label id="myLabel" >Model</label> </td>
        </tr>
        <tr>
            <td>  <select  name ="Environment"id="Environment" required>
                  <option value ="" selected Disabled>Select Environment</option>
                  <option>abc</option>
                <option>bcd</option>
                <option>efg</option>
                  </select> </td>

            <td>  <select name="form" id="form"  
            onchange ="check(this)" required>
                  <option value ="" selected Disabled>Select Platform</option>
                <option>windows</option>
                <option>linux</option>
                <option>solaries</option>

                  </select> </td>     
            <td>  <select name="Type" id="Type"required>
                  <option value ="" selected Disabled>Select Server Type</option>
                  <option>ABC</option>
                  <option>DEF</option>
                  <option>QAZ</option>
                  <option>ASF</option>
                  <option>NS</option>
                  </select> </td>         




      <td> <select name = "Model" id="Model"required>
        <option value="" selected Disabled>Select Hardware</option>
        <option>abc</option>
        <option>bcd</option>
        <option>efg</option>
        </select> </td>        

        </tr>
        <tr>    
            <td> <label>Cpu</label> </td>
            <td> <label>Memory</label> </td>
            <td> <label>Storage</label> </td>
            <td> <label>Servers</label> </td>       
        </tr>
        <tr>
            <td> <input type ="text" name ="Cpu" id="Cpu"required> 
            <select id = "mass" style="display:none;"></select></td>
            <td> <input type ="text" name ="Memory" id="Memory"required> 
            <select id = "platforms" style="display:none;"></select></td>
            <td> <input type ="text" name ="Storage" id="Storage"required> </td>
            <td> <input type ="text" name ="Servers" id="Servers"required> </td>
            <td> <input type ="button" class="cartBtn" onclick="addTo()" value="Add to Cart"/>

        </tr>
        </tbody>
    </table>


  <table  id="cartTable">

        <tr>
            <th><label>Environment</label></th>
            <th><label>form</label></th>
            <th><label>Type</label></th>
            <th><label>Model</label></th>
              <th><label>Cpu</label></th>
              <th><label>Memory</label></th>
              <th><label>Storage</label></th>
              <th><label>Servers</label></th>
        </tr>

    <tr id = "show" style="display:none;">
    <td> <input type ="text"  readonly ></td>
    <td> <input type ="text"  readonly></td>
    <td> <input type ="text"  readonly></td>
    <td> <input type ="text"  readonly></td>
    <td> <input type ="text"  readonly></td>
    <td> <input type ="text"  readonly></td>
    <td> <input type ="text"  readonly></td>
    <td> <input type ="text"  readonly></td>

    <td><input type="button" class="cartBtn" value="Remove" onclick="remove(this)" /></td>
    </tr>

  </table>

</form>
</div>
</body>
</html>

JavaScript

function addTo() 
  { // to add rows and copy value to cart
  if((document.getElementById("Environment").value === "") || (document.getElementById("form").value === "") || (document.getElementById("Type").value === "") || (document.getElementById("Cpu").value === "")||
    (document.getElementById("Memory").value === "")||
    (document.getElementById("Storage").value === "")||
    (document.getElementById("Servers").value === "")) {
    //display error message
    document.getElementById("message").innerHTML = "All fields required";


  } else {
    //unhiding  1st row to cloned it
    document.getElementById('show').style.display = "";
    document.getElementById("message").innerHTML = "";
    var table = document.getElementById('cartTable');

    var new_row = table.rows[1].cloneNode(true); // clones the first row 
    var len = table.rows.length; // number of rows in table
    var inp1 = new_row.cells[0].getElementsByTagName('input')[0];
    inp1.value = document.getElementById("Environment").value;
    var inp2 = new_row.cells[1].getElementsByTagName('input')[0];
    inp2.value = document.getElementById("form").value;
    var inp3 = new_row.cells[2].getElementsByTagName('input')[0];
    inp3.value = document.getElementById("Type").value;
    var inp4 = new_row.cells[3].getElementsByTagName('input')[0];
    inp4.value = document.getElementById("Model").value;
     var inp5 = new_row.cells[4].getElementsByTagName('input')[0];
    inp5.value = document.getElementById("Cpu").value;
     var inp6 = new_row.cells[5].getElementsByTagName('input')[0];
    inp6.value = document.getElementById("Memory").value;
     var inp7 = new_row.cells[6].getElementsByTagName('input')[0];
    inp7.value = document.getElementById("Storage").value;

     var inp8 = new_row.cells[7].getElementsByTagName('input')[0];
    inp8.value = document.getElementById("Servers").value;
    table.appendChild(new_row);
    //hide again after cloning 
    document.getElementById('show').style.display = 'none';
  }
}


function check(s)
{
    document.getElementById('Memory').value ='';
    document.getElementById('Cpu').value ='';
    document.getElementById('platforms').innerHTML='<option>Select Core</option><option>1</option><option>2</option>';
    document.getElementById('mass').innerHTML='<option>Select memory</option><option>2</option><option>4</option>';


   var c= s.options[s.selectedIndex].value;
   //Here You Can Start Loading your states with each country
   if(c !="windows" && c !="linux")
   {
    document.getElementById('Memory').style.display='block';
    document.getElementById('Cpu').style.display='block';
    document.getElementById('platforms').style.display='none';
    document.getElementById('mass').style.display='none';
   }
  else
   {
    document.getElementById('Memory').style.display='none';
    document.getElementById('Cpu').style.display='none';
    document.getElementById('platforms').style.display='block';
    document.getElementById('mass').style.display='block';
   }
}

Answer 1

您只需要检查选择框是否显示即可，具体取决于下一步操作。如果显示选择框，则无需使用id="Cpu"和{{ 1}}，因为它们不显示其他所有内容。

演示代码：

id="Memory"

function addTo() { // to add rows and copy value to cart
  //checking if the slect box are display if yes
  if ((document.getElementById('platforms').style.display == "block") || (document.getElementById('mass').style.display == "block")) {
    //checking other fields if null ( leaving Cpu & memory)
    if ((document.getElementById("Environment").value === "") || (document.getElementById("form").value === "") || (document.getElementById("Type").value === "") ||
      (document.getElementById("Storage").value === "") ||
      (document.getElementById("Servers").value === "")) {
      //display error message
      document.getElementById("message").innerHTML = "All fields required";

    } else {

      //unhiding  1st row to cloned it
      document.getElementById('show').style.display = "";
      document.getElementById("message").innerHTML = "";
      var table = document.getElementById('cartTable');

      var new_row = table.rows[1].cloneNode(true); // clones the first row 
      var len = table.rows.length; // number of rows in table
      var inp1 = new_row.cells[0].getElementsByTagName('input')[0];
      inp1.value = document.getElementById("Environment").value;
      var inp2 = new_row.cells[1].getElementsByTagName('input')[0];
      inp2.value = document.getElementById("form").value;
      var inp3 = new_row.cells[2].getElementsByTagName('input')[0];
      inp3.value = document.getElementById("Type").value;
      var inp4 = new_row.cells[3].getElementsByTagName('input')[0];

      inp4.value = document.getElementById("Model").value;

      var inp5 = new_row.cells[4].getElementsByTagName('input')[0];

      inp5.value = document.getElementById("mass").value;

      var inp6 = new_row.cells[5].getElementsByTagName('input')[0];

      inp6.value = document.getElementById("platforms").value;

      var inp7 = new_row.cells[6].getElementsByTagName('input')[0];
      inp7.value = document.getElementById("Storage").value;

      var inp8 = new_row.cells[7].getElementsByTagName('input')[0];
      inp8.value = document.getElementById("Servers").value;
      table.appendChild(new_row);
      //hide again after cloning 
      document.getElementById('show').style.display = 'none';

    }
  } else {
    if ((document.getElementById("Environment").value === "") || (document.getElementById("form").value === "") || (document.getElementById("Type").value === "") || (document.getElementById("Cpu").value === "") ||
      (document.getElementById("Memory").value === "") ||
      (document.getElementById("Storage").value === "") ||
      (document.getElementById("Servers").value === "")) {

      //display error message
      document.getElementById("message").innerHTML = "All fields required";


    } else {

      //unhiding  1st row to cloned it
      document.getElementById('show').style.display = "";
      document.getElementById("message").innerHTML = "";
      var table = document.getElementById('cartTable');

      var new_row = table.rows[1].cloneNode(true); // clones the first row 
      var len = table.rows.length; // number of rows in table
      var inp1 = new_row.cells[0].getElementsByTagName('input')[0];
      inp1.value = document.getElementById("Environment").value;
      var inp2 = new_row.cells[1].getElementsByTagName('input')[0];
      inp2.value = document.getElementById("form").value;
      var inp3 = new_row.cells[2].getElementsByTagName('input')[0];
      inp3.value = document.getElementById("Type").value;
      var inp4 = new_row.cells[3].getElementsByTagName('input')[0];

      inp4.value = document.getElementById("Model").value;

      var inp5 = new_row.cells[4].getElementsByTagName('input')[0];


      inp5.value = document.getElementById("Cpu").value;

      var inp6 = new_row.cells[5].getElementsByTagName('input')[0];

      inp6.value = document.getElementById("Memory").value;

      var inp7 = new_row.cells[6].getElementsByTagName('input')[0];
      inp7.value = document.getElementById("Storage").value;

      var inp8 = new_row.cells[7].getElementsByTagName('input')[0];
      inp8.value = document.getElementById("Servers").value;
      table.appendChild(new_row);
      //hide again after cloning 
      document.getElementById('show').style.display = 'none';

    }
  }
}


function check(s) {
  document.getElementById('Memory').value = '';
  document.getElementById('Cpu').value = '';
  document.getElementById('platforms').innerHTML = '<option>Select Core</option><option>1</option><option>2</option>';
  document.getElementById('mass').innerHTML = '<option>Select memory</option><option>2</option><option>4</option>';


  var c = s.options[s.selectedIndex].value;
  //Here You Can Start Loading your states with each country
  if (c != "windows" && c != "linux") {
    document.getElementById('Memory').style.display = 'block';
    document.getElementById('Cpu').style.display = 'block';
    document.getElementById('platforms').style.display = 'none';
    document.getElementById('mass').style.display = 'none';
  } else {
    document.getElementById('Memory').style.display = 'none';
    document.getElementById('Cpu').style.display = 'none';
    document.getElementById('platforms').style.display = 'block';
    document.getElementById('mass').style.display = 'block';
  }
}

如何在购物车中同时插入下拉值和文本字段值

1 个答案: