Input text value for ajax

Question

I have an AJAX functional post that works great. My client requested an additional text input field, and for my life I can’t get it. The script is long, so I will give you the corresponding bits in the hope that this is a syntax issue.

HTML for input:

<input type="text" name="why" id="why" maxlength="70"> 

Javascript call

 $(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). 

It does not return anything for the why.

The funny thing is: if I changed the variable to var why = 'sample why'; she will pass. Similarly, if I change my input to <input type="text" name="why" id="why" maxlength="70" value="some value"> , it will read it. Therefore, I think the problem is how I define it.

But what? I also tried var why = $("input#why").val(); and document.getElementById("why").value;

Answer 1

Your HTML may have a different element with the same id="why" . So try to find it. Or change the id above the input to something else.

Optionally, you can try to get this input value with:

 var why = $('input[name="why"]').val(); 

Hope this helps.