Clash Royale CLAN TAG#URR8PPP

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().

.html()

.val()

.val()

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

Thanks,

mikeysantana

2 Answers
2

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

$(this).find("div").text()

$(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

input

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>

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

text

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.