AJAX call to a PHP file not working

Question

I am practicing doing simple AJAX calls to localhost but experiencing trouble. What I'm trying to do is send two textbox form values to PHP and then have it return a message to an empty div in my form upon successful reception via AJAX. My test.php is like this:

<?php

$num = htmlentities(substr($_POST["num"], 0, 7), ENT_QUOTES);
$name = htmlentities(substr($_POST["name"], 0, 50), ENT_QUOTES);

$result = "'$num ' + 'and' + ' $name' + ' values have been successfully AJAXd'";

echo json_encode($result);

jQuery:

  $("#form").submit(function() {
    event.preventDefault();
    $("#msgcontainer").html("");
    $.ajax({
    url: "test.php",
    data: ("#num").serialize(), ("#name").serialize(),
    contentType: "application/json; charset=utf-8",
    type: "POST",   
    dataType: "json"
      success: function(response) {
        $("#msgcontainer").html(response);
      }
    });
  }

When I try to submit, the page simply reloads and adds form values to the URL. I've been trying to solve this for about a day now, so any help would be greatly appreciated.

EDIT:

I figured it out by trying things from every response. Not sure why it works without serialization... If someone knows, please explain. Working jQuery code:

  $("#form").submit(function(event) {
    event.preventDefault();
    $("#msgcontainer").html("");
    $.ajax({
    url: "test.php",
    data: {
            num: $("#num").val(),
            name: $("#name").val()
          },
    type: "POST",
    dataType: "json",
      success: function(response) {
        $("#msgcontainer").html(response);
      }
    });
  });

Thank you for the help!

$result = "{$num} and {$name} values have been successfully AJAXd"; would be the correct format — Brett Santore
– Brett Santore, Commented Jul 1, 2014 at 14:58
Could you share the HTML as well? Btw, you should have seen parse errors in the JavaScript console. — Ja͢ck
– Ja͢ck, Commented Jul 1, 2014 at 15:01

Ja͢ck · Accepted Answer · 2014-07-01 15:04:05Z

1

Two things stand out immediately:

data: ("#num").serialize(), ("#name").serialize(),
contentType: "application/json; charset=utf-8",

The first should be this (assuming you have two text boxes):

data: {
    num: $('#num').val(),
    name: $('#name').val()
},

And the contentType: line should not be there, otherwise you'll have an empty $_POST.

Lastly, event should be a function argument, i.e.:

$("#form").submit(function(event) {
    event.preventDefault();
    // ...

edited Jul 1, 2014 at 15:04

answered Jul 1, 2014 at 14:59

Ja͢ck

174k39 gold badges269 silver badges317 bronze badges

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

4 Comments

user3361043 Over a year ago

This works, but why does it work without serialization?

Ja͢ck Over a year ago

@user3361043 When you pass a simple object as data: jQuery will do the serialisation for you.

user3361043 Over a year ago

I see. So when is it needed?

Ja͢ck Over a year ago

You can use $(this).serialize() to get a string which you can then pass using data:; this comes in handy when you have a number of input fields and you don't require special handling of the values.

oliakaoil · Accepted Answer · 2014-07-01 14:59:35Z

1

Your data parameter in your AJAX call is wrong, should be something like:

data: { num: $('#num').val() , name: $('#name').val() }

answered Jul 1, 2014 at 14:59

oliakaoil

1,7193 gold badges18 silver badges41 bronze badges

Comments

Jordan Running · Accepted Answer · 2014-07-01 15:00:02Z

0

$("#form").submit(function() {
  event.preventDefault();

event isn't defined anywhere. I'm guessing you meant ...submit(function(event) {.

You should be seeing an error in the JavaScript console telling you "event is not defined" or "TypeError: Cannot read property 'preventDefault' of undefined."

answered Jul 1, 2014 at 15:00

Jordan Running

107k18 gold badges193 silver badges189 bronze badges

Comments

Marty · Accepted Answer · 2014-07-01 15:01:56Z

0

good morning,

You have to serialize the entire form, like:

$("#yourform").serialize();

Instead of just field by field:

("#num").serialize(), ("#name").serialize()

answered Jul 1, 2014 at 15:01

Marty

1562 silver badges5 bronze badges

Comments

PeterKA · Accepted Answer · 2014-07-01 15:06:19Z

0

The data is not being sent properly. Consider replacing:

data: ("#num").serialize(), ("#name").serialize(),

With:

data: $(this).serialize(),

And then you may want to edit your PHP script so that you concatenate the strings instead of summing them.

Also pass the event param or simply use the following:

$("#form").submit(function() {
    var event = arguments[0];
    event.preventDefault();
    ....
});

I doubt that you need contentType: "application/json; charset=utf-8",!

edited Jul 1, 2014 at 15:06

answered Jul 1, 2014 at 15:01

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Collectives™ on Stack Overflow

AJAX call to a PHP file not working

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related