getting data using ajax php jquery - php

Question

I made a submit form using php and ajax and don't get it why it doesn't work.
My code:
ex1.php
<form id="myForm">
<p> Firstname: <input type="text" name= "firstName"</p>
<p> Lastname<input type="text" name = "lastName" id="lastName"</p>
<p> Password: <input type="password" name= "password" id="myPass"> </p>
<p> Email: <input type="text" name="email" id="myEmail"></p>
<p> Age: <input type="text" name="age" id="myAge"> </p>
<input type="submit" value="submit" id="subm">
</form>
<script>
$(document).ready(function(){
$("#subm").click(function(){
var firstName = $("#firstName").val();
var lastName = $("#lastName").val();
var password = $("#myPass").val();
var email = $("#myEmail").val();
var age = $("#myAge").val();
var dataString = "Firstname: " + firstName + ", Lastname: " + lastName + ", Email: " + email + " , Password: " + password + "Age: " + age;
$.ajax({
type: "POST",
url: "ex1Ex.php",
data: dataString,
cache: false,
succes: function(result){
alert(result);
}
});
});
});
externFile:
<?php
$firstName = $_POST['firstName'];
$lastName = $_POST['lastName'];
$password = $_POST['password'];
$email = $_POST['email'];
$age = $_POST['age'];
echo 'jsjsjs';
?>
When I enter the values, after pressing the button, in console it appears
ex1?firstName=a&lastName=ww&password=111&email=a&age=11:59 POST http://local.healix/ex1Ex.php 500 (Internal Server Error)
The problem must be with the file ex1Ex.php, but I don't get it what.Any suggestions?

Answer 1

Change your jquery function like following.
$(document).ready(function () {
$("#subm").click(function (event) {
event.preventDefault();
var firstName = $("#firstName").val();
var lastName = $("#lastName").val();
var password = $("#myPass").val();
var email = $("#myEmail").val();
var age = $("#myAge").val();
var dataString = "Firstname: " + firstName + ", Lastname: " + lastName + ", Email: " + email + " , Password: " + password + "Age: " + age;
$.ajax({
type: "POST",
url: "ex1Ex.php",
data: dataString,
cache: false,
success: function (result) {
alert(result);
}
});
});
});
I think you have to prevent the default php form submission using event.preventDefault();
Also, please correct the spelling mistake; you have written succes: instead of success:

Answer 2

Pass your data out in an object .ajax will deal with that nicely converting it into the $_POST array. You also dont need to go through interim declared variables, get the data right out of the DOM straight into the data property of the .ajax call
$(document).ready(function(){
$("#subm").click(function(e){
// stop the form submitting in the normal way as well as through AJAX
e.preventDefault();
$.ajax({
type: "POST",
url: "ex1Ex.php",
data: {Firstname: $("#firstName").val(),
Lastname: $("#lastName").val(),
Email: $("#myEmail").val(),
Password: $("#myPass").val(),
Age: $("#myAge").val()
},
//cache: false,
success: function(result){ // spelling corrected
alert(result);
}
});
});
});
Then remember that whatever the name you use for each parameter in the javascript is the name that will be used in the $_POST array so if you use Firstname in javascript you should expect a $_POST['Firstname'] (case sensitive)
<?php
$firstName = $_POST['Firstname'];
$lastName = $_POST['Lastname'];
$password = $_POST['Password'];
$email = $_POST['Email'];
$age = $_POST['Age'];
//echo "I received: $firstName, $lastName, $password, $email, $age";
// or better still while testing
echo json_encode($_POST);
?>

Answer 3

I think the problem with keys which you have used while posting in from ajax request eg. for first name its "Firstname" and you are accessing it with key 'firstName'
php post array is case sensitive