how to count click and change it values in looping javascript?

Question

i have a problem to count how many i click on add more button and add a input box on same time, so here is my javascript :

var i = $('table tr').length;
var count = $('table tr').length;
var row = i;
var a = 0;


for (a = 0; a <= i; a++) {
  $(".addmore_" + a).on('click', function (a) {
    return function() {
          var s = 1;
      var data = "<td><input class='form-control sedang' type='text' id='packinglist_" + a + "' name='packinglist[]'/></td>";
      $("#keatas_" + a).append(data);
       $('#jumrow_'+a).val(s++);
    } ;
  } 
  (a));
};

and here is my html :

     <div class='table-responsive'>
                        <table class='table table-bordered'>
                            <tr>
                                <th>No</th>
                                <th>Jenis Benang</th>
                                <th>Warna</th>
                                <th>Lot</th>
                                <th>Netto</th>
                                <th>Box</th>
                                <th>Cones</th>
                                <th>Keterangan</th>
                                <th></th>
                            </tr>";

$s=mysql_query("SELECT * FROM surat_jalan order by identitas_packing_surat DESC");
    $a=mysql_fetch_array($s);




            for($i=1;$i<=$_POST['jumlahdata'];$i++)
            {
                    $nomor = $a[19];
                    $iden = $nomor + $i;
                        echo"   <tr>
                                <td><span id='snum'>$i.</span></td>
                                <input class='form-control' type='hidden' id='hiddenlot_$i' name='hiddenlot[]' />
                                <input class='form-control' type='hidden' id='hiddencustomer_$i' name='hiddencustomer[]' />
                                <input class='form-control' type='hidden' id='hiddenprice_$i' name='hiddenprice[]' />
                                <td><input class='form-control' type='text' id='jenisbenang_$i' name='jenisbenang[]' readonly/></td>
                                <td><input class='form-control' type='text' id='warna_$i' name='warna[]' readonly/></td>                                
                                <td><input class='form-control' type='text' id='lot_$i' name='lot[]' required/></td>
                                <td><input class='form-control sedang' type='text' id='netto_$i' name='netto[]' required/> </td>
                                <td><input class='form-control pendek' type='text' id='box_$i' name='box[]'/> </td>
                                <td><input class='form-control pendek' type='text' id='cones_$i' name='cones[]'/> </td>
                                <td><input class='form-control' type='text' id='keterangan_$i' name='keterangan[]'/>
                                <input class='form-control' type='text' id='keterangan_$i' name='identitas[]' value='$iden'/>
                                <input class='form-control' type='text' id='jumrow_$i' name='jumpack' value=''/>    
                                 </td>

                                <td><a><span class='glyphicon glyphicon-plus addmore' id='$i'></span></a> </td>
                            </tr>
                            <tr>
                            <td colspan='10'>
                                <table id='keatas_$i' class='keatas'>
                                    <tr></tr>
                                </table>

                            </td>
                            </tr>";

            }   

                     echo"  

                     </table>

so every time i click on addmore , the values will increase by 1 but only in same row.and for the different row the values will start from 1 again. i mix html and php in 1 file , but its not the main problem . any suggest would be appreciated and thank you for spent your time on my post i hope you understand what i mean cause my english is the worst. lol

Sundar Singh · Accepted Answer · 2015-12-19 15:03:01Z

1

use html like remove $i from it:

 for($i=1;$i<=5;$i++)
                {
    <input class='form-control' type='text' id='jumrow_$i' name='jumpack' value=''/>    
                             </td>

                            <td><a><span class='glyphicon glyphicon-plus addmore' id='$i'></span></a> </td>
                        </tr>

                        </tr>";
}

Instead of loop use single event like :

  $(".addmore").on('click', function (a) {
     var cell= $(this).parents('td')
     var currentValue = cell.find("[name=jumpack]").data('addmore');
     if(currentValue==null || currentValue == undefined)
     {
          currentValue =0;  
     }
      else
      {
         currentValue=parseInt(currentValue);
      }
     var data = "<td><input class='form-control sedang' type='text' id='packinglist_" + $(this).index() + "' name='packinglist[]'/></td>";
      cell.parents('tr').append(data);
     currentValue++;
     cell.find("[name=jumpack]").val(currentValue).data('addmore',currentValue)
});

edited Dec 19, 2015 at 15:03

answered Dec 19, 2015 at 13:14

Sundar Singh

6865 silver badges17 bronze badges

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

24 Comments

Jeremy Hermawan Over a year ago

i was try , and it didnt working . and when i press addmore in row 2 , a input text appear in row 1. but thanks for helping

Sundar Singh Over a year ago

use console.log(parseInt($(this).index())+1) and check what value you are getting , you might use +2 in place of +1. is your value increasing now?

Jeremy Hermawan Over a year ago

when i click once a number "1" appear but when i press twice or more the values didnt increase ," var a= parseInt($(this).index())+2 ", when i change a number 1 to 2 , the input box move into row 2 , but how should i do to increase a number automatically ?

Jeremy Hermawan Over a year ago

yeah, the data move into row 2 now ,let me explain,i have 5 rows and i want each addmore can appearing input box in same row , sorry for bad english haha

Sundar Singh Over a year ago

Ok no problem with english . Can you show your html where is keatas id?

|

Collectives™ on Stack Overflow

how to count click and change it values in looping javascript?

1 Answer 1

24 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

24 Comments

Your Answer

Sign up or log in

Post as a guest

Related