<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

Answer

You are using .innerHTML to assign values to your input but here id="nome" is use two place for div and input same for cognome .So, .innerHTML remove input-box inside the div and replace it with new texts that’s the reason when you submit your form you get undefined index error because there is no inputs exists with the required value .

Instead , use .value to assign value to input and remove .readOnly = false attribute before adding and after adding use .readOnly = true.

Demo Code :

function nomeCognome() {
//remove readonly first
 document.getElementById("nome").readOnly = false;
  document.getElementById("cognome").readOnly = false;
  var x = document.getElementById("dipendente").value;
  var [a, b, c] = x.split(' ');
  //use .value to add value in input values
  document.getElementById("nome").value = [a];
  document.getElementById("cognome").value = [b, c].join(' ');
  //add readonly again..
  document.getElementById("nome").readOnly = true;
  document.getElementById("cognome").readOnly = true;
}

<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>

        <option>
          Sss abc
        </option>
        <option>
          Sss11 abc1
        </option>

      </select>
    </div>

    <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">
      <input type="text" class="form-control" id="nome" name="nome" readonly="readonly"> </div>
    <label class="control-label col-sm-2" for="cognome">Cognome:</label>
    <div class="col-sm-4">
      <input type="text" class="form-control" id="cognome" name="cognome" readonly="readonly"> </div>
  </div>
  <br>

</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>