How To Input Number To Textbox Jquery Append

Question

I want to insert number to textbox but i cannot insert when i added row, how to inserted to append textbox?

<script>
$('document').ready(function(){
var counter = 0;
$("#addrow").on("click", function () {
    counter = $('#myTable tr').length - 3;
    var newRow = $("<tr>");
    var cols = "";
    cols += '<td><input type="text" name="item' + counter + '"/></td>';
    cols += '<td><input type="text" name="stock' + counter + '"/></td>';
    cols += '<td><input type="button" class="ibtnDel" value="Delete"></td>';
    newRow.append(cols);
    $("table.order-list").append(newRow);
    counter++;
});

$("table.order-list").on("click", ".ibtnDel", function (event) {
    $(this).closest("tr").remove();

    counter -= 1
    $('#addrow').attr('disabled', false).prop('value', "Add Row");
});

$('#stock').val(0);
    var nilai1 = $('#stock').val();     
    $('.angka').click(function(){
        if($('#stock').val()==0){
            nilai1 ='';
        }
        nilai1 += $(this).val();
        $('#stock').val(nilai1);
    });
});
</script>

Might be able to help me? for more details here preview

you want to insert 1,2,3 etc in the newly added rows right ? — Muhammad Usman
– Muhammad Usman, Commented Oct 31, 2017 at 16:19
counter++ makes zero sense when in the start of the function you read the length — epascarello
– epascarello, Commented Oct 31, 2017 at 16:23
@epascarello counter++ to set an array on textbox, yes that is :) — Ivisivel
– Ivisivel, Commented Oct 31, 2017 at 16:27

Muhammad Usman · Accepted Answer · 2017-10-31 17:36:44Z

Select any field whether it is added dynamically or not and you're able to add values in selected text field

var counter = 0;
var sItem;
$(document).on('click', '.dumy', function(){
    sItem = $(this);
    
});
    $("#addrow").on("click", function () {
        counter = $('#myTable tr').length - 3;
        var newRow = $("<tr>");
        var cols = "";
        cols += '<td><input type="text" name="item' + counter + '"/></td>';
        cols += '<td><input type="text" class="dumy" name="stock' + counter + '" id="stock' + counter + '"/></td>';
        cols += '<td><input type="button" class="ibtnDel" value="Delete"></td>';
        newRow.append(cols);
        $("table.order-list").append(newRow);
        counter++;
    });

    $("table.order-list").on("click", ".ibtnDel", function (event) {
        $(this).closest("tr").remove();
        
        counter -= 1
        $('#addrow').attr('disabled', false).prop('value', "Add Row");
    });
    
    $('#stock').val(0);
				
		$('.angka').click(function(){
    var nilai1 = $(sItem).val();
			 if($(sItem).val() == 0){
       nilai1 ='';
       }
			nilai1 += $(this).val();
			$(sItem).val(nilai1);
		});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
					<input type="button" class="angka" value="1" id="satu">
					<input type="button" class="angka" value="2" id="dua">
					<input type="button" class="angka" value="3" id="tiga">
          </div>
<table id="myTable" class="order-list">
    <thead>
    <tr>
            <td colspan="5" style="text-align: left;">
                <input type="button" id="addrow" value="Add Row" />
            </td>
        </tr>
        <tr>
            <td>Item</td>
            <td>Stock</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="text" name="item0" id="item" />
            </td>
            <td>
                <input type="text" name="stock0" class="dumy" id="stock" />
            </td>
            <td><a class="deleteRow"></a>

            </td>
        </tr>
    </tbody>
</table>

Michele Romani · Accepted Answer · 2017-10-31 16:28:21Z

1

Could you better explain your question? It seems to me you are trying to use the [1] [2] [3] buttons to write a value in the selected textbox but instead you only get it to the first one. If I did not misunderstand you, your problem is right in this piece of code:

