Jquery isn't changing input field value

Question

The values of the input fields are not changing. When I alert the variables I get values from the MySQLI database, so there can't be a problem with my php script. Moreover, I've swapped the value() to a css colour and indeed the input fields are all being coloured. So I'm a little confused why it just isn't changing the value to the value of the variables???

Please note the option which triggers the event is one of the options in the drop down menu; that's why I've got to come up tor DOM and then across and it's quite longwinded. I'm new to Jquery btw, so if this can be done in a better way I'll be pleased to hear.

If the HTML is helpful, I've added it below as well

Thank you in advance.

Jquery

$('.option').on('click', function(){

            var name = $(this).html();
            $.post('ajax.php', {name: name}, function(data) {

                var obj = jQuery.parseJSON(data);

                var item = obj[6]
                var desc = obj[7]
                var qty = obj[8]
                var price = obj[9]
                var disc = obj[10]
                var account = obj[11]
                var tax = obj[12]
                var amount = obj[13]



            $(this).closest("td").siblings().eq(0).children().val(item);


            $(this).closest("td").siblings().eq(1).children().val(desc);


            $(this).closest("td").siblings().eq(2).children().val(qty);


            $(this).closest("td").siblings().eq(3).children().val(price);


            $(this).closest("td").siblings().eq(4).children().val(disc);


            $(this).closest("td").siblings().eq(5).children().val(account);


            $(this).closest("td").siblings().eq(7).children().val(tax);


            $(this).closest("td").siblings().eq(9).children().val(amount);

            });
        });

HTML Sample

<td>
  <input type="text" name = "sales[1][item]" size = "12">
  </td>
  <td>
    <button class="item" type = "button">Add</button>
    <div class = "dropmenu"></div>
  </td>
  <td>
    <input type="text" name="sales[1][description]"  size="40">
  </td>

Filipe Santiago · Accepted Answer · 2017-02-24 18:32:36Z

1

I would suggest to not use at all the .closest, just like siblings and children. It can make something really simple to something confusing.

you are getting your value and if you can change the colours( as you say you can) then i think your error is somewhere in to "point" exactly to where you want to set your value.

I can't see your full code, try do a simple new element , you may make just for test purposes, and see if it works. IF it does, your failure is really in pointing exactly where you want to set your value.

EDIT: instead of making a new element, just add a class to one of your TD ( or ID) and do

$('.YOUR CLASS').val(WHAT YOU WANNA SET AS VALUE);

answered Feb 24, 2017 at 18:32

Filipe Santiago

338 bronze badges

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

4 Comments

user1849962 Over a year ago

Yeah i just swapped one of the above to - $('#item').val(item); - and it worked fine.

Filipe Santiago Over a year ago

That means your are "pointing it wrong", giving ID's or Classes to every element is not that clean code tho, but IMO is better and less confusing as children, .sibling, .nth-child, ... ,.. just because in the future if you or someone else want to change it, add or delete some TD it may create chaos, because you are making element depending on others. Try to find a middle term in creating only the classes/ID that you really need.

user1849962 Over a year ago

the problem with a unique id for each element though is that i'll have many different rows. i'll now need to somehow get a unique id for the drop down menu - on each row with the input fields - before i can assign the right values to the right fields on the same row; which seems quite messy as well; that's why using $(this) was appealing

Filipe Santiago Over a year ago

you can also make <td class="your-class"> ... </td> or <td id=your-id">..</td> if you use "this" it will be the element you just clicked

Collectives™ on Stack Overflow

Jquery isn't changing input field value

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related