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