CODEWITHSUNDEEP
phpjqueryajaxjson
user3361043
user3361043

Reputation: 371

AJAX call to a PHP file not working

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!

Upvotes: 0

Views: 113

Answers (5)

PeterKA
PeterKA

Reputation: 24638

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",!

Upvotes: 0

Ja͢ck
Ja͢ck

Reputation: 173542

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();
    // ...

Upvotes: 1

Marty
Marty

Reputation: 156

good morning,

You have to serialize the entire form, like:

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

Instead of just field by field:

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

Upvotes: 0

Jordan Running
Jordan Running

Reputation: 106027

$("#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."

Upvotes: 0

oliakaoil
oliakaoil

Reputation: 1679

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

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

Upvotes: 1

Related Questions