title: Post text input value to ajax
body: <p>I have a functional AJAX post that's working great.  My client requested an additional text input field, and for the life of me, I can't get it.  The script is long so I'll give you the relevant bits in hopes that it's a matter of syntax.</p>
  
  <p>HTML for my input:</p>
  
  <pre><code>&lt;input type="text" name="why" id="why" maxlength="70"&gt;
  </code></pre>
  
  <p>Javascript call</p>
  
  <pre><code>$(document).on("click", ".take-claim-link", function(){
  var id= $(this).attr('data-id');    
  var point= $(this).attr('data-point');
  var val= $(this).attr('data-val');  
  var type = $(this).attr('data-type');
  var why = $("#why").val();
  
  var follow = document.getElementById("follow-" + id + "-"+ type);
  var followuser='0';
  if (follow.checked) {
      var followuser = "1";
  }
  
  
  var takeurl = '/api/responseClaim.json';
  var newPrice ='';   
  
  var newData = $.ajax({ 
      type: "POST",
      url: takeurl,
      dataType: "json",
      data: { point: point, claimId: id, type: val,why: why,follow: followuser }
      })
  (etc).
  </code></pre>
  
  <p>It returns nothing for "why".</p>
  
  <p>The funny thing:  if I change the variable to <code>var why = 'sample why';</code> it passes.  Likewise, if I change my input to <code>&lt;input type="text" name="why" id="why" maxlength="70" value="some value"&gt;</code> it reads it.  So I think the problem is in the way I'm defining it.  </p>
  
  <p>But what?  I've also tried <code>var why = $("input#why").val();</code> and <code>document.getElementById("why").value;</code></p>