Set value from database based on row we choose by button

Question

I want to make a form for my office, where users can fill the form without manually typing.
Just search from the popup browser, and find their data and automatically set in fields.

This is form display,
when we click the blue file icon to open new popup window

And this is new popup window, search display.
When we click button 'pilih' i want ('nik, nama_karyawan, departemen, jabatan') to automatically set in form display.

Answer 1

What you need is to send parameters to opener window. You can do it easily by using window.opener Below is the sample code that works fine for me:

In parent window:

<script>
    $(document).ready(function(){
        $('.btnOpenPopup').click(function(){
             window.open("popup.html", "userList", "width=200, height=100");
        });     
    });
</script>

<form name="test">
    <label>Name: </label>
    <input type="text" name="firstname" id="firstname" />
    <a href="javascript:void(0);" class="btnOpenPopup">Open</a>

    <br /><br />
    <label>Last name:</label>
    <input type="text" name="lastname" id="lastname" />
</form>

In popup window:

<script>
    $(document).ready(function(){
        $('table tr').click(function(){
            firstName = $(this).find('td:eq(1)').text();
            lastName = $(this).find('td:eq(2)').text();

            window.opener.$('input[name="firstname"]').val(firstName);
            window.opener.$('input[name="lastname"]').val(lastName);

            window.close();
        });
    });
</script>
<table width="80%">
    <tr>
        <td>ID</td>
        <td>Name</td>
        <td>Last name</td>
    </tr>
    <tbody>
        <tr>
            <td>1</td>
            <td>John</td>
            <td>Something</td>
        </tr>
        <tr>
            <td>8</td>
            <td>Albert</td>
            <td>Potter</td>
        </tr>
        <tr>
            <td>9</td>
            <td>Melis</td>
            <td>Some Last Name</td>
        </tr>
    </tbody>
</table>