Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
- pageEncoding="ISO-8859-1"%>
- <%@ taglib prefix="s" uri="/struts-tags"%>
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="ISO-8859-1">
- <title>Insert title here</title>
- </head>
- <body>
- <s:form namespace="/person" action="updatePerson" cssClass="">
- <div class="form-group">
- <div class="row">
- <b>#ID</b>
- <s:textfield readonly="true" name="person.id" cssClass="form-control"></s:textfield>
- </div>
- </div>
- <div class="form-group">
- <div class="row">
- <b>Nama</b>
- <s:textfield name="person.name" cssClass="form-control"></s:textfield>
- </div>
- </div>
- <div class="form-group">
- <div class="row">
- <b>Alamat</b>
- <s:textfield name="person.address" cssClass="form-control"></s:textfield>
- </div>
- </div>
- <div class="form-group">
- <div class="row">
- <b>Kontak Detail</b>
- </div>
- <div class="row">
- <table class="table-contact">
- <thead>
- <tr>
- <th>Tipe</th>
- <th>Kontak</th>
- <th>Aksi</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><s:textfield name="" cssClass="form-control"
- id="contact-key"></s:textfield></td>
- <td><s:textfield name="" cssClass="form-control"
- id="contact-value"></s:textfield></td>
- <td><a class="btn btn-primary add-contact"><i
- class="fa fa-plus"></i></a></td>
- </tr>
- <s:if test="%{tipe.size() > 0}">
- <s:iterator value="tipe" var="item" status="key">
- <tr>
- <td width="100" style="text-align: center"><input
- type="text" class="form-control" name="tipe" value="${item}"></td>
- <td width="50" style="text-align: center"><input
- type="text" class="form-control" name="kontak"
- value="${kontak.get(key.index)}"></td>
- <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>
- </td>
- </tr>
- </s:iterator>
- </s:if>
- <s:else>
- </s:else>
- </tbody>
- </table>
- </div>
- </div>
- <s:submit value="Update" cssClass="btn btn-primary"></s:submit>
- </s:form>
- <script>
- $(document).ready(
- function() {
- $(".add-contact")
- .on(
- "click",
- function() {
- console.log("#add_field_btn::clicked()")
- var table = $('.table-contact')
- .find('tbody')
- var value = $('#contact-value')
- .val()
- var key = $('#contact-key').val()
- $('.kosong').html('')
- var html = '<tr>'
- + '<td width="100" style="text-align: center"><input type="text" class="form-control" name="tipe" value="' + key + '">'
- + '</td>'
- + '<td width="50" style="text-align: center"><input type="text" class="form-control" name="kontak" value="' + value + '">'
- + '</td>'
- + '<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>'
- + +'</tr>'
- table.append(html)
- $('#contact-value').val('')
- $('#contact-key').val('')
- })
- $(".table-contact").on('click', '#remove', function() {
- $(this).parent().parent().remove()
- })
- })
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement