The Small Notes

Inputan pada sebuah form terkadang perlu dibuat berbagai gaya atau style. Dibawah ini adalah contoh script sederhana membuat Inputan dengan Modal Popup. Dimana akan muncul pilihan data. Dan ketika ID data dipilih maka form lain yang berhubungan akan otomatis terisi. Sehingga yang melakukan inputan tidak perlu repot untuk mengisi ulang data pada form yang lain.

<html lang="en">
    <head>
      <title>Modal 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.4.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    </head>
    <body>     
    <div class="container">
      <div class="row">
        <div class="col-sm-4">
          <h3>ID</h3>
          <input id="id" type="text" name="id" onclick="return  openmodal(this);"/>
        </div>   
    	<div class="col-sm-4">
          <h3>Name</h3>
          <input id="name" type="text" name="name"/>
        </div> 
      </div>
    </div>
    
    <!-- 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">Modal Header</h4>
          </div>
          <div class="modal-body">
    		<table border="1" cellpadding="10" width="50%">
    			<thead>
    				<tr>
    					<th>ID</th>
    					<th>Name</th>
    				</tr>
    			</thead>
    			<tbody>
    				<tr>
    					<td><a class="hello" data-id="1" data-id2="Robert" >1</a></td>
    					<td><a class="hello" data-id2="Robert" >Robert</a></td>
    				</tr>
    				<tr>
    					<td><a class="hello" data-id="2" data-id2="Julia" >2</a></td>
    					<td><a class="hello" data-id2="Julia" >Julia</a></td>
    				</tr>
    			</tbody>
    		</table>
    	  
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
    
      </div>
    </div>	
	</body>
    
    
    <script>
    	function openmodal(input) {
     
      $('#myModal').modal('show');
      $(".hello").unbind().click(function(event){
    
 //         $(input).val($(this).attr("data-id"));
		  $("#id").val($(this).attr("data-id"));
		  $("#name").val($(this).attr("data-id2"));
          $('#myModal').modal('hide');
      });
    }
    </script>
	
	</html>