title: Get value of input field by class name, wherer class name is varible
body: <p>I have many pair of text fields and submit button, with <code>id</code> to submit button and <code>class</code> to text field as same but different for each pair. So I want to pass the value entered in text field after button click to ajax function.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    function update_rate(id){
        // var price = document.getElementsByClassName(id)[0].innerHTML;
      
        var price = document.getElementsByClassName(id);
        console.log(price);
        $.ajax({
          type: "POST",
          url: "update_rate.php", // Name of the php files
          data: {subcategory : id , price: price},
          success: function(res)
            {
              // console.log(html);
              alert(res);
            }
        }); 
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>first pair:
  
      &lt;div class="form-group"&gt;
          &lt;input type="text" class="form-control" name="a" placeholder="Your task rate excl. taxes"&gt;
      &lt;/div&gt;
      &lt;button type="submit" id="a" onclick="update_rate(this.id)" class="btn btn-primary"&gt;Update&lt;/button&gt;
  
  
  
      &lt;div class="form-group"&gt;
          &lt;input type="text" class="form-control" name="b" placeholder="Your task rate excl. taxes"&gt;
      &lt;/div&gt;
      &lt;button type="submit" id="b" onclick="update_rate(this.id)" class="btn btn-primary"&gt;Update&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>But I can't get the value of text field into variable.</p>