How to display a JSON response on separate lines using jQuery and PHP

Question

I am using AJAX to submit a form, and would like to display a summary of the information on the page so that the user can confirm the information before submitting. I am hav

Answer 1

You need to insert <br /> tags or insert \n and then put the content in pre tag. Remeber you are injecting this content into an html DOM so html rules still apply :-)

Answer 2

$return['message'] = 'First Entry: ' . $_POST['Name1'] . '<br />'  . 'Second Entry: ' .    $_POST['Name2'] . '<br />' . 'Third Entry: ' . $_POST['Name3'];

Answer 3

Generally you want to use json_encode on arrays. So your PHP array would look like:

$arr = array('foo' => 1, 'bar' => 2, 'baz' => 'test');
// you can probably just use $_POST here, i.e. $arr = $_POST

echo json_encode($arr);

And your JavaScript dealing with that data variable would look like this:

$('#id').html(data.foo + "<br />" + data.bar + "<br />" + data.baz);

This lets you deal with your data piecewise, rather than in one lump, so it's easier to manipulate and parse.

Answer 4

You can transfer JSON encoded HTML newlines like this:

$return['message'] = 'First Entry: ' . $_POST['Name1'] . '<br /> '  . 'Second Entry: ' .    $_POST['Name2'] . '<br /> ' . 'Third Entry: ' . $_POST['Name3'];  
echo json_encode($return);

Or convert newlines (\n) into newline tags.

The nicer way though would be to leave that kind of processing to the client by e.g. returning an array of messages:

$return['message'] = array();
$return['message'][] = 'First Entry: ' . $_POST['Name1'];
$return['message'][] = 'Second Entry: ' . $_POST['Name2'];
$return['message'][] = 'Third Entry: ' . $_POST['Name3'];
echo json_encode($return);

And leave the processing to the client (maybe the client wants the messages wrapped in a paragraph tag later on):

function(data)
{
    $('<div id="output2"></div>').insertAfter($('#agreement-information'));
    $('#output2').html(data.message.join('<br />')).show(500);
    $('#ouput2').append(data);  
}