CODEWITHSUNDEEP
jquerydynamic
DON
DON

Reputation: 835

How to get values from dynamically generated text box separately?

$.ajax({            
  type: "POST",
  contentType: 'application/json;charset=utf-8',
  dataType:'json',
  url: 'generatequotations',
  data: JSON.stringify(),
  success: function(result) {
    //  alert("success"); 
    console.log(result);
    $.each(result, function(i, item) { 
      tr = $('<tr/>');   
      tr.append($("<td/>").html('<input type="text" name="unit_price" id="unit_price"/>'));
      tr.append($("<td/>").html('<input type="text" readonly="true" name="total" id="total"/>'));
      $('#tbl_items').append(tr);
    });   
  }
});

<body>
<table id="tbl_items"></table>
</body>

Suppose the above code will generate 10 'unit_price' text box in a table, what i need is i want to get values of this 10 textbox's separately for further calculation. Help me geeks...

Link to the screen shot http://oi62.tinypic.com/255hslc.jpg

The two rows are dynamically generated i want to get each textbox('unit_price') inside corresponding total('total') textboxes

Upvotes: 0

Views: 2401

Answers (2)

Anubhav Chaudhary
Anubhav Chaudhary

Reputation: 133

You can get the value using two different ways.

First: When you are adding a textbox to row at that time make it's id as "id"+ i, this will provide different id to each textbox, same thing can be applied to row also.

Second: If you are providing same id to all Textboxes (which you are currently doing) then you can find it's value using "this". $(this).closest('input'), $(this).siblings(),$(this).parent() all these will help you to get value of Textbox.

Whatever method you try, try it on console of Browser, specially on Chrome, this will help you in great manner.

Upvotes: 0

Sadikhasan
Sadikhasan

Reputation: 18600

Change your textbox selector from id to class because you have to take multiple value.

<input type="text" name="unit_price" class="unit_price"/>
<input type="text" name="unit_price" class="total"/>

jQuery

total = 0;
$(".unit_price").each(function(){
   //Find total column and put unit_price value in total column
   $(this).closest(".total").val($(this).val());  
});

Upvotes: 1

Related Questions