1

Hi I can't seem to be getting this post to work. First, I used Typescript to create a class:

class ParticipantInfo {

constructor (public fname: string,
             public mname: string,
             public lname: string,
             public ssn: string,
             public sin: string,
             public tin: string,
             public addr1: string,
             public addr2: string,
             public addr3: string,
             public city: string,
             public state: string,
             public zip: string,
             public email: string,
             public phone: string,
             public local: string){}
}

Which created this javascript:

var ParticipantInfo = (function () {
    function ParticipantInfo(fname, mname, lname, ssn, sin, tin, addr1, addr2, addr3, city, state, zip, email, phone, local) {
    this.fname = fname;
    this.mname = mname;
    this.lname = lname;
    this.ssn = ssn;
    this.sin = sin;
    this.tin = tin;
    this.addr1 = addr1;
    this.addr2 = addr2;
    this.addr3 = addr3;
    this.city = city;
    this.state = state;
    this.zip = zip;
    this.email = email;
    this.phone = phone;
    this.local = local;
    }
    return ParticipantInfo;
}());

I used jQuery to handle the submit event on an HTML button I attached to a form element:

$(document).ready(function(){
    $("#frmInquiryForm").submit(function(event){

        event.preventDefault();

        var formData = new ParticipantInfo($('[name="f1_fname"]').val(),
                                           $('[name="f1_mname"]').val(),
                                           $('[name="f1_lname"]').val(),
                                           $('[name="f1_ssn"]').val(),
                                           $('[name="f1_sin"]').val(),
                                           $('[name="f1_tin"]').val(),
                                           $('[name="f1_addr1"]').val(),
                                           $('[name="f1_addr2"]').val(),
                                           $('[name="f1_addr3"]').val(),
                                           $('[name="f1_city"]').val(),
                                           $('[name="f1_state"]').val(),
                                           $('[name="f1_zip"]').val(),
                                           $('[name="f1_email"]').val(),
                                           $('[name="f1_phone"]').val(),
                                           $('[name="f1_local"]').val());
$.ajax({
            type: "POST",
            url:"processForm.php",
            data: JSON.stringify(formData),
            success: function(data){
                alert(data);
                window.location = 'confirmForm.php?message='+data;
            },
            error: function(xhr, ajaxOptions, thrownError){
                alert('status='+ajaxOptions);
                alert("XHR STATUS="+xhr.status+" "+ thrownError);

            }

        });

    })
})

Just for testing, all I am doing on the processForm.php page is this:

<?php
    var_dump($_POST);
?>

The alert message from the successful AJAX call only returns "array(0){}". Is the problem with JSON.stringify or is there something else anyone knows about? Thanks in advance for all your help!

Arthur
  • 13
  • 3

1 Answers1

0

Remove the JSON.stringify before sending your data.

You're not specifying the contentType in the $.ajax call, document says the default is application/x-www-form-urlencoded. jquery encodes your data to foo=bar&this=that if you pass an object to it, but here you're passing an encoded json string, thus causing unexpected behavior, which to me, is probably that php receives something like "{"foo":"bar"}", while php only auto parses urlencoded request body(because json formatted body is relative new in the standard).

So if you want to use the application/json content-type, make sure you specify it in $.ajax's options, and parse it in php like $requestArray = json_decode(file_get_contents('php://input'));. Read more in another question here.

Community
  • 1
  • 1
JJPandari
  • 3,454
  • 1
  • 17
  • 24
  • Thanks for the information PanJunjie潘俊杰! The reason why I went to stringify the object is because I also have another method of that function to do some client-side validation. When I pass the object directly, it passes the method and runs it. The parameters of the function aren't passed to the method as they are when I normally call the functions directly though so the validation fails (when it would normally pass). I'll try the second suggestion you gave and read the other question. Thanks for your help! – Arthur Jan 20 '17 at 18:37