title: Uncaught Reference Error: function name is not defined at HTMLButtonElement.onclick
body: <p>This is the edited version of my previous question.
  here i want make a ajax request to fetch class(row name of a table from database). first function is working fine but second function throw this error.</p>
  
  <p>and when i put these two function in different functions first one work and second throw error but when i put both in same tag both are giving error.
  hope you understand.</p>
  
  <p>Code is</p>
  
  <pre class="lang-js prettyprint-override"><code>function showoptionss(str) {
    if (str == "") {
      document.getElementById("options1").innerHTML = "";
      return;
    }
    if (window.XMLHttpRequest) {
      xmlhttp = new XMLHttpRequest();
    } else {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 &amp;&amp; this.status == 200) {
        document.getElementById("options1").innerHTML = this.responseText;
      }
    }
    xmlhttp.open("GET", "getdata.php?q=" + str, true);
    xmlhttp.send();
  };
  
  function gettotalcost() {
    if (window.XMLHttpRequest) {
      xmlhttp = new XMLHttpRequest();
    } else {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 &amp;&amp; this.status == 200) {
        var gottotalcost = this.responseText;
        alert(this.responseText);
        document.getElementById("total_cost").innerHTML = this.responseText;
      }
    }
    var itemtype = document.getElementById("itemtype").value;
    var options1 = document.getElementById("options1").value;
    var subs = document.getElementById("subs").value;
    xmlhttp.open("GET","calculate.php?type="+str+"&amp;options1="options1+"&amp;subs="+subs,true);
    xmlhttp.send();
  };
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form class="form-horizontal" method="POST"&gt;
    &lt;div class="box-body"&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="inputEmail3" class="col-sm-2 control-label"&gt;Type&lt;/label&gt;
        &lt;div class="col-sm-10"&gt;
          &lt;select class="form-control select2" name="type" id="itemtype" onchange="showoptionss(this.value)" style="width: 100%;"&gt;
            &lt;option&gt; Veg &lt;/option&gt;
            &lt;option&gt; Non_veg &lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="inputEmail3" class="col-sm-2 control-label"&gt;Class&lt;/label&gt;
        &lt;div class="col-sm-10"&gt;
          &lt;select id="options1" class="form-control select2" name="class" style="width: 100%;"&gt;
          &lt;?php
            $optionquery = "SELECT * FROM `prices` WHERE `dot`='Thaali' &amp;&amp; `type`='Veg'";
            $optionquery_result = mysqli_query($con,$optionquery) or exit("Error in getting data");
            while($r = mysqli_fetch_array($optionquery_result)) {
              echo "&lt;option&gt;".$r['class']."&lt;/option&gt;";
            }
          ?&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="inputPassword3" class="col-sm-2 control-label"&gt;Quantity&lt;/label&gt;
        &lt;div class="col-sm-10"&gt;
          &lt;input type="number" class="form-control" id="quantity" required name="quantity" max="100" min="1" id="inputPassword3" placeholder="Quantity"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="inputPassword3" class="col-sm-2 control-label"&gt;Your Address&lt;/label&gt;
        &lt;div class="col-sm-10"&gt;
          &lt;input type="text" class="form-control" required name="your_address" id="inputPassword3" placeholder="Your Address"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="inputPassword3" class="col-sm-2 control-label"&gt;Subscription&lt;/label&gt;
        &lt;div class="col-sm-10"&gt;
          &lt;select class="form-control select2" value="&lt;?php echo $subs; ?&gt;" id="subs" name="subs" style="width: 100%;"&gt;
            &lt;option&gt; Today &lt;/option&gt;
            &lt;option&gt; Monthly &lt;/option&gt;
            &lt;option&gt; Quaterly &lt;/option&gt;
            &lt;option&gt; Half_yearly &lt;/option&gt;
            &lt;option&gt; Yearly &lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="inputPassword3" class="col-sm-2 control-label"&gt;Time&lt;/label&gt;
        &lt;div class="col-sm-10"&gt;
          &lt;input type="time" class="form-control" required value="&lt;?php echo $time; ?&gt;" name="time" id="inputPassword3" placeholder="Pickup Address"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="inputPassword3" name="total_cost" id="total_cost" required class="col-sm-2 control-label"&gt;Total Cost&lt;/label&gt;
        &lt;div class="col-sm-10"&gt;
          &lt;input type="text" disabled value="&lt;?php echo $total_cost; ?&gt;" class="form-control" id="inputPassword3" placeholder="Total Cost"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- /.box-body --&gt;
    &lt;div class="box-footer" id="f"&gt;
  
      &lt;input type="button" class="btn btn-info" onclick="gettotalcost()" name="calculate" value="Calculate" /&gt;
      &lt;input type="submit" class="btn btn-info pull-right" name="order" value="Order" /&gt;
    &lt;/div&gt;
    &lt;!-- /.box-footer --&gt;
  &lt;/form&gt;
  </code></pre>