Form not submitting correctly when adding input type file

Question

I have the following function in a wordpress function:

function custom_form_display() {
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['custom_form_nonce']) && wp_verify_nonce($_POST['custom_form_nonce'], 'custom_form_send')) {
    //...handling form inputs and sending emails...

    echo '<p>Form submitted!</p>';
} else {
    wp_enqueue_script('jquery'); 

    echo '<script type="text/javascript">
        jQuery(document).ready(function($) {
            $("#num_ospiti").change(function(){
                var numOspiti = $(this).val();
                var ospitiHtml = "";
                for(var i = 1; i <= numOspiti; i++) {
                    ospitiHtml += "<div><strong>Ospite " + i + "</strong><br>";
                    ospitiHtml += "<label for=\'nome_"+i+"\'>Nome:</label>";
                    ospitiHtml += "<input type=\'text\' name=\'nome[]\' required><br>";
                    ospitiHtml += "<label for=\'cognome_"+i+"\'>Cognome:</label>";
                    ospitiHtml += "<input type=\'text\' name=\'cognome[]\' required><br>";
                    ospitiHtml += "<label for=\'sesso_"+i+"\'>Sesso:</label>";
                    ospitiHtml += "<select name=\'sesso[]\' required><option value=\'Maschio\'>Maschio</option><option value=\'Femmina\'>Femmina</option></select><br>";
                    ospitiHtml += "<label for=\'data_nascita_"+i+"\'>Data di nascita (gg/mm/aaaa):</label>";
                    ospitiHtml += "<input type=\'text\' name=\'data_nascita[]\' required><br>";
                    ospitiHtml += "<label for=\'comune_nascita_"+i+"\'>Comune di nascita:</label>";
                    ospitiHtml += "<input type=\'text\' name=\'comune_nascita[]\' required><br>";
                    ospitiHtml += "<label for=\'provincia_nascita_"+i+"\'>Provincia di nascita:</label>";
                    ospitiHtml += "<input type=\'text\' name=\'provincia_nascita[]\' required><br>";
                    ospitiHtml += "<label for=\'cittadinanza_"+i+"\'>Cittadinanza:</label>";
                    ospitiHtml += "<input type=\'text\' name=\'cittadinanza[]\' required><br>";
                    ospitiHtml += "<label for=\'tipo_documento_"+i+"\'>Tipologia di documento:</label>";
                    ospitiHtml += "<input type=\'text\' name=\'tipo_documento[]\' required><br>";
                    ospitiHtml += "<label for=\'numero_documento_"+i+"\'>N. Documento:</label>";
                    ospitiHtml += "<input type=\'text\' name=\'numero_documento[]\' required><br>";
                    ospitiHtml += "<label for=\'luogo_rilascio_"+i+"\'>Luogo/Stato di rilascio:</label>";
                    ospitiHtml += "<input type=\'text\' name=\'luogo_rilascio[]\' required><br>";
                }
                $("#ospiti").html(ospitiHtml);
            });
        });
    </script>';


    // Mostra il form
    echo '<form action="' . esc_url($_SERVER['REQUEST_URI']) . '" method="post" enctype="multipart/form-data">';
    wp_nonce_field('custom_form_send', 'custom_form_nonce');

    echo '<p><label for="struttura">La tua struttura:</label><br>
        <select name="struttura" id="struttura" required>
            <option value="">Seleziona una struttura...</option>
            <option value="Portici sul Giardino - Dimora dei Portici">Portici sul Giardino - Dimora dei Portici</option>
            <option value="Terrazza sulla Maiella - Dimora dei Portici">Terrazza sulla Maiella - Dimora dei Portici</option>
            <option value="Loft Trabocco - Dimora dei Portici">Loft Trabocco - Dimora dei Portici</option>
            <option value="Villa dei Trabocchi">Villa dei Trabocchi</option>
            <option value="Suites Montemare">Suites Montemare</option>
            <option value="Piccolo Loft Sabbia e Sassi">Piccolo Loft Sabbia e Sassi</option>
            <option value="Mare, Monti e Limoni">Mare, Monti e Limoni</option>
            <option value="Dimora Fonte Grande">Dimora Fonte Grande</option>
        </select></p>';

    // Dropdown per il numero di ospiti
    echo '<p><label for="num_ospiti">N. di Ospiti:</label><br>
        <select name="num_ospiti" id="num_ospiti" required>
            <option value="">Seleziona il numero di ospiti...</option>';
    for ($i = 1; $i <= 10; $i++) {
        echo "<option value='$i'>$i</option>";
    }
    echo '</select></p>';

    echo '<div id="ospiti"></div>';

    echo '<p><label for="email">Email:</label><br>
        <input type="email" id="email" name="email" value="" required></p>';

    // When I add this code for file upload the form seems not submitting correctly
    echo  '<input type="hidden" name="MAX_FILE_SIZE" value="30000" />
            <label for="documento_">Documento (immagine):</label>
            <input type="file" name="documento_" required></div><br>';

    echo '<p><input type="submit" value="Invia"></p>';
    echo '</form>';
}

}

