I have a form made in HTML and JQuery that should pass data to a php file to send out an email with the form's datas. My form is structured so that user can click a button and add other fields, as many as necessary.
How can I automatically create those fields variables in my php file?
This is my HTML code:
<form action="sendmailseminari.php" class="form common_font" method="post">
<div class="choosecontact">
<div id="showfieldsem">
<h4 class="parteciptitle">Partecipante principale</h4>
<div class="field inline-block name">
<label for="input_type" class="field-label common_font regular medium_font_size form_color">Ente, Comune, Azienda</label>
<input id="input_type" name="input_type" class="field-input" type="text" required>
</div>
<div class="field inline-block name">
<label for="input_name" class="field-label common_font regular medium_font_size form_color">Nome Cognome</label>
<input id="input_name" name="input_name" class="field-input" type="text" required>
</div>
<div class="field inline-block name">
<label for="input_tel_sem" class="field-label common_font regular medium_font_size form_color">Numero di telefono</label>
<input id="input_tel_sem" name="input_tel_sem" class="field-input" type="text" required>
</div>
<div id="emailsem" class="field inline-block email">
<label for="input_email_sem" class="field-label common_font regular medium_font_size form_color">Indirizzo Email (consiglio: email personale che controlli)</label>
<input id="input_email_sem" name="input_email_sem" class="field-input" type="email" required>
</div>
<div id="InputsWrapper" >
</div>
<div class="contbtnaddrempart">
<a href="javascript:void(0)" id="AddMoreFileBox" class="btn btn-primary"><span class="fa fa-user-plus"></span> Aggiungi Partecipante</a>
<a href="javascript:void(0)" id="RemoveMoreFileBox" class="btn btn-secondary" style="display:none"><span class="fa fa-eraser"></span> Reset</a>
</div>
<div class="field msg">
<label for="input_msg_sem" class="field-label common_font regular medium_font_size form_color">Se vuoi, fai la tua domanda sul DPO</label>
<input id="input_msg_sem" name="message" class="field-input" type="text">
</div>
<div class="inline-block row">
<div class="col-xs-2">
<input id="input_privacycheck_sem" name="PRIVACYCHECK" class="privacycheck" type="checkbox" required>
</div>
<div class="col-xs-10">
<label for="input_checkprivacy_sem" class="privacyconsent">Acconsento al trattamento dei dati personali come indicato nella Privacy Policy ai fini di questo servizio.</label>
</div>
</div>
<button type="submit" class="send-btn center common_element_color common_font medium body_font_size white"><span class="fa fa-chevron-right"></span> Invia richiesta</button>
</div>
</div>
</form>
This is my SCRIPT:
/*---------------------------
add/remove partecipanti
----------------------------*/
var InputsWrapper = $("#InputsWrapper");
var AddButton = $("#AddMoreFileBox");
var RemoveButton = $("#RemoveMoreFileBox");
var x = InputsWrapper.length;
var FieldCount = 1;
$(AddButton).click(function(e)//on add input button click
{
FieldCount++;
$(InputsWrapper).append('<h4 class="parteciptitle">Partecipante ' + FieldCount + '</h4><div class="field inline-block name"><label for="input_type' + FieldCount + '" class="field-label common_font regular medium_font_size form_color">Ente, Comune, Azienda</label><input id="input_type' + FieldCount + '" name="input_type' + FieldCount + '" class="field-input" type="text" required></div><div class="field inline-block name"><label for="input_name' + FieldCount + '" class="field-label common_font regular medium_font_size form_color">Nome Cognome</label><input id="input_name' + FieldCount + '" name="input_name' + FieldCount + '" class="field-input" type="text" required></div><div class="field inline-block name"><label for="input_tel_sem' + FieldCount + '" class="field-label common_font regular medium_font_size form_color">Numero di telefono</label><input id="input_tel_sem' + FieldCount + '" name="input_tel_sem' + FieldCount + '" class="field-input" type="text" required></div><div id="emailsem' + FieldCount + '" class="field inline-block email"><label for="input_email_sem' + FieldCount + '" class="field-label common_font regular medium_font_size form_color">Indirizzo Email (consiglio: email personale che controlli)</label><input id="input_email_sem' + FieldCount + '" name="input_email_sem' + FieldCount + '" class="field-input" type="email" required></div>');
x++;
return false;
});
$(RemoveButton).click(function(e)//on remove input button click
{
$(InputsWrapper).empty('');
FieldCount = 1;
});
/* mostra/nasconde bottone reset partecipanti */
$("#AddMoreFileBox").click(function(){
$("#RemoveMoreFileBox").show();
});
/* torna su quando clicco sul bottone reset partecipanti */
$("#RemoveMoreFileBox").click(function() {
$('html, body').animate({
scrollTop: $(".choosecontact").offset().top
}, 300);
$("#RemoveMoreFileBox").hide();
});
/*-------------------------
add form function
-------------------------*/
$('.form').on('focus','.field-input',function(){
$(this).parent().addClass('is-focused has-label');
});
$('.field-input').each(function(){
if($(this).val() != ''){
$(this).parent().addClass('has-label');
}
});
$('.form').on('blur','.field-input',function(){
var $parent = $(this).parent();
if($(this).val() == ''){
$parent.removeClass('has-label');
}
$parent.removeClass('is-focused');
});
And this is my PHP:
<?php
// Variables
$type = trim($_POST['input_type']);
$name = trim($_POST['input_name']);
$phone = trim($_POST['input_tel_sem']);
$email = trim($_POST['input_email_sem']);
$message = trim($_POST['message']);
// Email address validation - works with php 5.2+
function is_email_valid($email) {
return filter_var($email, FILTER_VALIDATE_EMAIL);
}
if( isset($input_type) && isset($input_name) && isset($input_tel_sem) && isset($input_email_sem) && isset($message) && is_email_valid($input_email_sem) ) {
// Avoid Email Injection and Mail Form Script Hijacking
$pattern = "/(content-type|bcc:|cc:|to:)/i";
if( preg_match($pattern, $input_name) || preg_match($pattern, $input_email_sem) || preg_match($pattern, $message) ) {
exit;
}
// Email will be send
$to = "myemailaddress@myemaildomain.extension"; // Change with your email address
$sub = "$name from Agentar"; // You can define email subject
// HTML Elements for Email Body
$body = <<<EOD
<strong>Tipo:</strong> $input_name <br>
<strong>Nome:</strong> $input_name <br>
<strong>Telefono:</strong> $input_tel_sem <br>
<strong>Email:</strong> <a href="mailto:$input_email_sem?subject=feedback" "Iscrizione Seminario SAEV da LP DPO">$input_email_sem</a> <br> <br>
<strong>Messaggio:</strong> $message <br>
EOD;
//Must end on first column
$headers = "Da: $input_name <$input_email_sem>
";
$headers .= 'MIME-Version: 1.0' . "
";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "
";
// PHP email sender
mail($to, $sub, $body, $headers);
}
?>
As you can see my PHP file at the moment can handle only the existent fields already created in the form but I need to let it manage and send also the fields that user could create clicking the add button "Aggiungi Partecipante".
How could I do that? A suggestion with code example would be really really appreciated.
Thanks in advance.