CODEWITHSUNDEEP
phpjqueryhtmlajax
Oops
Oops

Reputation: 1413

Input a value in a text box and increment the value in multiple textboxes generated using jquery in php

I have a textbox where I will insert a value , say 100. And when I click on the 'Add' button , list of students appear with a textbox field for each student , which is dynamically fetched from database.

Now in each textboxes appeared, I need to get incremented values based on the number given above,like, 101,102 etc. How it will be possible with jquery. Below is the code I used. Thanks in advance.

//input box for adding the number 

<div class="form-group">
    <div class="col-lg-2"><b>Start Number</b></div>
    <div class="col-lg-5">
        <input type="text" name="start_number" id="start_number">&nbsp;&nbsp;
        <a href="#" id="add_reg"> Add </a>
    </div>
</div>

//jquery code for loading students with input box for each

var trHTML = '';
var j = 0;
$('#myTable').html('');
trHTML += '<tr></tr><td>' + '<b>id</b>' + '</td><td>' + '<b>Name</b>' + '</td><td>' + '<b>Register Number</b>' + '</td></tr>';
$.each(result, function (i, item) {
    j = j + 1;
    trHTML += '<tr><td>' + j + '</td><td>' + item.name + '</td><td><input type="text" name="regno" id="regno"></td></tr>';
});
$('#myTable').append(trHTML);

//myTable is the id of the table to which the rows are appended.

When I type 100 in input field, I need to get 101,102 etc in the textboxes appended.

Upvotes: 0

Views: 1136

Answers (2)

madalinivascu
madalinivascu

Reputation: 32354

Try this:

var k = 101;
$.each(result, function (i, item) {
j=j+1;
trHTML += '<tr><td>'+j+ '</td><td>'+item.name+'</td><td><input type="text" name="regno" value="'+ (k+i) +'"></td></tr>';
});

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82231

You can concatenate index value i + parseInt($('#start_number').val()) (as index is 0 based) in each function as value of input text.

also note that IDs should be unique. you can use same above index to concatenate with id value:

$.each(result, function (i, item) {
 trHTML += '<tr><td>'+ (i+1) + '</td><td>'+item.name+'</td><td><input type="text" name="regno" id="regno'+i+'" value="'+ (i+parseInt($('#start_number').val())) +'"></td></tr>';
});

Upvotes: 1

Related Questions