I also added file_uploads=On to php.ini

When I try to submit this form the page seems to just reload and not correctly submit the form. In fact if I put var_dump($_POST); at the beginning of the function it always shows array(0) { }

If I try to not include the file upload it works just fine.

haveyou tried looking at $_FILES ? php.net/manual/en/reserved.variables.files.php — JoSSte
– JoSSte, Commented Feb 23, 2024 at 21:25
@JoSSte just tried it, after submitting the form reappears empty and both var_dump($_POST); and var_dump($_FILES); show array(0) { } — Benjamin Carafa
– Benjamin Carafa, Commented Feb 23, 2024 at 21:28
Where does custom_form_display get called? What does $_SERVER['REQUEST_METHOD'] contain, when you var_dumped the contents of $_POST & $_FILES? — C3roe
– C3roe, Commented Feb 26, 2024 at 8:46
At the end the problem was my computer idk why... On a different device, it worked (I also tried to delete cookies, but nothing) — Benjamin Carafa
– Benjamin Carafa, Commented Feb 28, 2024 at 14:50

JoSSte · Accepted Answer · 2024-03-03 21:48:58Z

I'm not familiar with wordpress, but I have modified your code, and as long as custom_form_display() is called when you submit the form as well, it works as expected.

<?php

function custom_form_display()
{
    if ($_SERVER['REQUEST_METHOD'] == 'POST' /*&& isset($_POST['custom_form_nonce']) && wp_verify_nonce($_POST['custom_form_nonce'], 'custom_form_send')*/) {
        //...handling form inputs and sending emails...
        var_dump($_POST);
        var_dump($_FILES);
        echo '<p>Form submitted!</p>';
    } else {
        //wp_enqueue_script('jquery'); 
        echo '<script type="text/javascript">
            jQuery(document).ready(function($) {
                $("#num_ospiti").change(function(){
                    var numOspiti = $(this).val();
                    var ospitiHtml = "";
                    for(var i = 1; i <= numOspiti; i++) {
                        ospitiHtml += "<div><strong>Ospite " + i + "</strong><br>";
                        ospitiHtml += "<label for=\'nome_"+i+"\'>Nome:</label>";
                        ospitiHtml += "<input type=\'text\' name=\'nome[]\' required><br>";
                        ospitiHtml += "<label for=\'cognome_"+i+"\'>Cognome:</label>";
                        ospitiHtml += "<input type=\'text\' name=\'cognome[]\' required><br>";
                        ospitiHtml += "<label for=\'sesso_"+i+"\'>Sesso:</label>";
                        ospitiHtml += "<select name=\'sesso[]\' required><option value=\'Maschio\'>Maschio</option><option value=\'Femmina\'>Femmina</option></select><br>";
                        ospitiHtml += "<label for=\'data_nascita_"+i+"\'>Data di nascita (gg/mm/aaaa):</label>";
                        ospitiHtml += "<input type=\'text\' name=\'data_nascita[]\' required><br>";
                        ospitiHtml += "<label for=\'comune_nascita_"+i+"\'>Comune di nascita:</label>";
                        ospitiHtml += "<input type=\'text\' name=\'comune_nascita[]\' required><br>";
                        ospitiHtml += "<label for=\'provincia_nascita_"+i+"\'>Provincia di nascita:</label>";
                        ospitiHtml += "<input type=\'text\' name=\'provincia_nascita[]\' required><br>";
                        ospitiHtml += "<label for=\'cittadinanza_"+i+"\'>Cittadinanza:</label>";
                        ospitiHtml += "<input type=\'text\' name=\'cittadinanza[]\' required><br>";
                        ospitiHtml += "<label for=\'tipo_documento_"+i+"\'>Tipologia di documento:</label>";
                        ospitiHtml += "<input type=\'text\' name=\'tipo_documento[]\' required><br>";
                        ospitiHtml += "<label for=\'numero_documento_"+i+"\'>N. Documento:</label>";
                        ospitiHtml += "<input type=\'text\' name=\'numero_documento[]\' required><br>";
                        ospitiHtml += "<label for=\'luogo_rilascio_"+i+"\'>Luogo/Stato di rilascio:</label>";
                        ospitiHtml += "<input type=\'text\' name=\'luogo_rilascio[]\' required><br>";
                    }
                    $("#ospiti").html(ospitiHtml);
                });
            });
        </script>';


        // Mostra il form
        echo '<form action="' . $_SERVER['REQUEST_URI'] . '" method="post" enctype="multipart/form-data">';
        //wp_nonce_field('custom_form_send', 'custom_form_nonce');

        echo '<p><label for="struttura">La tua struttura:</label><br>
            <select name="struttura" id="struttura" required>
                <option value="">Seleziona una struttura...</option>
                <option value="Portici sul Giardino - Dimora dei Portici">Portici sul Giardino - Dimora dei Portici</option>
                <option value="Terrazza sulla Maiella - Dimora dei Portici">Terrazza sulla Maiella - Dimora dei Portici</option>
                <option value="Loft Trabocco - Dimora dei Portici">Loft Trabocco - Dimora dei Portici</option>
                <option value="Villa dei Trabocchi">Villa dei Trabocchi</option>
                <option value="Suites Montemare">Suites Montemare</option>
                <option value="Piccolo Loft Sabbia e Sassi">Piccolo Loft Sabbia e Sassi</option>
                <option value="Mare, Monti e Limoni">Mare, Monti e Limoni</option>
                <option value="Dimora Fonte Grande">Dimora Fonte Grande</option>
            </select></p>';

        // Dropdown per il numero di ospiti
        echo '<p><label for="num_ospiti">N. di Ospiti:</label><br>
            <select name="num_ospiti" id="num_ospiti" required>
                <option value="">Seleziona il numero di ospiti...</option>';
        for ($i = 1; $i <= 10; $i++) {
            echo "<option value='$i'>$i</option>";
        }
        echo '</select></p>';

        echo '<div id="ospiti"></div>';

        echo '<p><label for="email">Email:</label><br>
            <input type="email" id="email" name="email" value="" required></p>';

        // When I add this code for file upload the form seems not submitting correctly
        echo  '<input type="hidden" name="MAX_FILE_SIZE" value="30000" />
                <label for="documento_">Documento (immagine):</label>
                <input type="file" name="documento_" required></div><br>';

        echo '<p><input type="submit" value="Invia"></p>';
        echo '</form>';
    }
}

