Undefined data in the email of my contact form

Question

I should solve a problem with a contact form and I don't know where to put my hands anymore.

I have a form in HTML, then a validation in JS and finally an email sending in PHP.

The form data are: Name, Clinic, Email, Phone, Address and Valutation.

In the email I receive the data are:
Name : name entered in the form
Email : email entered in the form
Clinic : undefined
Phone : undefined
Address : undefined
Valutation : undefined

This is the code (HTML + JS):

 // JavaScript Document $(document).ready(function() { "use strict"; $(".contact-form").submit(function(e) { e.preventDefault(); var name = $(".name"); var email = $(".email"); var clinic = $(".clinic"); var phone = $(".phone"); var address = $(".address"); var valutation = $(".valutation"); var subject = $(".subject"); var msg = $(".message"); var flag = false; if (name.val() == "") { name.closest(".form-control").addClass("error"); name.focus(); flag = false; return false; } else { name.closest(".form-control").removeClass("error").addClass("success"); } if (email.val() == "") { email.closest(".form-control").addClass("error"); email.focus(); flag = false; return false; } else { email.closest(".form-control").removeClass("error").addClass("success"); } var dataString = "name=" + name.val() + "&email=" + email.val() + "&subject=" + subject.val() + "&msg=" + msg.val() + "&clinic=" + clinic.val() + "&phone=" + phone.val() + "&address=" + address.val() + "&valutation=" + valutation.val(); $(".loading").fadeIn("slow").html("Loading..."); $.ajax({ type: "POST", data: dataString, url: "php/contactForm.php", cache: false, success: function (d) { $(".form-control").removeClass("success"); if(d == 'success') // Message Sent? Show the 'Thank You' message and hide the form $('.loading').fadeIn('slow').html('<font color="#48af4b">Mail sent Successfully.</font>').delay(3000).fadeOut('slow'); else $('.loading').fadeIn('slow').html('<font color="#ff5607">Mail not sent.</font>').delay(3000).fadeOut('slow'); } }); return false; }); $("#reset").on('click', function() { $(".form-control").removeClass("success").removeClass("error"); }); })

 <div class="row justify-content-center"> <div class="col-lg-10 col-xl-8"> <div class="form-holder"> <form class="row contact-form" method="POST" action="php/contactForm.php" id="contactForm"> <!-- Form Select --> <div class="col-md-12 input-subject"> <p class="p-lg">This question is about: </p> <span>How satisfied are you with the service that Lab offers? </span> <select class="form-select subject" aria-label="Default select example" name="valutation"> <option>Very unsatisfied</option> <option>Unsatisfied</option> <option>Satisfied</option> <option>Very satisfied</option> <option selected>I don't have an opinion</option> </select> </div> <!-- Contact Form Input --> <div class="col-md-12"> <p class="p-lg">Your Name: </p> <span>Please enter your Dentist Name: </span> <input type="text" name="name" class="form-control name" placeholder="Your Name*"> </div> <div class="col-md-12"> <p class="p-lg">Clinic Name: </p> <span>Please enter your Clinic Name: </span> <input type="text" name="clinic" class="form-control name" placeholder="Clinic Name*"> </div> <div class="col-md-12"> <p class="p-lg">Your Email Address: </p> <span>Please carefully check your email address for accuracy</span> <input type="text" name="email" class="form-control email" placeholder="Email Address*"> </div> <div class="col-md-12"> <p class="p-lg">Phone Number: </p> <span>Please enter your/clinic phone number: </span> <input type="text" name="phone" class="form-control name" placeholder="Phone Number*"> </div> <div class="col-md-12"> <p class="p-lg">Address: </p> <span>Please enter Clinic Address: </span> <input type="text" name="address" class="form-control name" placeholder="Address*"> </div> <!-- Contact Form Button --> <div class="col-md-12 mt-15 form-btn text-right"> <button type="submit" class="btn btn-skyblue tra-grey-hover submit">Submit Request</button> </div> <!-- Contact Form Message --> <div class="col-lg-12 contact-form-msg"> <span class="loading"></span> </div> </form> </div> </div> </div>

And this is the PHP code:

<?
$name  = $_REQUEST["name"];
$email = $_REQUEST["email"];
$clinic = $_REQUEST["clinic"];
$phone = $_REQUEST["phone"];
$address = $_REQUEST["address"];
$valutation = $_REQUEST["valutation"];
$to    = "myemail@email.com"; 
if (isset($email) && isset($name)) {
    $email_subject = "Request to access to the Price List"; 
        $headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=iso-8859-1" . "\r\n";
$headers .= "From: ".$name." <".$email.">\r\n"."Reply-To: ".$email."\r\n" ;
$msg     = "From: $name<br/> Email: $email <br/> Clinic: $clinic <br/> Phone: $phone <br/> Address: $address <br/> Valutation: $valutation";
    
   $mail =  mail($to, $email_subject, $msg, $headers);
  if($mail)
    {
        echo 'success';
    }

else
    {
        echo 'failed';
    }
}

?>

Answer 1

Your issue is your selectors. You only use classes name and email for all your inputs.

<input type="text" name="phone" class="form-control name" ...>
should actually be:
<input type="text" name="phone" class="form-control phone" ...> and so on for all the other inputs. Change your selectors to the appropriate classNames.

Also, never just use ie: $(".name"); $(".email"); etc. as your selectors. As you know already $(".name"); will get every class="name" in your document. Same goes for all the other selectors. Instead, use the second argument that will infer about the specific parent (FORM, in your case): $(".name", this);

Rather, use attribute selectors like:

var clinic = $(`[name="clinic"]`, this);

where this (as I already said) refers to the parent FORMElement - since it's used inside its .submit( function.

---

IMPORTANT NOTE about validation:

never trust the client .
JS validation should be used minimally, just as a UX tool to help, inform the user about basic errors/typos. The real validation, as well as all the related error responses, should be handled on the backend side.
Currently your PHP seems quite open to XSS attacks.

You don't need a HTML <form> in order to send data to the server. All it takes to an attacker is to find your route/path (usually exposed via the form's action attribute), take a look at the names in the source and manually construct a HTTP request, and send dangerous arbitrary data to your server. Just so you keep in mind.