CODEWITHSUNDEEP
javascriptjqueryhtml
Newbph
Newbph

Reputation: 101

How to separate each value for each textbox

It seems that when I try to retrieve a data for a certain id it populates it's data to all textbox present.

Here is my addrow script that adds a new row of textboxes:

function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var colCount = table.rows[1].cells.length;

        for(var i=0; i<colCount; i++) {

            var newcell = row.insertCell(i);

            newcell.innerHTML = table.rows[1].cells[i].innerHTML;

        }
    }

Here is my html file

 <td><input type="text" name="personId" class="personId" size="30" onchange="test()"/></td>
 <td><input type="text" name="personName" class="personName" size="30" disabled/></td>

Here is the test script which appends that data to the textbox:

 function test(){

var $cell = $('.personId');              
var cellData = $cell.html();
$cell.data('value', cellData);

//Code here to pass the personId in to an ajax and return it's corresponding personName

 success:   function(data) {

    $('.personName').val(data.person);

 }
}

What happens is that when I have 3 rows of personId and personName and I enter one personId all the textboxes in the 3 rows returns the personName. The goal is that when I enter an personId in one row pesonName should only reflect on the textbox i'm currently entering the personId. Please help. Thank you so much.

Upvotes: 0

Views: 242

Answers (3)

abpatil
abpatil

Reputation: 916

Follow the comments for understanding code. 

var personVal =1; //personVal to create dynamic id

$(document).on('keyup','.personId', function() {
   var personId = $(this).val();
   
   //Code here to pass the personId to an ajax and return it's corresponding personName
   //ajax success code here
   //and success code like
   // success:	function(data) {            
       var currentPersonVal=this.id.split('-')[1];
       var personName="#personName-"+currentPersonVal;
       $(personName).val(currentPersonVal);//name hardcoded for your understanding, you need to add 'data.person'              
   //}
});

function addRow(tableID) {
        var table = document.getElementById(tableID);
        personVal =personVal+1 //increase personVal by 1
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;
        //generate textbox here with dynamic id by adding personVal at the end of id and '-'(dash) is used to split id later 
        var newcell = row.insertCell(0);
        newcell.innerHTML = "<input type='text' id='personId-"+personVal+"' class='personId' size='30' />";
        var newcell = row.insertCell(1);
        newcell.innerHTML = "<input type='text' id='personName-"+personVal+"' class='personName' size='30' disabled/>";

    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table align="center" width="100%" id="table1Id" class = "centerAlign">
    <td><input type="text" id="personId-1" class="personId" size="30" /></td> 
    <td><input type="text" id="personName-1" class="personName" size="30" disabled/></td>
</table>

<input type="button" value="Add Row" onclick="addRow('table1Id');"/>

Let me know if you don't understand anything.

Upvotes: 1

Hitesh Jangid
Hitesh Jangid

Reputation: 210

In your html file change test() to test(this):

  <td><input type="text" name="personId" data-personId = "1" class="personId" size="30" onchange="test()"/></td>

& change your test function to this : 

       function test(e){

           // remove this 
           // var $cell = $('.personId');              
            var cellData = $(e).html();
            $(e).data('value', cellData);

            //Code here to pass the personId in to an ajax and return it's corresponding personName

            success:   function(data) {

              $(e).closest('.personName').val(data.person);

     }
    }

Upvotes: 0

Jigar7521
Jigar7521

Reputation: 1579

You can give personId by data attribute like : 

<td><input type="text" name="personId" data-personId = "1" class="personId" size="30" onchange="test()"/></td>

And then after that you can get that personId in like : 

$('.personId').attr('data-personId');

Upvotes: 0

Related Questions