Get value from child HTML page to parent text field

Question

I have a text field in parent/main page with a button to open a child page. The child page suppose to load and populate with required data (I got this). The code as follows in main page.

<input class="form-control" type="text" size="50" id="SNOW_INC" required>
<button class="btn btn-outline-secondary" type="button" onclick="find_incident()">Find</button>

<script type="text/javascript">

var get_Active_INC;

function find_incident(){
    get_Active_INC = window.open("get_active_inc.php","OCC Active Incident(s)", "width=700,height=500");
    get_Active_INC.focus();
}
</script>

So far all good, a popup window opened in focus and my data being displayed. The code in get_active_inc.php as follows.

foreach($data['result'] as $line){
        echo '<button type="button" id="' . $line['number'] .'" onclick="set_incident(this.id);" class="btn btn-link">' . $line['number'] . '</button>';
        echo $line['short_description'];
        echo '<br>';
}


<script type="text/javascript">
function set_incident(clicked_id){
    if(window.opener != null && !window.opener.closed) {
        var SNOW_INC = window.opener.document.getElementById("SNOW_INC");
        SNOW_INC.value = document.getElementById(clicked_id).value;
    }
    window.close();
}
</script>

Now the popup page displays my data with button (id and text is same) and some text. What I want is when I click the button, it supposed to get the ID of the button, close the window and the text field in parent window get filled with the ID.

I think what I wrote is correct but nothing happens. The window just closes without doing anything. I know its getting the ID because when I do alert(clicked_id); inside the function, I do get the ID I was expecting.

Trying to find out what I'm doing wrong. Thank you!!!

Answer 1

If you want to set the button id to the SNOW_INC element you should set

SNOW_INC.value = clicked_id;

If you want to set the button text to the SNOW_INC element you should set

SNOW_INC.value = document.getElementById(clicked_id).innerText;