title: how to insert both drop down values and text field values in to cart
body: <p>There is form text field when user select one of the options such as  windows or linux the text field of cpu and memory changes to drop down,then user selects any one option and tries to add it cart but it is giving error message.Even though the values are inserted its not getting in to cart but when user clicks on the solaries in the form then cpu and memory will text field when user insert the value and clicks on add to cart it is working fine it should work even for drop down also.
  please help me solve this issue</p>
  
  <p>My entire code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="ISO-8859-1"&gt;
  
  &lt;link rel="stylesheet" href="lib/style.css"&gt;
  &lt;script src="lib/script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
      &lt;br&gt;
  &lt;/header&gt;
  &lt;div align="center"&gt;
      &lt;form action = "GetEstimation" method = "post"&gt;
      &lt;p id="message"&gt;&lt;/p&gt;
      &lt;table id="formTable"&gt;
      &lt;tbody&gt;
  
          &lt;tr&gt;
              &lt;td&gt; &lt;label&gt;Environment &lt;/label&gt; &lt;/td&gt;
              &lt;td&gt; &lt;label&gt;form &lt;/label&gt; &lt;/td&gt;
              &lt;td&gt; &lt;label&gt;Type &lt;/label&gt; &lt;/td&gt;
  
              &lt;td&gt;&lt;label id="myLabel" &gt;Model&lt;/label&gt; &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;  &lt;select  name ="Environment"id="Environment" required&gt;
                    &lt;option value ="" selected Disabled&gt;Select Environment&lt;/option&gt;
                    &lt;option&gt;abc&lt;/option&gt;
                  &lt;option&gt;bcd&lt;/option&gt;
                  &lt;option&gt;efg&lt;/option&gt;
                    &lt;/select&gt; &lt;/td&gt;
  
              &lt;td&gt;  &lt;select name="form" id="form"  
              onchange ="check(this)" required&gt;
                    &lt;option value ="" selected Disabled&gt;Select Platform&lt;/option&gt;
                  &lt;option&gt;windows&lt;/option&gt;
                  &lt;option&gt;linux&lt;/option&gt;
                  &lt;option&gt;solaries&lt;/option&gt;
  
                    &lt;/select&gt; &lt;/td&gt;     
              &lt;td&gt;  &lt;select name="Type" id="Type"required&gt;
                    &lt;option value ="" selected Disabled&gt;Select Server Type&lt;/option&gt;
                    &lt;option&gt;ABC&lt;/option&gt;
                    &lt;option&gt;DEF&lt;/option&gt;
                    &lt;option&gt;QAZ&lt;/option&gt;
                    &lt;option&gt;ASF&lt;/option&gt;
                    &lt;option&gt;NS&lt;/option&gt;
                    &lt;/select&gt; &lt;/td&gt;         
  
  
  
  
        &lt;td&gt; &lt;select name = "Model" id="Model"required&gt;
          &lt;option value="" selected Disabled&gt;Select Hardware&lt;/option&gt;
          &lt;option&gt;abc&lt;/option&gt;
          &lt;option&gt;bcd&lt;/option&gt;
          &lt;option&gt;efg&lt;/option&gt;
          &lt;/select&gt; &lt;/td&gt;        
  
          &lt;/tr&gt;
          &lt;tr&gt;    
              &lt;td&gt; &lt;label&gt;Cpu&lt;/label&gt; &lt;/td&gt;
              &lt;td&gt; &lt;label&gt;Memory&lt;/label&gt; &lt;/td&gt;
              &lt;td&gt; &lt;label&gt;Storage&lt;/label&gt; &lt;/td&gt;
              &lt;td&gt; &lt;label&gt;Servers&lt;/label&gt; &lt;/td&gt;       
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt; &lt;input type ="text" name ="Cpu" id="Cpu"required&gt; 
              &lt;select id = "mass" style="display:none;"&gt;&lt;/select&gt;&lt;/td&gt;
              &lt;td&gt; &lt;input type ="text" name ="Memory" id="Memory"required&gt; 
              &lt;select id = "platforms" style="display:none;"&gt;&lt;/select&gt;&lt;/td&gt;
              &lt;td&gt; &lt;input type ="text" name ="Storage" id="Storage"required&gt; &lt;/td&gt;
              &lt;td&gt; &lt;input type ="text" name ="Servers" id="Servers"required&gt; &lt;/td&gt;
              &lt;td&gt; &lt;input type ="button" class="cartBtn" onclick="addTo()" value="Add to Cart"/&gt;
  
          &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  
  
    &lt;table  id="cartTable"&gt;
  
          &lt;tr&gt;
              &lt;th&gt;&lt;label&gt;Environment&lt;/label&gt;&lt;/th&gt;
              &lt;th&gt;&lt;label&gt;form&lt;/label&gt;&lt;/th&gt;
              &lt;th&gt;&lt;label&gt;Type&lt;/label&gt;&lt;/th&gt;
              &lt;th&gt;&lt;label&gt;Model&lt;/label&gt;&lt;/th&gt;
                &lt;th&gt;&lt;label&gt;Cpu&lt;/label&gt;&lt;/th&gt;
                &lt;th&gt;&lt;label&gt;Memory&lt;/label&gt;&lt;/th&gt;
                &lt;th&gt;&lt;label&gt;Storage&lt;/label&gt;&lt;/th&gt;
                &lt;th&gt;&lt;label&gt;Servers&lt;/label&gt;&lt;/th&gt;
          &lt;/tr&gt;
  
      &lt;tr id = "show" style="display:none;"&gt;
      &lt;td&gt; &lt;input type ="text"  readonly &gt;&lt;/td&gt;
      &lt;td&gt; &lt;input type ="text"  readonly&gt;&lt;/td&gt;
      &lt;td&gt; &lt;input type ="text"  readonly&gt;&lt;/td&gt;
      &lt;td&gt; &lt;input type ="text"  readonly&gt;&lt;/td&gt;
      &lt;td&gt; &lt;input type ="text"  readonly&gt;&lt;/td&gt;
      &lt;td&gt; &lt;input type ="text"  readonly&gt;&lt;/td&gt;
      &lt;td&gt; &lt;input type ="text"  readonly&gt;&lt;/td&gt;
      &lt;td&gt; &lt;input type ="text"  readonly&gt;&lt;/td&gt;
  
      &lt;td&gt;&lt;input type="button" class="cartBtn" value="Remove" onclick="remove(this)" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
  
    &lt;/table&gt;
  
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>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='&lt;option&gt;Select Core&lt;/option&gt;&lt;option&gt;1&lt;/option&gt;&lt;option&gt;2&lt;/option&gt;';
      document.getElementById('mass').innerHTML='&lt;option&gt;Select memory&lt;/option&gt;&lt;option&gt;2&lt;/option&gt;&lt;option&gt;4&lt;/option&gt;';
  
  
     var c= s.options[s.selectedIndex].value;
     //Here You Can Start Loading your states with each country
     if(c !="windows" &amp;&amp; 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';
     }
  }
  </code></pre>