javascript - jQuery .val() return empty string - Stack Overflow

admin管理员组

文章数量:1422029

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

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

• javascript
• jquery
• html

Share Improve this question Follow edited Aug 10, 2018 at 17:05 Miguel Santana asked Aug 10, 2018 at 16:53 Miguel SantanaMiguel Santana 25777 silver badges1616 bronze badges 1

• 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 Commented Aug 10, 2018 at 17:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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./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>

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

本文标签： javascriptjQuery val() return empty stringStack Overflow