Add a field to PHP form
Sebastian Wright 
I'm new to PHP; integrating this form 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 name="sentMessage" novalidate="">Contact me <!-- Full Name -->
<div>
<div> <input type="text" placeholder="Full Name" required="" />
</div>
</div> <!-- Email -->
<div>
<div> <input type="email" placeholder="Email" required="" /></div>
</div> <!--Message -->
<div>
<div></div>
</div>
<div></div> <!-- For success/fail messages --> <button 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>"); $('#success > .alert-success').html("<button type="button">×") .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>"); $('#success > .alert-danger').html("<button type="button">×") .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:?Subject=Message_Me"></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 = ''; // 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: \n"; $headers .= "Reply-To: $email_address"; mail($to,$email_subject,$email_body,$headers); return true;
?>1 Answer
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> <input type="text" placeholder="Organization" required="" /></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'].
