jquery updating multiple text input

Question

im trying to update all fields, but seem it didnt work? is there anything wrong in the code?

<tr id="1"><td><input type="text" id="pro_1"><input type="text" id="sales_1"></td></tr> //
<tr id="2"><td><input type="text" id="pro_2"><input type="text" id="sales_2"></td></tr> //
<tr id="3"><td><input type="text" id="pro_3"><input type="text" id="sales_3"></td></tr> //

$('#save_products').live('click',function() {
        var $inputs = $('#form').find("input[type=text]");
        $inputs.each(function(){
            var counter = $inputs.length;
            var pro_id = $(this).closest.parent("tr").pro_id; //<--
            var pro_value = $(this).find('pro_'+pro_id).attr("value");
            var sales_value = $(this).find('sales_'+pro_id).attr("value");
            $.post("include/setting.php?save",{id:pro_id, pro_value:pro_value, sales_value:sales_value, count:counter}, function(data){
                if(data.success) {
                      $('.err_message').html(data.message).addClass('ok').fadeIn('slow');         
                } else {$('.err_message').html(data.message).addClass('error').fadeIn('slow');}
            },"json");
        })
        return false;
    });

Jacob Mattison · Accepted Answer · 2011-04-26 18:45:59Z

2

You're looping through the actual input elements, so when you do

        var id = $(this).attr("id");
        var pro_value = $(this).find('pro_'+id).attr("value");
        var sales_value = $(this).find('sales_'+id).attr("value");

The value of id isn't "1" or "2" or "3", it's actually "pro_1" or "pro_2" or "pro_3". Therefore, when you look for 'pro' + id you're looking for 'propro_1', which doesn't exist.

A better approach might be something like

<div class="input_pair">
   <input type="text" class="pro" ><input type="text" class="sales">
<div>



var $pairs = $('#form').find("div.input_pair");
$pairs.each(function(){
     var pro_value=$(this).find('input.pro').val();
     var sales_value=$(this).find('input.sales').val();
     //do the ajax update as you are
}

edited Apr 26, 2011 at 18:45

answered Apr 26, 2011 at 18:40

Jacob Mattison

51.2k11 gold badges109 silver badges128 bronze badges

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

3 Comments

Jacob Mattison Over a year ago

Not quite -- I like the idea of a container that gives you the number to append, but you're assigning the actual tr element to the variable id, rather than assigning the actual id (e.g. "1"). Try var id = $(this).parent("td").parent("tr").id;. Also, you can simplify this to var id = $(this).closest.parent("tr").id;

tonoslfx Over a year ago

i tried that one just now, still not saving :(. var pro_id = $(this).closest.parent("tr").pro_id; <tr id="1"> is the id that given by database. so i want to update each row tables that given unique id. if you know what i mean :) it refreshing the page when submit

Jacob Mattison Over a year ago

The attribute is still called "id", not "pro_id": var pro_id = $(this).closest.parent("tr").id;. You're trying to pull out the "1" in <tr id="1">, so you want the id attribute of the tr element.

Paul Alexander · Accepted Answer · 2011-04-26 18:39:55Z

1

var id = $(this).attr("id"); // Id looks something like sales_1
var pro_value = $(this).find('pro_'+id); // Looking for pro_sales_1

Your tacking on the full sales id, you'll want to parse out just the number

id = id.substring( 6 )

answered Apr 26, 2011 at 18:39

Paul Alexander

32.5k16 gold badges100 silver badges152 bronze badges

Comments

James Montagne · Accepted Answer · 2011-04-26 18:48:48Z

var pro_value = $(this).find('pro_'+id).attr("value");
var sales_value = $(this).find('sales_'+id).attr("value");

should actually be something like this:

var pro_value = $(this).filter('#pro_'+id).attr("value");
var sales_value = $(this).filter('#sales_'+id).attr("value");

find tries to find elements contained within the items in your set, not as a subset of your items. Also you were missing # before the ids.

EDIT: While the above is still true, as well as the other answers pointing out that your'e tacking on the whole ID and not just the number at the end. I don't believe what you're going to get is really what you're intending. I assume you're trying to run this once for each set of inputs, not twice (which is what this will do now).

Perhaps something more like this:

id-1) <span class="inputSet">
         <input type="text" class="pro" id="pro_1">
         <input type="text" class="sales" id="sales_1">
      </span>
id-2) <span class="inputSet">
         <input type="text" class="pro" id="pro_2">
         <input type="text" class="sales" id="sales_2">
      </span>
id-3) <span class="inputSet">
         <input type="text" class="pro" id="pro_3">
         <input type="text" class="sales" id="sales_3">
      </span>

Then your js can be like this:

$(".inputSet").each(function(){
   proVal=$(this).find(".pro").val();
   salesVal=$(this).find(".sales").val();
})

Collectives™ on Stack Overflow

jquery updating multiple text input

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related