var nilai1 = $('#stock').val();     
    $('.angka').click(function(){
        if($('#stock').val()==0){
            nilai1 ='';
        }
        nilai1 += $(this).val();
        $('#stock').val(nilai1);

Basically your nila1 variable is always pointing to the DOM object referred by #stock therefore you will always be writing in that specific textbox.

I wouldn't recommend using pure JQuery for doing this kind of dinamic binding, or you could at least reconsider the design of those buttons.

As soon as you'll have better explained your problem I'll try to write down a solution for you keeping this concept.

answered Oct 31, 2017 at 16:28

Michele Romani

116 bronze badges

1 Comment

Ivisivel Over a year ago

yes that is, i cannot insert button [1] [2] [3] on textbox in row what i added, can you help me?

D Lowther · Accepted Answer · 2017-10-31 16:26:35Z

0

The simplest way would be to add a value to the input when you create it like this:

(function($) {
  let counter = 0;
  
  $("#addrow").on("click", function () {
    counter = $('#myTable tr').length - 3;
    const newRow = $("<tr>");
    let cols = "";
    cols += '<td><input type="text" name="item' + counter + '" /></td>';
    cols += '<td><input type="text" name="stock' + counter + '" value="0" /></td>';
    cols += '<td><input type="button" class="ibtnDel" value="Delete" /></td>';
    newRow.append(cols);
    $("table.order-list").append(newRow);
    counter++;
  });

  $("table.order-list").on("click", ".ibtnDel", function (event) {
    $(this).closest("tr").remove();

    counter -= 1
    $('#addrow').attr('disabled', false).prop('value', "Add Row");
  });

  $('#stock').val(0);
  var nilai1 = $('#stock').val();		
  $('.angka').click(function(){
    if($('#stock').val()==0){
      nilai1 ='';
    }
    nilai1 += $(this).val();
    $('#stock').val(nilai1);
  });
})(jQuery)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
					<input type="button" class="angka" value="1" id="satu">
					<input type="button" class="angka" value="2" id="dua">
					<input type="button" class="angka" value="3" id="tiga">
          </div>
<table id="myTable" class="order-list">
    <thead>
    <tr>
            <td colspan="5" style="text-align: left;">
                <input type="button" id="addrow" value="Add Row" />
            </td>
        </tr>
        <tr>
            <td>Item</td>
            <td>Stock</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="text" name="item0" id="item" />
            </td>
            <td>
                <input type="text" name="stock0" id="stock" />
            </td>
            <td><a class="deleteRow"></a>

            </td>
        </tr>
    </tbody>
</table>

answered Oct 31, 2017 at 16:26

D Lowther

1,6191 gold badge10 silver badges16 bronze badges

2 Comments

Ivisivel Over a year ago

the number still insert on top text box, not on added row :/

D Lowther Over a year ago

I'm not sure what you mean, when i add a row '0' is displayed in the Stock textbox.

MarieWeb · Accepted Answer · 2017-10-31 17:31:27Z

0

(function($) {
  let counter = 0;
  
  $("#addrow").on("click", function () {
    counter = $('#myTable tr').length - 2;
       $('#current').val(counter);
    const newRow = $("<tr>");
    let cols = "";
    cols += '<td><input type="text" name="item' + counter + '"  id="item' + counter + '"  /></td>';
    cols += '<td><input type="text" name="stock' + counter + '" id="stock' + counter + '" value="0" /></td>';
    cols += '<td><input type="button" class="ibtnDel" value="Delete" /></td>';
    newRow.append(cols);
    $("table.order-list").append(newRow);
    counter++;

  });

  $("table.order-list").on("click", ".ibtnDel", function (event) {
    $(this).closest("tr").remove();

    counter -= 1
    $('#addrow').attr('disabled', false).prop('value', "Add Row");
  });

  $('#stock').val(0);
	
  $('.angka').click(function(){

  rownumber = $('#current').val();
    alert(rownumber);
  var nilai1 = $('#stock'+  rownumber ).val();	
    if($('#stock'+rownumber).val()==0){
      nilai1 ='';
    }
    nilai1 += $(this).val();
    $('#stock'+rownumber).val(nilai1);
  });
})(jQuery)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
					<input type="button" class="angka" value="1" id="satu">
					<input type="button" class="angka" value="2" id="dua">
					<input type="button" class="angka" value="3" id="tiga">
          <input type="hidden" id="current" value="" />
          </div>
<table id="myTable" class="order-list">
    <thead>
    <tr>
            <td colspan="5" style="text-align: left;">
                <input type="button" id="addrow" value="Add Row" />
            </td>
        </tr>
        <tr>
            <td>Item</td>
            <td>Stock</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="text" name="item0" id="item0" />
            </td>
            <td>
                <input type="text" name="stock0" id="stock0" rel="0" value="0" />
            </td>
            <td><a class="deleteRow"></a>

            </td>
        </tr>
    </tbody>
</table>

answered Oct 31, 2017 at 17:31

MarieWeb

3315 silver badges11 bronze badges

3 Comments

MarieWeb Over a year ago

You just need to tell the click buttons which Stock field to insert the value into.

Ivisivel Over a year ago

why number input insert on below text box, when i added rows :/

MarieWeb Over a year ago

When you insert a new input, it should have a unique identifier. Otherwise, the Click button event will only insert on the input value with ID identifier of "#stock".

Collectives™ on Stack Overflow

How To Input Number To Textbox Jquery Append

4 Answers 4

Comments

1 Comment

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related