Add a field to PHP form

Question

I'm new to PHP; integrating this form http://myprogrammingblog.com/2013/08/27/how-to-make-a-contact-form-with-bootstrap-3-jqueryphphtml5jqbootstrapvalidation/ into my Bootstrap page. Works great, but I'm trying to figure out how to add one more field called "Organization" to the form (one the PHP side, obviously; I understand how to add the input to the form). Can anyone help me out?

EDIT: I gathered from comments on the tutorial that I need to do the following: 1. Add an input to the form itself 2. add the new var to the JS validation 3. In PHP catch client input and add variables where save client input into mail function

I tried to do this, but the form's now not sending the info.

<form class="well" id="contactForm" name="sentMessage" novalidate="">Contact me
       <!-- Full Name -->
<div class="control-group">
<div class="controls">
        <input class="form-control" id="name" type="text" placeholder="Full Name" required="" data-validation-required-message="Please enter your name" />

</div>
</div>
        <!-- Email -->
<div class="control-group">
<div class="controls">
        <input class="form-control" id="email" type="email" placeholder="Email" required="" data-validation-required-message="Please enter your email" /></div>
</div>
        <!--Message -->
<div class="control-group">
<div class="controls"></div>
</div>
<div id="success"></div>
 <!-- For success/fail messages -->
 <button class="btn btn-primary pull-right" type="submit">Send</button>

</form>

---

/*
  Jquery Validation using jqBootstrapValidation
   example is taken from jqBootstrapValidation docs
  */
$(function() {

 $("input,textarea").jqBootstrapValidation(
    {
     preventSubmit: true,
     submitError: function($form, event, errors) {
      // something to have when submit produces an error ?
      // Not decided if I need it yet
     },
     submitSuccess: function($form, event) {
      event.preventDefault(); // prevent default submit haviour
       // get values from FORM
       var name = $("input#name").val();
       var email = $("input#email").val();
       var message = $("textarea#message").val();
        var firstName = name; // For Success/Failure Message
           // Check for white space in name for Success/Fail message
        if (firstName.indexOf(' ') >= 0) {
       firstName = name.split(' ').slice(0, -1).join(' ');
         }
     $.ajax({
                url: "./bin/contact_me.php",
                type: "POST",
                data: {name: name, email: email, message: message},
                cache: false,
                success: function() {
                // Success message
                   $('#success').html("</pre>
<div class="alert alert-success">");
 $('#success > .alert-success').html("<button class="close" type="button" data-dismiss="alert">×")
 .append( "</button>");
 $('#success > .alert-success')
 .append("<strong>Your message has been sent. </strong>");
 $('#success > .alert-success')
 .append('</div>
<pre>
');

          //clear all fields
          $('#contactForm').trigger("reset");
          },
       error: function() {
        // Fail message
         $('#success').html("</pre>
<div class="alert alert-danger">");
 $('#success > .alert-danger').html("<button class="close" type="button" data-dismiss="alert">×")
 .append( "</button>");
 $('#success > .alert-danger').append("<strong>Sorry "+firstName+" it seems that my mail server is not responding...</strong> Could you please email me directly to <a href="'mailto:me@example.com?Subject=Message_Me">me@example.com</a> ? Sorry for the inconvenience!");
 $('#success > .alert-danger').append('</div>
<pre>
');
        //clear all fields
        $('#contactForm').trigger("reset");
        },
           })
         },
         filter: function() {
                   return $(this).is(":visible");
         },
       });

      $("a[data-toggle=\"tab\"]").click(function(e) {
                    e.preventDefault();
                    $(this).tab("show");
        });
  });

/*When clicking on Full hide fail/success boxes */
$('#name').focus(function() {
     $('#success').html('');
  });

---

<?php 
// check if fields passed are empty 

 if(empty($_POST['name'])   ||    
    empty($_POST['email'])  ||
    empty($_POST['message'])||   
    !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))    
  {     
       echo "No arguments Provided!";   return false;    
  } 

  $name = $_POST['name']; 
  $email_address = $_POST['email']; 
  $message = $_POST['message'];      

 // create email body and send it    
 $to = 'me@myprogrammingblog.com'; 
 // put your email 
 $email_subject = "Contact form submitted by:  $name"; $email_body = "You have received a new message. \n\n".                 
                   " Here are the details:\n \nName: $name \n ".                  
                   "Email: $email_address\n Message \n $message"; 
 $headers = "From: contacts@myprogrammingblog.com\n"; 
 $headers .= "Reply-To: $email_address";     

 mail($to,$email_subject,$email_body,$headers); return true;             
?>

Answer 1

You need to modify a few lines of code in your ajax call and in your php code. I trust you to add the variable to email subject.

HTML

<div class="controls">
    <input class="form-control" id="organization" type="text" placeholder="Organization" required="" data-validation-required-message="Please enter your organization" /></div>
</div>

Add this to your ajax call

 var organization = $("input#organization").val();

change the data line to:

data: {name: name, email: email, organization : organization, message: message},

Replace the if clause in your php script with this if clause:

if(empty($_POST['name'])   ||    
   empty($_POST['email'])  ||
   empty($_POST['message'])||
   empty($_POST['organization'])||   
   !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))    
{     
     echo "No arguments Provided!";   return false; 
} 

And add this line:

$organization = $_POST['organization']; 

Explanation:

The created control is evaluated by the validator. When everything is fine the ajax function is called. In this function the value from element input with id organization is retrieved and stored into a variable. This variable is added to the data string of the ajax call. Which actually is an object converted to post variables. So the post variable organization is now added to the request. PHP can now retrieve the new post variable with $_POST['organization'].