jQuery .val() return empty string

Question

I am trying to sum the values of a column table, each time it gets updated. So for that I have this function, that gets executed each time the table inserts or deletes a row, but for now, it's just sending the value to the console:

function update_price(){
  $("#table-content tr td:nth-child(3)").each(function() {
    console.log($(this).find("div").val());
  });
}

The HTML code associated with it looks like this:

<tbody id="table-content">
     <tr class="table-content-line">
        <td>9789898818386</td>
        <td>Fale Menos, Comunique Mais</td>
        <td>
            <div class="form-group">
                <input type="number" data-number-to-fixed="2" data-number-stepfactor="1" class="auto form-control price" value="12" step=".01">
            </div>
        </td>
        <td>2</td>
        <td>
            <span class="remove-action">
                <i class="fa fa-times-circle"></i>
            </span>
        </td>
     </tr>
     ...
</tbody>

For some odd reason, when I use .html() instead of .val(), it returns me the HTML code for the user input, but the same doesn't happen when I use .val().

Please let me know if you have any suggestion, maybe I'm doing something wrong and I didn't checked yet.

Thanks,
mikeysantana

Regarding to docs for val and html val is trying to get value from value attribute by default, but html on opposite trying to get all content of tags laying beneath selected. In your example you are trying to get the value of value-attribute of the td-tag (but it cannot be done, because it doesn't have one), but html works well. — Dmitry Surin
– Dmitry Surin, Commented Aug 10, 2018 at 17:05

Carsten Løvbo Andersen · Accepted Answer · 2018-08-10 16:55:17Z

you need to swap $(this).find("div").text() with $(this).find("div input").val();

The div actually don't contain any text, even though the input is inside it. So you have to target the input to get the value

demo

function update_price() {
  $("#table-content tr td:nth-child(3)").each(function() {
    console.log($(this).find("div input").val());
  });
}

update_price();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody id="table-content">
    <tr class="table-content-line">
      <td>9789898818386</td>
      <td>Fale Menos, Comunique Mais</td>
      <td>
        <div class="form-group"><input type="number" data-number-to-fixed="2" data-number-stepfactor="1" class="auto form-control price" value="12" step=".01"></div>
      </td>
      <td>2</td>
      <td><span class="remove-action"><i class="fa fa-times-circle"></i></span></td>
    </tr>
    ...
  </tbody>
</table>

Paul Zepernick · Accepted Answer · 2018-08-10 16:55:06Z

2

Val() is used for html form elements. Use text() instead for non form elements.

answered Aug 10, 2018 at 16:55

Paul Zepernick

1,4621 gold badge11 silver badges26 bronze badges

3 Comments

T.J. Crowder Over a year ago

The OP is using text (despite the title of the question).

T.J. Crowder Over a year ago

Right -- because they're targeting the wrong element, as Carsten points out.

Paul Zepernick Over a year ago

ah ok nm, tried to give a quick answer from my phone and obviously failed. lol

Collectives™ on Stack Overflow

jQuery .val() return empty string

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related