?>
<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <title>file debugging</title>
</head>

<body>
    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
    <?php

    custom_form_display();
    ?>

</body>

</html>

I experimented with your code, and there should be no issue with your form (as long as the function is called on display and on submit).

looking through the browser console I did spot this:

See the first note on the hidden element on mdn.

For maintainability I would not keep the code to handle the submitted form in a function called custom_form_display() I would split it into two functions (see sample code below).

Regarding the fact that you ARE seeing your form handler and there is no data, I think your site is doing some redirects. Press F12 and look at the network tab. submit your form, and observe the number of requests that are made (if you find that the log is too busy, select html/document (depending on your browser) )
If more than the original POST is made before you see the form result, the site is redirecting to another page than you expect, and you should put your form handling code there instead.


<?php

function custom_form_display()
{

    //wp_enqueue_script('jquery'); 
    echo '<script type="text/javascript">
            jQuery(document).ready(function($) {
                $("#num_ospiti").change(function(){
                    var numOspiti = $(this).val();
                    var ospitiHtml = "";
                    for(var i = 1; i <= numOspiti; i++) {
                        ospitiHtml += "<div><strong>Ospite " + i + "</strong><br>";
                        ospitiHtml += "<label for=\'nome_"+i+"\'>Nome:</label>";
                        ospitiHtml += "<input type=\'text\' name=\'nome[]\' required><br>";
                        ospitiHtml += "<label for=\'cognome_"+i+"\'>Cognome:</label>";
                        ospitiHtml += "<input type=\'text\' name=\'cognome[]\' required><br>";
                        ospitiHtml += "<label for=\'sesso_"+i+"\'>Sesso:</label>";
                        ospitiHtml += "<select name=\'sesso[]\' required><option value=\'Maschio\'>Maschio</option><option value=\'Femmina\'>Femmina</option></select><br>";
                        ospitiHtml += "<label for=\'data_nascita_"+i+"\'>Data di nascita (gg/mm/aaaa):</label>";
                        ospitiHtml += "<input type=\'text\' name=\'data_nascita[]\' required><br>";
                        ospitiHtml += "<label for=\'comune_nascita_"+i+"\'>Comune di nascita:</label>";
                        ospitiHtml += "<input type=\'text\' name=\'comune_nascita[]\' required><br>";
                        ospitiHtml += "<label for=\'provincia_nascita_"+i+"\'>Provincia di nascita:</label>";
                        ospitiHtml += "<input type=\'text\' name=\'provincia_nascita[]\' required><br>";
                        ospitiHtml += "<label for=\'cittadinanza_"+i+"\'>Cittadinanza:</label>";
                        ospitiHtml += "<input type=\'text\' name=\'cittadinanza[]\' required><br>";
                        ospitiHtml += "<label for=\'tipo_documento_"+i+"\'>Tipologia di documento:</label>";
                        ospitiHtml += "<input type=\'text\' name=\'tipo_documento[]\' required><br>";
                        ospitiHtml += "<label for=\'numero_documento_"+i+"\'>N. Documento:</label>";
                        ospitiHtml += "<input type=\'text\' name=\'numero_documento[]\' required><br>";
                        ospitiHtml += "<label for=\'luogo_rilascio_"+i+"\'>Luogo/Stato di rilascio:</label>";
                        ospitiHtml += "<input type=\'text\' name=\'luogo_rilascio[]\' required><br>";
                    }
                    $("#ospiti").html(ospitiHtml);
                });
            });
        </script>';


    // Mostra il form
    echo '<form action="' . $_SERVER['REQUEST_URI'] . '" method="post" enctype="multipart/form-data">';
    //wp_nonce_field('custom_form_send', 'custom_form_nonce');

    echo '<p><label for="struttura">La tua struttura:</label><br>
            <select name="struttura" id="struttura" required>
                <option value="">Seleziona una struttura...</option>
                <option value="Portici sul Giardino - Dimora dei Portici">Portici sul Giardino - Dimora dei Portici</option>
                <option value="Terrazza sulla Maiella - Dimora dei Portici">Terrazza sulla Maiella - Dimora dei Portici</option>
                <option value="Loft Trabocco - Dimora dei Portici">Loft Trabocco - Dimora dei Portici</option>
                <option value="Villa dei Trabocchi">Villa dei Trabocchi</option>
                <option value="Suites Montemare">Suites Montemare</option>
                <option value="Piccolo Loft Sabbia e Sassi">Piccolo Loft Sabbia e Sassi</option>
                <option value="Mare, Monti e Limoni">Mare, Monti e Limoni</option>
                <option value="Dimora Fonte Grande">Dimora Fonte Grande</option>
            </select></p>';

    // Dropdown per il numero di ospiti
    echo '<p><label for="num_ospiti">N. di Ospiti:</label><br>
            <select name="num_ospiti" id="num_ospiti" required>
                <option value="">Seleziona il numero di ospiti...</option>';
    for ($i = 1; $i <= 10; $i++) {
        echo "<option value='$i'>$i</option>";
    }
    echo '</select></p>';

    echo '<div id="ospiti"></div>';

    echo '<p><label for="email">Email:</label><br>
            <input type="email" id="email" name="email" value="" required></p>';

    // When I add this code for file upload the form seems not submitting correctly
    echo  '<input type="hidden" name="MAX_FILE_SIZE" value="30000" />
                <label for="documento_">Documento (immagine):</label>
                <input type="file" name="documento_" required></div><br>';

    echo '<p><input type="submit" value="Invia"></p>';
    echo '</form>';
}

function custom_form_handler()
{
    if ($_SERVER['REQUEST_METHOD'] == 'POST' /*&& isset($_POST['custom_form_nonce']) && wp_verify_nonce($_POST['custom_form_nonce'], 'custom_form_send')*/) {
        //...handling form inputs and sending emails...
        var_dump($_POST);
        var_dump($_FILES);
        echo '<p>Form submitted!</p>';
    } else {
        error_log(__METHOD__ . "No form submitted");
        //die("FORM SUBMISSION ERROR")
    }
}

?>

Collectives™ on Stack Overflow

Form not submitting correctly when adding input type file

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related