How to set the value of text inputs in a table in jQuery?

Question

I have these text inputs in a table :

<td><input type='text' name='arrondi_devis_ht' class='calcul_total' size='8'></td>
<td><input type='text' name='arrondi_devis_ttc' class='calcul_total' size='8'></td>
<td><input type="text" name='marge_pourcent' class='calcul_total' size='5' value='20,0'></td>

I successfully get their value by performing this :

var prix_unitaire_ht=parseFloat($(this).parents("tr").find('input[name="arrondi_devis_ht"]').val().replace(',','.'));
var prix_unitaire_ttc=parseFloat($(this).parents("tr").find('input[name="arrondi_devis_ttc"]').val().replace(',','.'));
var marge_pourcent=parseFloat($(this).parents("tr").find('input[name="marge_pourcent"]').val().replace(',','.'));

So i figured i could use a similar mechanism to set their values and tried this :

$(this).parents("tr").find('input[name="arrondi_devis_ht"]').value=new_prix_ht;
$(this).parents("tr").find('input[name="arrondi_devis_ttc"]').value=new_prix_ttc;
$(this).parents("tr").find('input[name="marge_pourcent"]').value=new_marge;

Yet it does not work and their value remain unchanged. I've tried with .val instead of value, also to assign them an id and to do find("#id").value instead of the above without any result.

Could anyone please tell me what I'm doing wrong ?

$(this).parents("tr").find('input[name="arrondi_devis_ht"]').val(new_prix_ht); etc... — Ohgodwhy
– Ohgodwhy, Commented Jun 25, 2012 at 15:18
Did you think to google something like "how to set input value with jquery"? — nnnnnn
– nnnnnn, Commented Jun 25, 2012 at 15:27
@nnnnnn : I tried googling, searched on this site and the jquery doc, but maybe my terms of research were too specific, and it didn't return any pertinent anwser. I apologize and will try better next time before asking. — Streltsov
– Streltsov, Commented Jun 25, 2012 at 15:40

Josh Mein · Accepted Answer · 2012-06-25 15:19:58Z

7

You need to use that val() method to set the value of an input. This is what you are looking for:

$(this).parents("tr").find('input[name="arrondi_devis_ht"]').val(new_prix_ht);
$(this).parents("tr").find('input[name="arrondi_devis_ttc"]').val(new_prix_ttc);
$(this).parents("tr").find('input[name="marge_pourcent"]').val(new_marge);

Since they are all in the same row, you may want to reuse the initial selector like so:

var $row = $(this).parents("tr");

$row.find('input[name="arrondi_devis_ht"]').val(new_prix_ht);
$row.find('input[name="arrondi_devis_ttc"]').val(new_prix_ttc);
$row.find('input[name="marge_pourcent"]').val(new_marge);

answered Jun 25, 2012 at 15:19

Josh Mein

28.6k15 gold badges79 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

thecodeparadox · Accepted Answer · 2012-06-25 15:19:25Z

1

$(this).parents("tr").find('input[name="arrondi_devis_ht"]').val(new_prix_ht);
$(this).parents("tr").find('input[name="arrondi_devis_ttc"]').val(new_prix_ttc);
$(this).parents("tr").find('input[name="marge_pourcent"]').val(new_marge);

You need to use .val() to set value to a input field.

answered Jun 25, 2012 at 15:19

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

Comments

gdoron · Accepted Answer · 2012-06-25 15:58:24Z

1

$(this).closest("tr").find('input[name="arrondi_devis_ht"]').val(new_prix_ht);
$(this).closest("tr").find('input[name="arrondi_devis_ttc"]').val(new_prix_ttc);
$(this).closest("tr").find('input[name="marge_pourcent"]').val(new_marge);

You can cache the <tr> than, you can simplify your code to:

var row = $(this).closest('tr');
row.find('input[name="arrondi_devis_ht"]').val(new_prix_ht);
row.find('input[name="arrondi_devis_ttc"]').val(new_prix_ttc);
row.find('input[name="marge_pourcent"]').val(new_marge);

edited Jun 25, 2012 at 15:58

answered Jun 25, 2012 at 15:21

gdoron

151k59 gold badges302 silver badges376 bronze badges

5 Comments

nnnnnn Over a year ago

It's déjà vu all over again... (OK, this is slightly different...)

gdoron Over a year ago

@nnnnnn. What do you mean? is traversing up until document vs just until the <tr> is only "slightly different"?

nnnnnn Over a year ago

At first glance there were three near-identical answers. (But then I noticed you'd used .closest(), which is definitely better though it kind of spoils the Déjà vu joke.)

gdoron Over a year ago

@nnnnnn. I'm sorry I didn't mean to spoil your joke... :). Actually I could write a better answer if I knew what is this and why he needs to go up the <tr>

Streltsov Over a year ago

$(this) is one of the text inputs. Basically, each one of their individual values depend on the values of the other two, so every time i change a value of one of the text inputs (the event triggering this is key up), the other two have to be changed. Since they're on the same line, i go up to the tr and then come down to find the other two inputs and change their values. I'm still a beginner, so i'm all ears if you have a more optimum solution :) Thanks already for your contribution.

Collectives™ on Stack Overflow

How to set the value of text inputs in a table in jQuery?

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related