getting data using ajax php jquery

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?

check if you can access the URL local.healix/ex1Ex.php directly in the browser. — Ravinder Reddy
– Ravinder Reddy, Commented Jul 8, 2016 at 13:55
As a side note, you do not need cache: false since your request is a POST. The cache parameter only applies to GET and HEAD requests (with one noted caveat explained in the docs). See the docs for $.ajax() for more details. — War10ck
– War10ck, Commented Jul 8, 2016 at 14:09

Shrikant Mavlankar · Accepted Answer · 2016-07-08 14:06:37Z

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:

answered Jul 8, 2016 at 14:06

Shrikant Mavlankar

1,1531 gold badge8 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Irina Farcau Over a year ago

The alert is good, but it doesn't put the values. there are no values

RiggsFolly Over a year ago

You only echoed 'jsjsjs' do you see that?

Shrikant Mavlankar Over a year ago

As you mentioned in your question, on click of button it should show "jsjsjs" in alert.

Irina Farcau Over a year ago

yes, I edited in my file, but the values are not printed, only the "User ","Password" ..etc.

Shrikant Mavlankar Over a year ago

Please check whether you have written exactly same variable name while retrieving POST values in other file. php post array is case sensitive.

RiggsFolly · Accepted Answer · 2016-07-08 14:25:54Z

1

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);
?>

edited Jul 8, 2016 at 14:25

answered Jul 8, 2016 at 14:05

RiggsFolly

94.7k22 gold badges108 silver badges152 bronze badges

1 Comment

War10ck Over a year ago

cache: false is not needed since it's a POST request.

Skalbhile · Accepted Answer · 2016-07-08 14:01:22Z

0

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

answered Jul 8, 2016 at 14:01

Skalbhile

15613 bronze badges

Collectives™ on Stack Overflow

getting data using ajax php jquery

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related