Post Variable from form AND Sweetalert to PHP?

Question

I have the following code. I need the variable "$computerID" from the form and the variable "hardwareComputerName". I tested some things, but nothing worked. The variable "$computerID" is no problem.

The form:

<form id="computerRenameForm" action="computerRename" method="post">
    <input type="hidden" name="rename" value="">
    <input type="hidden" name="computerID" value="<?= htmlspecialchars($computer->id) ?>">
</form>
<button onclick="confirmComputerRename()"><i class="bi bi-trash-fill"></i> Umbenennen</button>
                    
<script>
    function confirmComputerRename()
    {
    (async () => {
        const { value: hardwareComputerName } = await Swal.fire({
            html: "Zum Umbenennen muss der Computer online sein.<br>Das Gerät wird neu gestartet.",
            icon: 'warning',
            input: 'text',
            inputAttributes: {maxlength: 15},
            showCancelButton: true,
            confirmButtonText: 'OK',
            confirmButtonColor: '#ff0000',
            cancelButtonText: 'Abbrechen',
            reverseButtons: false
        })
    
        if (hardwareComputerName) {
            document.getElementById("computerRenameForm").submit();
        }
    })()
}
</script>

The Controller:

<?php
if (isset($_POST['rename'])) {
    $computerID = $_POST['computerID'];
    $hardwareComputerName = $_POST['hardwareComputerName'];

    var_dump($computerID)."<br>"; // Works
    var_dump($hardwareComputerName); // Works not
}
?>

Answer 1

The PHP global variable $_POST contains all the data that are posted to the server. Currently, hardwareComputerName is only a variable on the client side. You need to add it to your form, so it can be posted to the server. Only then you'll be able to read it from $_POST['hardwareComputerName'].

One way to do it:

1. Add another hidden element to your form:

   <input type="hidden" name="hardwareComputerName" id="computerName">
   

2. After your dialog result, add the input value to the newly created element:

   if (hardwareComputerName) {
       document.getElementById("computerName").value = hardwareComputerName;
       document.getElementById("computerRenameForm").submit();
   }
   

Complete:

<form id="computerRenameForm" action="computerRename" method="post">
    <input type="hidden" name="rename" value="">
    <input type="hidden" name="computerID" value="<?= htmlspecialchars($computer->id) ?>">
    <input type="hidden" name="hardwareComputerName" id="computerName">
</form>
<button onclick="confirmComputerRename()"><i class="bi bi-trash-fill"></i> Umbenennen</button>

<script>
    function confirmComputerRename()
    {
    (async () => {
        const { value: hardwareComputerName } = await Swal.fire({
            html: "Zum Umbenennen muss der Computer online sein.<br>Das Gerät wird neu gestartet.",
            icon: 'warning',
            input: 'text',
            inputAttributes: {maxlength: 15},
            showCancelButton: true,
            confirmButtonText: 'OK',
            confirmButtonColor: '#ff0000',
            cancelButtonText: 'Abbrechen',
            reverseButtons: false
        })
    
        if (hardwareComputerName) {
            document.getElementById("computerName").value = hardwareComputerName;
            document.getElementById("computerRenameForm").submit();
        }
    })()
}
</script>