title: Reset values when select changes using javascript on form
body: <p>I am currently displaying either KG or Stone fields to the user, if the user selects A it hides B and viceversa. The problem is if the user fills KG out and switches to stone it will send both values.</p>
  
  <p>The problem is resetting the value of B when A is selected.</p>
  
  <p>I've tried for example setting the ID of the textfield of B to reset within the switch javascript so when one value is set reset the other value using:</p>
  
  <pre><code>document.getElementById("reset").defaultValue;
  </code></pre>
  
  <p>Along with a lot of other things I've found from other questions but with no success. Anyone can point me in the right direction?</p>
  
  <p><strong>JAVASCRIPT</strong></p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function () {
      toggleFields(); 
      $("#dbType").change(function () {
          toggleFields();
      });
  
  });
  function toggleFields() {
      if ($("#dbType").val() === "stone"){
          $("#stone").show();
           $("#kg").hide();
  }
      else if ($("#dbType").val() === "kg"){
          $("#kg").show();
          $("#stone").hide();
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="stone"&gt;    
   &lt;input class="inputfield" type="text" id="reset" name="stone" /&gt;
  
   &lt;input class="inputfield" type="text" id="reset" name="pounds" /&gt;
      &lt;/div&gt;
  
      &lt;div id="kg"&gt;
     &lt;input class="inputfield" type="text" name="kg"/&gt;
      &lt;/div&gt;
  </code></pre>