AJAX calling PHP Array - Using jQuery / JSON

Question

So I have an array of default values in a php array the file (backend.php) has multiple functions and acts. I want to target just the array with the act="default". I need to take the the encoded json php array and populate and html form with it.

html page - frontend.html

<html>
    <head>
    </head>
    <body>
        <h1>Form Validation</h1>
        <form id="PersonForm">
            Name:
                <input id="name" type ="text" name="name"></input>
                <br><br>
            Postal Code:
                <input id="postal" type ="text" name="postal"></input>
                <br><br>
            Phone Number:
                <input id="phone" type ="text" name="phone"></input>
                <br><br>
            Address:
                <input id="address" type ="text" name="address"></input>
                <br><br>
            <input type="submit"></input>
        </form>
        <div id= "content"></div>
        <a href="frontend.html">Refresh</a>
        <a id="InsertDefault" href="#">Insert Default Data</a>
        <br><br>
        <ul id="errors"></ul>
        <p id="success"></p>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="main.js" type="text/javascript"></script>
    </body>
</html>

php page - backend.php

<?php
if ($_REQUEST['act'] == 'default'){
    $defaultData = array(
        'name' => "Jane",
        'postal' => "L5B4G6",
        'phone' => "9055751212",
        'address' => "135 Fennel Street"
    );
    echo json_encode($defaultData);
}
else if...
?>

main.js page (errors here)

$(document).ready(function()
{
  $("#InsertDefault").click(function()
  {      
  // make an AJAX call here, and place results into the form
    $(document).ready(function(){
    $('#content').load('backend.php', {'default':'defaultData'},  //this format
    function (){ $('#content').html('these are the default values')} 
    );

    // prevents link click default behaviour
    defaultData.preventDefault();
    return false;
    });


  $("#PersonForm").submit(function()
  {
     // Clear any success or error messages
     $("#success").html("");
     $("#errors").empty();
     // make an AJAX call here, and set error or success accordingly
    // prevents submit button default behaviour
    return false;
  });  
});

What are the actual errors? Also, at the end of your main.js there's a stray character ` — Michael Hommé
– Michael Hommé, Commented Dec 7, 2015 at 22:30
All the javascript block has to be re-written, you have a document.ready inside a click handler inside the document.ready. Also the form submit handler is inside the click handler. — Alex Andrei
– Alex Andrei, Commented Dec 7, 2015 at 22:36
I assume that on click you want to load the default values from the php script? the json string. Is this correct? — Alex Andrei
– Alex Andrei, Commented Dec 7, 2015 at 22:37

Tristan · Accepted Answer · 2015-12-07 22:54:28Z

Instead of using .load it would be better to use $.ajax or $.post since $.load will set the content of the selected returned data (which should be either text or HTML). In your case you want to return json so that you can set the form element values.

$(document).ready(function()
{
    $("#InsertDefault").click(function(e)
    {
        // prevents link click default behaviour
        e.preventDefault();
        // make an AJAX call here, and place results into the form
        $.ajax({
            url: 'backend.php',
            type: 'post',
            data: {
                act:'default'
            },
            dataType: 'json',
            success: function(data) {
                // set the form values
                $('[name=name]').val(data.name);
                $('[name=postal]').val(data.postal);
                $('[name=phone]').val(data.phone);
                $('[name=address]').val(data.address);
                // display message
                $('#content').html('Fields filled in with default values');
            },
            error: function() {
                // handle your error
                console.log('error');
            }
        });
        return false;
    });

    $("#PersonForm").submit(function()
    {
        // Clear any success or error messages
        $("#success").html("");
        $("#errors").empty();
        // make an AJAX call here, and set error or success accordingly
        // prevents submit button default behaviour
        return false;
    });  
});

Since your AJAX call is expecting json return you need to use header('Content-Type: application/json'); in your php script to set the data type.

It's also a good idea to use output buffering (see ob_start() and ob_clean() below) so that any notices outputted by php do not dirty the json your AJAX call is expecting.

ob_start();
if (isset($_POST['act']))
{
    if ($_POST['act'] == 'default')
    {
        ob_clean();
        header('Content-Type: application/json');
        $defaultData = array(
            'name' => "Jane",
            'postal' => "L5B4G6",
            'phone' => "9055751212",
            'address' => "135 Fennel Street"
        );
        echo json_encode($defaultData);
        exit();
    }
}

Collectives™ on Stack Overflow

AJAX calling PHP Array - Using jQuery / JSON

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related