Here is my javascript
code:
function submitForm() {
var name = document.getElementsByName('name').value
,email = document.getElementsByName('email').value
,subject = document.getElementsByName('subject').value
,body = document.getElementsByName('body').value;
$.post('php/sendForm.php', {name: name,email: email,subject: subject,body: body});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="form-group inline-block" method="post" action="php/sendForm.php" >
<input type="text" class="form-control" name="name" placeholder="Name"></div>
<div class="form-group inline-block">
<input type="email" class="form-control" name="email" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">Send me an email!</small>
<input type="text" class="form-control" name="subject" aria-describedby="emailHelp" placeholder="Subject">
</div>
<div class="form-group">
<label for="exampleTextarea">Message</label>
<textarea class="form-control" name="body" rows="3">
</textarea>
</div>
<button onclick="submitForm()" type="submit" class="btn btn-primary">Submit </button>
</form>
All of this is meant to be read by php/sendForm.php
. However, I can't seem to read the name, email, subject and body variables in my php
file. Here is the php
code:
$name = $_POST['name'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$body = $_POST['body'];
// The message
$message .= $email. $name. $body ;
</div>
The issue is likely to be that you are not using the javascript correctly in your submitForm function -
the getElementsByName returns an array-like collection of elements - so you need to indicate which one you are selecting. Note that I have added [0] to each of the named elements.
function submitForm() {
var name = document.getElementsByName('name')[0].value
,email = document.getElementsByName('email')[0].value
,subject = document.getElementsByName('subject')[0].value
,body = document.getElementsByName('body')[0].value;
$.post('php/sendForm.php', {name: name,email: email,subject: subject,body: body});
}
Also - you should not have an action or method for the form if you are submitting it via AJAX - otherwise you will submit the form and then the re will be no values for the AJAX function to post.
One simply way to prevent double submission is to remove the button from inside the form and have it have a type="button" attribute:
<button onclick="submitForm()" type="button" class="btn btn-primary">Submit</button>
and I would go so far as to combine the onlclick event handler and ajax call and remove the inline js (note that I gave the form the name of "myForm" and am using the serialize() method to gather all the relvant data from the form without specifically getting each inputs' value:-
//html
<button id="submitFormButton" type="button" class="btn btn-primary">Submit</button>
//js
$('#submitFormButton').click(function(){
var formData = $('[name=myForm]').serialize();
var URL = 'php/sendForm.php';
$.post(URL, formData,function( data ) {
//function to perfrom on the returned data
});
});
You did not call preventDefault
on the event. This means the form is submitted (using GET and to its own URL as these are default values)
Try:
<button onClick="submitForm(); return false;">