Senin, 05 Juni 2017

Mengambil nilai data dari Attribute HTML dengan javascript / jquery

Kali contoh ini kita akan mengambil nilai ditombol edit pada tabel

<button class="btn btn-success btn-xs" data-target="#myModal" data-toggle="modal" id_daftar="2" nilai="90.55,90.00,70.40,75.5" onclick="edit(this)" type="button"><i class="fa fa-check"></i>edit</button>

Data yang akan di ambil adalah data attribute id_dafta dan nilai pada attibute button edit dan memasukan kedalam field input.

berikut contohnya



berikut script lengkapnya
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


  </head>
<body>

           

          <script>
    function edit(get){
    var id_daftar = $(get).attr("id_daftar");
    var nilai = $(get).attr("nilai");
    $("#id_daftar").val(id_daftar);
 
    var res = nilai.split(",");
     $("#mat").val(res[0]);
     $("#b_ind").val(res[1]);
     $("#b_eng").val(res[2]);
     $("#ipa").val(res[3]);
 
   nilai_rata_rata();
 
    }
          function nilai_rata_rata(){
 
             var rata_rata = 0;
var id_daftar =  $("#id_daftar").val();;
             $(".hitung").each(function(){
                     var get_textbox_value = $(this).val();
         
                     if ($.isNumeric(get_textbox_value)) {
                        rata_rata += parseFloat(get_textbox_value);
                        }             
             });
             var n = rata_rata / $(".hitung").length;

             var pembulatan_nilai_rata_rata=n.toFixed(2);
             $("#n_rata_rata").val(pembulatan_nilai_rata_rata);
 
    if(parseFloat(pembulatan_nilai_rata_rata) > 65.00){
     $("#status_lulus").val("Lulus Sementara");
     $("#status_"+id_daftar).html("Lulus Sementara");
    }else{
     $("#status_lulus").val("Ditolak");
     $("#status_"+id_daftar).html("Ditolak");
    } 
             }

          $(document).ready(function(){
              $(".hitung").keyup(function(){
                   nilai_rata_rata();
              });
          });
             nilai_rata_rata();
            </script>
<table class="table table-bordered table-striped" id="example1">
                <thead>
                <tr>
                  <th>No</th>
                  <th>Nama</th>
                  <th>Tempat Tanggal Lahir</th>
                  <th>Sekolah Asal</th>
                  <th>Status</th>
                  <th>Action</th>
                </tr>
                </thead>
                <tbody>
    <tr>
                  <td>1</td>
                  <td>anton</td>
                  <td>Bandung 20-01-2011</td>
                  <td>Smp 1</td>
                  <td id="status_1" align="center" class="bold"><span style="color: red">Ditolak</span></td>
                  <td align="center">
   
                     <button onclick="edit(this)" id_daftar="1" nilai="80.55,70.00,80.40,80.5" data-toggle="modal" type="button" class="btn btn-success btn-xs" data-target="#myModal"><i class="fa fa-check"></i>edit</button>
       </td>
                </tr>
    <tr>
                  <td>2</td>
                  <td>agus</td>
                  <td>Banjar 04-04-2011</td>
                  <td>Smp 2</td>
                  <td id="status_2" align="center" class="bold"><span style="color: red">Lulus Sementara</span></td>
                  <td align="center">
   
                     <button onclick="edit(this)" id_daftar="2" nilai="90.55,90.00,70.40,75.5" data-toggle="modal" type="button" class="btn btn-success btn-xs" data-target="#myModal"><i class="fa fa-check"></i>edit</button>
       </td>
                </tr>
   
    <tr>
                  <td>3</td>
                  <td>agus</td>
                  <td>Bandung 02-02-2011</td>
                  <td>Smp 3</td>
                  <td id="status_3" align="center" class="bold"><span  style="color: red">Lulus Sementara</span></td>
                  <td align="center">
   
                     <button onclick="edit(this)" id_daftar="3" nilai="60.55,90.00,90.40,90.5" data-toggle="modal" type="button" class="btn btn-success btn-xs" data-target="#myModal"><i class="fa fa-check"></i>edit</button>
       </td>
                </tr>   
                </tbody>
              </table>   
 

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Mengambil nilai data dari Attribute HTML </h4>
      </div>
      <div class="modal-body">
   <div class="row">
    <form class="form-horizontal">

<div class="col-sm-7">
  <div class="form-group">
    <label class="control-label col-sm-7" for="mat">ID daftar </label>
    <div class="col-sm-4">
      <input type="text" class="form-control " id="id_daftar" name="id_daftar" value="">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-7" for="mat">Matematika </label>
    <div class="col-sm-4">
      <input type="text" class="form-control hitung" id="mat" name="mat"  placeholder="Nilai" value="">
    </div>
  </div>

    <div class="form-group">
    <label class="control-label col-sm-7" for="b_ind">Bahasa indonesia  </label>
    <div class="col-sm-4">
      <input type="text" class="form-control hitung" id="b_ind" name="b_ind" placeholder="Nilai" value="">
    </div>
 </div>

    <div class="form-group">
    <label class="control-label col-sm-7" for="b_eng">Bahasa inggris  </label>
    <div class="col-sm-4">
      <input type="text" class="form-control hitung" id="b_eng" name="b_eng" placeholder="Nilai" value="">
    </div>
 </div>

    <div class="form-group">
    <label class="control-label col-sm-7" for="ipa">Ilmu pengetahuan alam</label>
    <div class="col-sm-4">
      <input type="text" class="form-control hitung" id="ipa" name="ipa" placeholder="Nilai" value="">
    </div>
 </div>


</div>

<div class="col-sm-5">
    <div class="form-group">
    <label class="control-label col-sm-12" for="n_rata_rata">Nilai rata rata  </label>
    <div class="col-sm-12">
      <input  readonly type="text" class="form-control" id="n_rata_rata" placeholder="Nilai rata rata ">
    </div>
  </div>
</div>

<div class="col-sm-5">
    <div class="form-group">
    <label class="control-label col-sm-12" for="n_rata_rata">Status  </label>
    <div class="col-sm-12">
      <input  readonly type="text" class="form-control" id="status_lulus"  >
    </div>
  </div>
</div>
</form>
</div>
  <span class="btn btn-default">Submit</span>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
</body>
</html>