<input type="text" assign id value to php string

I have a modal form to write employee working time stamp to an SQL database. I select the employee from a dropdown menù and fill by javascript function the name and surname input box using the id tag. When I submit the form, the datas are written into the db using php. The problem is I'm not able to convert javascript string to php string or assign the id tag of the input tag to a php string. I know that writing inside the input I can assign the value with php value="....".

$nome = '<script>document.writeln(a);</script>'; 

not works

Here the code

<div class="modal-body">
    <input type="hidden" name="edit_id" value="<?php echo $id; ?>">
    <div class="form-group">
        <label class="control-label col-sm-2" for="dipendente">Dipendente:</label>
        <div class="col-sm-4">
            <select id="dipendente" name="dipendente" onchange="nomeCognome()">
            <option value="dipendente">Seleziona dipendente</option>
            <?php 
                $sqlOperatore="SELECT nome, cognome FROM login ORDER BY nome ASC";
                $resultOperatore = $conn->query($sqlOperatore);
                    if ($resultOperatore->num_rows > 0) {                                    
                        while($row = $resultOperatore->fetch_assoc()) {
                            $nome = $row['nome'];
                            $cognome = $row['cognome'];
                            $dipendente = $nome . ' ' . $cognome;
            ?>                                                  
                <option><?php echo $dipendente; ?></option>
                        <?php } ?>                                                  
            </select>                                   
        </div>
                    <?php } ?>
        <label class="control-label col-sm-2" for=" "> </label>
        <div class="col-sm-4"></div>
    </div>                          
    <br>
    <div class="form-group">
        <label class="control-label col-sm-2" for="nome">Nome:</label>
        <div class="col-sm-4" id="nome">
            <input type="text" class="form-control" id="nome" name="nome" readonly> </div>
        <label class="control-label col-sm-2" for="cognome">Cognome:</label>
        div class="col-sm-4" id="cognome">
            <input type="text" class="form-control" id="cognome" name="cognome" readonly> </div>
    </div>                          
    <br>                                                        

    <script type="text/javascript">
        function nomeCognome() {
            var x = document.getElementById("dipendente").value;
            var [a, b, c] = x.split(' ');
            document.getElementById("nome").innerHTML = [a];
            document.getElementById("cognome").innerHTML = [b, c].join(' ');
        }
    </script>           
</div>
<div class="modal-footer">
    <button type="submit" class="btn btn-primary" name="add_item"><span class="glyphicon glyphicon-plus"></span> Aggiungi</button>
    <button type="button" class="btn btn-warning" data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span> Annulla</button>
</div> 

<?php
//Add Matricola  
if(isset($_POST['add_item'])){
    $edit_id = $_POST['edit_id'];
    $nome = $_POST['nome'];
    $cognome = $_POST['cognome'];                       
    $sql = "INSERT INTO gest_personale.timbratura (nome, cognome) 
                                           VALUES ('$nome', '$cognome')";
    if ($conn->query($sql) === TRUE) {
        echo '<script>window.location.href="visualizzaTimbrature.php"</script>';
    } else {
        echo "Errore: " . $sql . "<br>" . $conn->error;
    }   
}
?>

I receive the following errors/notice: Notice: Undefined index: nome and Notice: Undefined index: cognome