<input type="text" 将 id 值分配给 php 字符串

Question

我有一个模式表单来将员工工作时间戳写入 SQL 数据库。 我从下拉菜单中选择员工，并使用 id 标签通过 javascript 函数填写姓名和姓氏输入框。 当我提交表单时，使用 php 将数据写入数据库。 问题是我无法将 javascript 字符串转换为 php 字符串或将输入标记的 id 标记分配给 php 字符串。我知道在输入中写入我可以用 php value="...." 分配值。

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

无效

这里是代码

<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;
    }   
}
?>

我收到以下错误/通知：通知：未定义索引：nome 和通知：未定义索引：cognome

Answer 1

您正在使用 .innerHTML 为您的输入分配值，但这里 id="nome" 使用两个位置作为 div 并为 cognome 输入相同的位置。所以，.innerHTML 删除 div 内的 input-box 并将其替换为新文本是您提交表单时出现未定义索引错误的原因，因为不存在具有所需值的输入。

相反，在添加之前和之后使用.readOnly = true，使用.value 为输入分配值并删除.readOnly = false 属性。

演示代码：

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>