'jQuery .val() is returning an empty string for input element [closed]

I have a few input elements in a div and I am trying to use jQuery to 1) check the content of the first input, and if it is not blank, then show the next input, and so on. However, the problem I have is no matter what I type into the input box, .val() returns an empty string in the browser console.

HTML:

<div class="col-sm-6">
  <span class="team-member-form" id="team-member-1-form">
    <input class="form-control" type="text"></input>
    <br/>
  <span class="team-member-form" id="team-member-2-form">
    <input class="form-control" type="text"></input>
    <br/>
  <span class="team-member-form" id="team-member-3-form">
    <input class="form-control" type="text"></input>
    <br/>
  <span class="team-member-form" id="team-member-4-form">
    <input class="form-control" type="text"></input>
    <br/>
  <span class="team-member-form" id="team-member-5-form">
    <input class="form-control" type="text"></input>
    <br/>
  
</div>

Javascript:

 $('.team-member-form').on('keyup', function() {
                var teamMemberForm = $(this).attr('id');
                var teamMemberNumber = teamMemberForm.split('-')[2];
                var teamMemberFormValue = $(this).val();
                console.log(teamMemberFormValue);

So no matter what I type into the input, the console.log is just an empty string. Any ideas why?

javascripthtmljqueryhaml


Solution 1:[1]

We need to attach the keyup event to the input element. Currently it is attached to the span.

I have included a code snippet that is binding the keyup to the .form-control instead.

$('.team-member-form .form-control').on('keyup', function() {
  var teamMemberFormValue = $(this).val();
  console.log(teamMemberFormValue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-6">
  <span class="team-member-form" id="team-member-1-form">
    <input class="form-control" type="text"></input>
    <br/>
  <span class="team-member-form" id="team-member-2-form">
    <input class="form-control" type="text"></input>
    <br/>
  <span class="team-member-form" id="team-member-3-form">
    <input class="form-control" type="text"></input>
    <br/>
  <span class="team-member-form" id="team-member-4-form">
    <input class="form-control" type="text"></input>
    <br/>
  <span class="team-member-form" id="team-member-5-form">
    <input class="form-control" type="text"></input>
    <br/>
  
</div>

Solution 2:[2]

Consider the following example.

$(function() {
  $('.team-member-form > input').on('keyup', function() {
    var teamMemberForm = $(this).parent().attr('id');
    var teamMemberNumber = teamMemberForm.split('-')[2];
    var teamMemberFormValue = $(this).val();
    console.log(teamMemberFormValue);
  });
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-6">
  <div class="team-member-form" id="team-member-1-form">
    <input class="form-control" type="text" />
  </div>
  <div class="team-member-form" id="team-member-2-form">
    <input class="form-control" type="text" />
  </div>
  <div class="team-member-form" id="team-member-3-form">
    <input class="form-control" type="text" />
  </div>
  <div class="team-member-form" id="team-member-4-form">
    <input class="form-control" type="text" />
  </div>
  <div class="team-member-form" id="team-member-5-form">
    <input class="form-control" type="text" />
  </div>
</div>

You had poor HTML Code practices. Your <span> tags were open, yet not closed. You also had closing tags for <input> when they are not required. I changed them to <div> and cleaned up the HTML First.

Now for the jQuery, we adjust the selector first, to select the <input> element. This will help keyup event yet give this a different reference. We can use .parent() to select the parent element and get the id attribute.

Solution 3:[3]

If you do not want to use jQuery you could also do it with pure JS

document.querySelectorAll('.team-member-form .form-control').forEach(element => {
  element.addEventListener('keyup', e => {
    console.log(e.value)
  })
})

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Pedro Estrada
Solution 2
Solution 3 dhoffmann

Related Questions