How to use jquery val()

Question

html:

<div>
  <div style='margin-top: 30px' class='form-group align-items-center'> 
    <form> 
      <input name='test-id' class='form-control' id='test-id' type='text'>
    </form> 
  </div> 
  <div id='form-button' type='button' class='btn btn-danger'>Submit</div>
</div>

js:

$(document).ready(function(){
 $(document).on('click', '#form-button', function(e) {
   console.log($("#test-id").val())
 }) 
})

codepen: https://codepen.io/vorousjames/pen/PoNramd?editors=0001

logs "" instead of the value.

Why does this not work

Answer 1

The console log is working fine. When there is no value inside the text box, it will obviously give "" as output. Although it's obvious and no change is required, the snippets as the answers did not seem right to me, so I am posting of how that should be done.

To prevent the submission of form on pressing enter , event.preventDefault() is used. Besides that, if you want the code to generate output only when there is some value insides the textbox, you fetch the value, trim it using trim() , which removes whitespaces, check if it's empty("" yields false), and console log, only if it's not empty.

 $(document).on('click', '#form-button', function(event) { let val = $("#test-id").val().trim(); if (val) { console.log(val); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <div style='margin-top: 30px' class='form-group align-items-center'> <form onsubmit="event.preventDefault();"> <input name='test-id' class='form-control' id='test-id' type='text'> <button id='form-button' type='button' class='btn btn-danger'>Submit</button> </form> </div> </div>

Answer 2

The codepen you link to works for me. It logs "" if the input element you are calling val() on is empty. If you type something into it first, then click Submit, it will output something other than "".

Answer 3

Actually it does log correct value when you click on it.

Most likely you are pressing enter and as your input is inside form, pressing enter will submit the form which is why you are seeing empty string.

You need to fix your form, just to demonstrate, I have added return false to form's submit method to avoid form submission.

 $(document).ready(function() { $(document).on('click', '#form-button', function(e) { console.log($("#test-id").val()) }) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <div style='margin-top: 30px' class='form-group align-items-center'> <form onsubmit="return false"> <input name='test-id' class='form-control' id='test-id' type='text'> </form> </div> <button id='form-button' type='button' class='btn btn-danger'>Submit</button> </div>

Correct form should be something like:

 function checkValues() { console.log($("#test-id").val()) };

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <div style='margin-top: 30px' class='form-group align-items-center'> <form onsubmit="checkValues(); return false;"> <input name='test-id' class='form-control' id='test-id' type='text'> <button id='form-button' type='submit' class='btn btn-danger'>Submit</button> </form> </div> </div>