Advertisement
cacing69

editPerson.jsp

Jul 17th, 2018
106
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 3.63 KB | None | 0 0
  1. <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
  2.    pageEncoding="ISO-8859-1"%>
  3. <%@ taglib prefix="s" uri="/struts-tags"%>
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <meta charset="ISO-8859-1">
  8. <title>Insert title here</title>
  9. </head>
  10. <body>
  11.     <s:form namespace="/person" action="updatePerson" cssClass="">
  12.         <div class="form-group">
  13.             <div class="row">
  14.                 <b>#ID</b>
  15.                 <s:textfield readonly="true" name="person.id" cssClass="form-control"></s:textfield>
  16.             </div>
  17.         </div>
  18.        
  19.         <div class="form-group">
  20.             <div class="row">
  21.                 <b>Nama</b>
  22.                 <s:textfield name="person.name" cssClass="form-control"></s:textfield>
  23.             </div>
  24.         </div>
  25.        
  26.         <div class="form-group">
  27.             <div class="row">
  28.                 <b>Alamat</b>
  29.                 <s:textfield name="person.address" cssClass="form-control"></s:textfield>
  30.             </div>
  31.         </div>
  32.        
  33.         <div class="form-group">
  34.             <div class="row">
  35.                 <b>Kontak Detail</b>
  36.             </div>
  37.  
  38.             <div class="row">
  39.                 <table class="table-contact">
  40.                     <thead>
  41.                         <tr>
  42.                             <th>Tipe</th>
  43.                             <th>Kontak</th>
  44.                             <th>Aksi</th>
  45.                         </tr>
  46.                     </thead>
  47.                     <tbody>
  48.                         <tr>
  49.                             <td><s:textfield name="" cssClass="form-control"
  50.                                     id="contact-key"></s:textfield></td>
  51.                             <td><s:textfield name="" cssClass="form-control"
  52.                                     id="contact-value"></s:textfield></td>
  53.                             <td><a class="btn btn-primary add-contact"><i
  54.                                     class="fa fa-plus"></i></a></td>
  55.                         </tr>
  56.                         <s:if test="%{tipe.size() > 0}">
  57.                             <s:iterator value="tipe" var="item" status="key">
  58.                                 <tr>
  59.                                     <td width="100" style="text-align: center"><input
  60.                                         type="text" class="form-control" name="tipe" value="${item}"></td>
  61.                                     <td width="50" style="text-align: center"><input
  62.                                         type="text" class="form-control" name="kontak"
  63.                                         value="${kontak.get(key.index)}"></td>
  64.                                     <td width="20" style="text-align: center"><button
  65.                                             id="remove" style="cursor: pointer" type="button"
  66.                                             class="btn btn-alt-danger btn-sm" data-toggle="tooltip"
  67.                                             title="hapus">
  68.                                             <i class="fa fa-close mr-5"></i>
  69.                                         </button></td>
  70.                                     </td>
  71.                                 </tr>
  72.                             </s:iterator>
  73.                         </s:if>
  74.                         <s:else>
  75.  
  76.                         </s:else>
  77.                     </tbody>
  78.                 </table>
  79.             </div>
  80.         </div>
  81.        
  82.         <s:submit value="Update" cssClass="btn btn-primary"></s:submit>
  83.     </s:form>
  84.  
  85.    
  86.     <script>
  87.     $(document).ready(
  88.                     function() {
  89.                         $(".add-contact")
  90.                                 .on(
  91.                                         "click",
  92.                                         function() {
  93.                                             console.log("#add_field_btn::clicked()")
  94.                                             var table = $('.table-contact')
  95.                                                     .find('tbody')
  96.                                             var value = $('#contact-value')
  97.                                                     .val()
  98.                                             var key = $('#contact-key').val()
  99.  
  100.                                             $('.kosong').html('')
  101.                                             var html = '<tr>'
  102.                                                     + '<td width="100" style="text-align: center"><input type="text" class="form-control" name="tipe" value="' + key + '">'
  103.                                                     + '</td>'
  104.                                                     + '<td width="50" style="text-align: center"><input type="text" class="form-control" name="kontak" value="' + value + '">'
  105.                                                     + '</td>'
  106.                                                     + '<td width="20" style="text-align: center"><button id="remove" style="cursor: pointer" type="button" class="btn btn-alt-danger btn-sm" data-toggle="tooltip" title="hapus"><i class="fa fa-close mr-5"></i></button></td>'
  107.                                                     + +'</tr>'
  108.  
  109.                                             table.append(html)
  110.                                            
  111.                                             $('#contact-value').val('')
  112.                                             $('#contact-key').val('')
  113.                                         })
  114.  
  115.                         $(".table-contact").on('click', '#remove', function() {
  116.                             $(this).parent().parent().remove()
  117.                         })
  118.                     })
  119. </script>
  120. </body>
  121. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement