Hallo! Selamat Datang di Marketplace produk digital, Freelancer terbaik di indonesia (68414 Members, 793 Products, 5353 Topic, 13045 Comments)

Bagaimana cara Menghitung Jumlah Inputan Prestasi

Dibuat
Login Terakhir 11 Bulan lalu,
Telah Dilihat 1194 Kali
pramadians Mengatakan : Sultan Account
  1. Assalamualaikum Warahmatullahi Wabarakatuh...
  2.  
  3. Selamat Siang,,
  4.  
  5. Saya sedang membuat sebuah inputan data prestasi, dimna setiap prestasi yang diinputkan akan di hitung jumlah prestasi nya.
  6.  
  7. Berikut ini source code yang saya tulis :
  8.  
  9. <script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
  10. <div class="row">
  11. <label class="col-sm-2">Prestasi Akademik & Non Akademik</label>
  12. <div class="col-lg-4">
  13. <input type="text" class="form-control" name="byk_prestasi" id="" placeholder="Ketikkan Prestasi Anda">
  14. </div>
  15. <div class="form-group " align="center">
  16. <button class="btn btn-success add_field_button">Tambah Prestasi</button><b> (Klik tombol Bila Prestasi > 1)</b>
  17. </div>
  18. </div><br>
  19.  
  20. <script>
  21. $(document).ready(function() {
  22. var max_fields = 10; //maximum input boxes allowed
  23. var wrapper = $(".input_fields_wrap");
  24. var add_button = $(".add_field_button");
  25. var x = 1;
  26.  
  27. $(add_button).click(function(e) {
  28. e.preventDefault();
  29. if(x < max_fields){ //max input box allowed
  30. x++; //text box increment
  31.  
  32. $(wrapper).append( '<div class="form-group">'+
  33. '<table border="0" cellspacing="1" style="border-collapse: collapse" bordercolor="#111111" width="100%">'+
  34. ' <td> </td><tr> '+
  35. ' <td colspan="4" bgcolor="blue"><font color="white"><b>Prestasi KE- ' + x + ' :</b> </font></td>'+
  36. ' </tr><td> </td></table>'+
  37. '<table>' +
  38.  
  39. '<div >'+
  40. '<div class="col-sm-12">'+
  41. '<label>Prestasi</label>'+
  42. '<div class="form-group">'+
  43. '<input type="text" name="title[]" class="form-control selectpicker show-tick" data-live-search="true" id="title'+ x +'" placeholder="--- Ketik Prestasi Lainnya ---">'+
  44. '</div>'+
  45. ' </div>'+
  46. '</div>'+
  47.  
  48.  
  49. '</table>' +
  50.  
  51. '<button class="btn btn-danger remove_field">Hapus Item</button>'+
  52. '<br><br></div>');
  53. }
  54.  
  55. });
  56.  
  57. $(wrapper).on("click", ".remove_field", function(e) {
  58. e.preventDefault();
  59. $(this).parent('div').remove();
  60. x--;
  61. });
  62. });
  63. </script>
  64.  
  65. <div class="input_fields_wrap">
  66. <input type="text" id="jumlah-form" name="id_prestasi" value="0">
  67. </div><br>
  68.  
  69. Adapun interface view nya Terlampir . Terimakasih sebelumnya atas bantuan admin dan rekan2 di form ini.
Ada 1 File Kiriman :
1. prestasi.jpg (111 KB)

Ada 2 Jawaban

PHPMU.COM Support
commented on 14 Agu 2020 06:23:49
Salah satu jawaban terbaik,..
  1. Assalamualaikum,.. Silahkan coba ini :
  2.  
  3. <script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
  4. <div class="row">
  5. <label class="col-sm-2">Prestasi Akademik & Non Akademik</label>
  6. <div class="col-lg-4">
  7. <input type="text" class="form-control prestasi" name="byk_prestasi" id="" placeholder="Ketikkan Prestasi Anda">
  8. </div>
  9. <div class="form-group " align="center">
  10. <button class="btn btn-success add_field_button">Tambah Prestasi</button><b> (Klik tombol Bila Prestasi > 1)</b>
  11. </div>
  12. </div><br>
  13.  
  14. <script>
  15. $(document).ready(function() {
  16. var max_fields = 10; //maximum input boxes allowed
  17. var wrapper = $(".input_fields_wrap");
  18. var add_button = $(".add_field_button");
  19. var x = 1;
  20. $(add_button).click(function(e) {
  21. e.preventDefault();
  22. if(x < max_fields){ //max input box allowed
  23. x++; //text box increment
  24.  
  25. $(wrapper).append( '<div class="form-group">'+
  26. '<table border="0" cellspacing="1" style="border-collapse: collapse" bordercolor="#111111" width="100%">'+
  27. ' <td> </td><tr> '+
  28. ' <td colspan="4" bgcolor="blue"><font color="white"><b>Prestasi KE- ' + x + ' :</b> </font></td>'+
  29. ' </tr><td> </td></table>'+
  30. '<table>' +
  31.  
  32. '<div >'+
  33. '<div class="col-sm-12">'+
  34. '<label>Prestasi</label>'+
  35. '<div class="form-group">'+
  36. '<input type="text" name="title[]" class="form-control selectpicker show-tick prestasi" data-live-search="true" id="title'+ x +'" placeholder="--- Ketik Prestasi Lainnya ---">'+
  37. '</div>'+
  38. ' </div>'+
  39. '</div>'+
  40.  
  41.  
  42. '</table>' +
  43.  
  44. '<button class="btn btn-danger remove_field">Hapus Item</button>'+
  45. '<br><br></div>');
  46. }
  47.  
  48. $('#jumlah-form').val($('.prestasi').length);
  49. });
  50.  
  51. $(wrapper).on("click", ".remove_field", function(e) {
  52. e.preventDefault();
  53. $(this).parent('div').remove();
  54. x--;
  55. $('#jumlah-form').val($('.prestasi').length);
  56. });
  57. });
  58. </script>
  59.  
  60. <div class="input_fields_wrap">
  61. <input type="text" id="jumlah-form" name="id_prestasi" value="1">
  62. </div><br>
Terdapat 1 File dilampirkan :
1. hasil_hitung_prestasi1.png (15 KB)
pramadians
commented on 14 Agu 2020 10:14:52
  1. Assalamualaikum,..
  2.  
  3. Terimakasih admin,, masalah telah teratasi... ^_^
Maaf, Untuk Memberikan Komentar Anda Harus Login !!!

Online