editing an html form with php using ajax

Question

I'm trying to create an update form where the user selects an ID and the rest of the form gets automatically filled with the corresponding data to that ID which would make updating really simple, obviously i'd have to use AJAX but do i really have to write a whole form code inside the PHP and return it in a single statement and then assigning it in a single innerHTML?

Is it possible to run whatever returns from the php file as a javascript, such that i would be able to write a mini scripts to set the innerHTML of each element by itself and without having to reload the whole form's HTML code, just the values inside form elements?

<?php
$myname = "test";
$myage = 22;
echo 
'<script>
document.getElementById("name").innerHTML = "$myname";
document.getElementById("age").innerHTML = "$myage";
</script>';
?>

PS i have no experience of AJAX and i can only find the xmlhttp.responseText for returning the output of a PHP script.

PHP 101: '-quoted strings do NOT interpolate variables. you're sending the literal characters $, m, y, n, etc... to Javasript. — Marc B
– Marc B, Commented Jan 30, 2015 at 17:44
Are you not able to use jQuery? It might make ajax a little more intuitive. — Mike Lyons
– Mike Lyons, Commented Jan 30, 2015 at 17:49
yeah i know, this isn't a functioning code and that i have to concat it with dots, it's just an example to set the idea :) — Newbie
– Newbie, Commented Jan 30, 2015 at 18:59

Alvaro Montoro · Accepted Answer · 2015-01-30 17:46:40Z

1

It would be better if you return the data structured in some form (e.g.: JSON), then process it with JavaScript.

For example, instead of what you are returning, do something like this:

<?php 
   $to_return = array(
       "name" => "test",
       "age" => 22
   );

   echo json_enconde($to_return);

Then on your page, parse your response, and process it:

data = JSON.parse(response);
document.getElementById("name") = data.name;
document.getElementById("age") = data.age;

If you want to standardize it a little bit more, you could return something like this:

[
   {
       "target": "name",
       "value": "test"
   },
   {
       "target": "age",
       "value": 22
   }
]

and create a function like this:

function populateForm(data) {
    for (var x = 0; x < data.length; x++) {
        document.getElementById(data[x].target).innerHTML = data[x].value;
    }
}

Then call that function with the JSON response from your PHP.

edited Jan 30, 2015 at 17:46

answered Jan 30, 2015 at 17:33

Alvaro Montoro

30k7 gold badges68 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Newbie Over a year ago

Is there an easier way in PHP to writting these arrays, other than array( array() , array() , array() )?

Alvaro Montoro Over a year ago

You can do things like this: $myArray["name"] = "test" directly, without defining the array (but I believe it might throw an error/warning depending on your version of PHP). You could generate the JSON without arrays too (as a string that you return); I just used an array to show the convenience of json_encode()

Newbie Over a year ago

can you link me to an example of writing a json array in PHP that would be passed with the encode function, and then parsed correctly in the javascript, i understood your implementations but i just need a simple working example so i would be able to understand the full syntax, if it isn't any hassle to you :)

Danny · Accepted Answer · 2015-01-30 17:25:39Z

0

I would recommand to return an Array in the server side (the php that handles the ajax request). and in the browser side after you get the the respone from the server then you set document.getElementById("name").innerHTML = $myname; document.getElementById("age").innerHTML = $myage;

answered Jan 30, 2015 at 17:25

Danny

8812 gold badges10 silver badges20 bronze badges

Collectives™ on Stack Overflow

editing an html form with php using ajax

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related