CODEWITHSUNDEEP
javascriptjqueryhtml
Miguel Santana
Miguel Santana

Reputation: 247

jQuery .val() return empty string

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

Upvotes: 0

Views: 3239

Answers (2)

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

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>

Upvotes: 5

Paul Zepernick
Paul Zepernick

Reputation: 1462

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

Upvotes: 2

Related Questions