Retrieving checkbox values from contact form using PHP, HTML5 and AJAX

Question

I have created PHP/ AJAX contact form which sends data such as email, names, and the message text. So far it sends these to my mail correctly. However, I am unable to make it send the checkbox values below to the form handler. Below is the HTML5 I have written:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website Contact Form</title>
<script> 
function _(id){ return document.getElementById(id); } 
function submitForm(){
   _("mybtn").disabled = true; _("status").innerHTML = 'please wait ...'; 
   var formdata = new FormData(); formdata.append( "n", _("n").value ); 
   formdata.append( "e", _("e").value ); 
   formdata.append( "m", _("m").value ); 
   var ajax = new XMLHttpRequest(); 
   ajax.open( "POST", "example_parser.php" ); 
   ajax.onreadystatechange = function() { 
       if(ajax.readyState == 4 && ajax.status == 200) { 
             if(ajax.responseText == "success"){ 
                  _("my_form").innerHTML = 'Thanks '+_("n").value+
                    ', your message has been sent.'; } 
                  else { 
                       _("status").innerHTML = ajax.responseText; 
                       _("mybtn").disabled = false; } } } ajax.send( formdata); }
</script>
</head>
<body>
<form id="my_form" onsubmit="submitForm(x); return false;">
  <p><input id="n" placeholder="Name" required></p>
  <p><input id="e" placeholder="Email Address" type="email" required></p><br/>
  <p>Please select your favorite animals below</p>
  <input type="checkbox" name="animals" value="Cats"/>Cats<br/>
  <input type="checkbox" name="animals" value="Dogs"/>Dogs<br/>
  <input type="checkbox" name="animals" value="Rabbits"/>Rabbits<br/>
  <input type="checkbox" name="animals" value="Aligators"/>Aligators<br/><br/>
  <textarea id="m" placeholder="write your message here" rows="10" required></textarea>
    <p><input id="mybtn" type="submit" value="Submit Form"> <span id="status"></span></p>
</form>
</body>
</html>

Here is the form handler.

<?php
    if( isset($_POST['n']) && isset($_POST['e']) && isset(&_POST['a']) && 
    isset($_POST['m']) ){
    $n = $_POST['n']; // HINT: use preg_replace() to filter the data
    $e = $_POST['e'];
    $services = $_POST['a'];
    $m = nl2br($_POST['m']);
    $to = "mydomain@gmail.com"; 
    $from = $e;
    $subject = 'Contact Form Message';
    $message = '<b>Name:</b> '.$n.' <br><b>Email:</b> '.$e.'<br/><b>Services 
            required:</b>'.$services.' <p>'.$m.'</p>';
    $headers = "From: $from\n";
    $headers .= "MIME-Version: 1.0\n";
    $headers .= "Content-type: text/html; charset=iso-8859-1\n";
    if( mail($to, $subject, $message, $headers) ){
    echo "success";
    } else {
    echo "The server failed to send the message. Please try again later.";
     }
   }
 ?>

Can any one please show me how to capture the values of the checkboxes and forward them to the form handler using the AJAX code provided above. I am still unfamiliar with PHP and AJAX framework. Your assistance would be highly appreciated.

source3 of PHP and AJAX codePHP,AJAX, HTML5 contact form

I think you have to read some docs before you ask here. For example you can use jQuery Ajax() to make an ajax call. Tips: if you want to retrieve the check box data i think you must use name="animals[]" . [https://stackoverflow.com/questions/4997252/get-post-from-multiple-checkboxes](https://stackoverflow.com/questions/4997252/get-post-from-multiple-checkboxes) — Sfili_81, Jun 13 '18 at 11:56

score 1 · Answer 1 · answered Jun 13 '18 at 11:59

You can give name as an array, and then access that in request as $_REQUEST[variable_name]

Like :

<input type="checkbox" name="animals[]" value="Cats"/>Cats<br/>
 <input type="checkbox" name="animals[]" value="Dogs"/>Dogs<br/>
 <input type="checkbox" name="animals[]" value="Rabbits"/>Rabbits<br/>
 <input type="checkbox" name="animals[]" value="Aligators"/>Aligators<br/><br/>

Access these with $_REQUEST['animals']. I am using here $_REQUEST because you have not mentioned form method(GET/POST)

Hetal Chauhan · Answer 2 · 2018-06-13T12:29:17.540

As per your requirement, there is more easy way do achieve this. If you want to submit form with ajax, then you can use serialize() function like this. This function will give you the checkbox values also. You do not need to append each and every element value. This function will give you all element's values of the form.

In Your javascript code, replace below three lines:

var formdata = new FormData(); formdata.append( "n", _("n").value ); 
formdata.append( "e", _("e").value ); 
formdata.append( "m", _("m").value );

With this single line:

var formdata  = $("#my_form").serialize();

This serialize function will give you all request parameters in your ajax file. To see those request parameters along with parameters names, you can simple do print_r($_REQUEST); in your ajax file. So you will see the requested parameters array in console. After then you can do your stuff in your ajax file as you require.

One more thing, you have to put your checkbox names in form like this:

<input type="checkbox" name="animals[]" value="Cats"/>Cats<br/>
<input type="checkbox" name="animals[]" value="Dogs"/>Dogs<br/>
<input type="checkbox" name="animals[]" value="Rabbits"/>Rabbits<br/>
<input type="checkbox" name="animals[]" value="Aligators"/>Aligators

Retrieving checkbox values from contact form using PHP, HTML5 and AJAX

2 Answers2