Submitting a form using JSON and reading it with PHP

Question

I can't seem to figure this out and I've tried everything. I want a form to submit my data as a JSON, and then head to a PHP page, where it outputs the results from the JSON data.

I have it set as the following but this does absolutely nothing.

Form code:

  <form name="login" onsubmit="SendForm();">
  <input class="textbox" type="text" name="username" placeholder="Username"><p>
  <input class="textbox" type="password" name="password" placeholder="Password"><p>
  <br><input class="submit" type="submit" value="Log in!">
  </form>

Send Form:

function SendForm() {
 var username = document.login.username.value;
 var password = document.login.password.value;
 var xhr = new XMLHttpRequest();
 xhr.open("POST", "/");
 xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');

 var postData = {
  object: { child1: username, child2: password }
 }
 xhr.send(postData);
 return true;
}

PHP code to read it:

<?php
$json = @file_get_contents('php://input');
$array = json_decode($json, true);
if (empty($array))
    echo 'empty';
else
    print_r($array);
?>

Any help at all would be great. Thanks!

score 0 · Answer 1 · edited May 23 '17 at 12:27

0

the thing i've noticed is that you should return false in your SendForm function to cancel submit and prevent form to change the page. Otherwise form will work as the regular html form, sending data to "action" param and etc.

Also you're trying to send JSON but passing just an object. You should serialize your object to JSON

Serializing an object to JSON

PHP wants proper json string in input so json_decode fails to decode string to JSON in your case and you're getting "empty". You can use var_dump($json); to view the contents of $json and check whether there's a proper json string

edited May 23 '17 at 12:27

Community

1
1

answered Oct 22 '14 at 15:58

Ivan Fateev

1,032
1
10
26

I switched it to return false but it still doesn't work. It just prints 'empty'. – user2019594 Oct 22 '14 at 16:02
This prints 'string(0) ""' – user2019594 Oct 22 '14 at 16:24

score 0 · Answer 2 · answered Oct 22 '14 at 16:04

0

You need to call JSON.stringify() to convert the Javascript object to JSON:

xhr.send(JSON.stringify(postData));

answered Oct 22 '14 at 16:04

Barmar

741,623
53
500
612

It still does nothing. – user2019594 Oct 22 '14 at 16:10

M. Page · Answer 3 · 2014-10-22T16:37:19.497

0

There are several problems in your code: 1. you should not use form onSubmit() but onclick() on the button. 2. As Barmar says you need to use JSON.stringify() 3. Not sure if xhr.open("POST", "/"); is correct in your situation (I have replaced it with test.php for testing)

<script>
     function SendForm() {
         var username = document.login.username.value;
         var password = document.login.password.value;
         var xhr = new XMLHttpRequest();
         xhr.open("POST", "test.php");
         xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');

         var postData = {
             object: { child1: username, child2: password }
         }
         xhr.send(JSON.stringify(postData));
     }
 </script>

 <form name="login">
     <input class="textbox" type="text" name="username" placeholder="Username"><p>
     <input class="textbox" type="password" name="password" placeholder="Password"><p>
     <br><input class="button" type="button" onclick="SendForm();" value="Log in!">
 </form>

edited Oct 22 '14 at 16:37

answered Oct 22 '14 at 16:08

M. Page

2,694
2
20
35

Still prints empty. I did exactly as you requested. I put my php script on a test.php and then when I submit form, it brings me to a php page that just prints 'empty'. – user2019594 Oct 22 '14 at 16:22
Strange: not on my machine ! What do you mean by: just prints 'empty' ? It is an Ajax call: it should not print anything in the page. – M. Page Oct 22 '14 at 16:34
I'm trying to get it so that so it refreshes the page (or goes to another page) and displays the JSON data. – user2019594 Oct 22 '14 at 16:42
If you want to display the form data in another page, then you don't need an Ajax call. – M. Page Oct 22 '14 at 16:51
Then how should I go about doing it? – user2019594 Oct 22 '14 at 17:00
Maybe you might look at a PHP<->Ajax form handling tutorial. http://code.tutsplus.com/tutorials/submit-a-form-without-page-refresh-using-jquery--net-59 uses JQuery which maybe you don't need but it is quite well explained. – M. Page Oct 22 '14 at 17:07

score 0 · Answer 4 · answered Oct 22 '14 at 16:09

Try this:

$ch=curl_init(@file_get_contents('php://input'););
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$r=curl_exec($ch);
curl_close($ch);

$arr = json_decode($r,true);
if (empty($arr))
    echo 'empty';
else
    print_r($arr);

NOTE: You must have Curl enabled.

Submitting a form using JSON and reading it with PHP

4 Answers4