模态表单提交时PHP无法获取JS填充字段：Undefined index错误求助

Hey, let's figure out why your form isn't passing the nome and cognome values to PHP, and fix this up properly step by step:

1. The Root Cause: How You're Updating Input Fields #

Right now, you're using innerHTML to modify the input boxes, which is wrong. Input elements store their content in the value property—using innerHTML replaces the entire input element with plain text, so when you submit the form, those fields don't exist at all. That's why PHP throws the "Undefined index" errors.

2. Fix Duplicate IDs in Your HTML #

You have duplicate id values (e.g., both a div and an input use id="nome"), which breaks JavaScript's ability to target the correct elements. IDs must be unique in HTML.

3. Make Dropdown Value Handling More Reliable #

Your current dropdown uses the full name as the option value, which can break if an employee has a multi-part first/last name (like "Maria Anna Rossi"). Instead, store the split nome and cognome in the option value using a safe separator (like |).

4. Eliminate SQL Injection Risk #

Directly inserting $_POST values into your SQL query is a huge security hole—we'll fix this with prepared statements.

Corrected Full Code #

Modal Form & JavaScript

<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="">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; 
                        // Store split name values in option value with a separator
                        ?> 
                        <option value="<?php echo $nome . '|' . $cognome; ?>"><?php echo $dipendente; ?></option> 
                        <?php 
                    } 
                } 
                ?> 
            </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="nomeInput">Nome:</label> 
        <div class="col-sm-4"> 
            <!-- Unique ID for input -->
            <input type="text" class="form-control" id="nomeInput" name="nome" readonly> 
        </div> 
        <label class="control-label col-sm-2" for="cognomeInput">Cognome:</label> 
        <div class="col-sm-4"> 
            <!-- Unique ID for input, fixed missing <div> tag -->
            <input type="text" class="form-control" id="cognomeInput" name="cognome" readonly> 
        </div> 
    </div> 
    <br> 
    <script type="text/javascript"> 
        function nomeCognome() { 
            var selectedValue = document.getElementById("dipendente").value; 
            if (!selectedValue) return; // Exit if no option is selected
            
            // Split using the separator we defined earlier
            var [nome, cognome] = selectedValue.split('|'); 
            
            // Update input VALUE instead of innerHTML
            document.getElementById("nomeInput").value = nome; 
            document.getElementById("cognomeInput").value = cognome; 
        } 
    </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>

Corrected PHP Processing

<?php
// Add Matricola
if(isset($_POST['add_item'])){
    // Validate required fields exist first
    if(!isset($_POST['nome'], $_POST['cognome'], $_POST['edit_id'])){
        die("Campi obbligatori mancanti!");
    }
    
    $edit_id = $_POST['edit_id'];
    $nome = $_POST['nome'];
    $cognome = $_POST['cognome'];
    
    // Use prepared statements to prevent SQL injection
    $sql = "INSERT INTO gest_personale.timbratura (nome, cognome) VALUES (?, ?)";
    $stmt = $conn->prepare($sql);
    $stmt->bind_param("ss", $nome, $cognome); // "ss" = two string parameters
    
    if ($stmt->execute()) {
        echo '<script>window.location.href="visualizzaTimbrature.php"</script>';
    } else {
        echo "Errore: " . $stmt->error;
    }
    $stmt->close();
}
?>

What These Changes Do: #

• Updates input fields using the value property, ensuring the form submits valid data
• Fixes duplicate IDs so JavaScript targets the correct elements
• Makes name splitting reliable even for multi-part names
• Eliminates SQL injection risks with prepared statements
• Adds basic field validation to avoid unexpected errors

内容的提问来源于stack exchange，提问作者Massimo D. N.