How to change multiple text box values with PHP and AJAX

Written by sue smith Google
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to change multiple text box values with PHP and AJAX
With AJAX you can display server updates within a page while the user views it. (Jack Hollingsworth/Photodisc/Getty Images)

With AJAX, you can update page elements without the user having to navigate away from your page. If you have a page with multiple HTML text-box input elements displayed within it and want to update the displayed values, you can do so using PHP and AJAX. Your HTML page will call the PHP using JavaScript, the PHP will run on the server and send data back to the JavaScript in the page. On receipt of the data, the JavaScript can iterate through the text-boxes, writing the updated values to the page.

Skill level:
Moderately Challenging


  1. 1

    Create an HTML page with text input elements. The following outline demonstrates a sample page with text-boxes in it:

    <!DOCTYPE HTML> <html> <head> </head> <body> <form> <input type="button" onclick="getData()" value="update"/> <input type="text" id="t1"/> <input type="text" id="t2"/> <input type="text" id="t3"/> </form> </body> </html>

    The page displays three text input elements, each of which has a unique ID for referring to it in JavaScript. The page also displays a button, which calls a JavaScript function when the user presses it.

  2. 2

    Add a script to your page. In the HTML head section, add a script element as follows:

    <script type="text/javascript">


    Inside the script, add a variable and the function outline called by the button:

    var httpReq; function getData(){


    Inside the function, instantiate the variable as an HTTP Request object, providing a separate solution for older versions of Internet Explorer:

    if(window.XMLHttpRequest) httpReq = new XMLHttpRequest(); else if(window.ActiveXObject) httpReq = new ActiveXObject("Microsoft.XMLHTTP");

    Specify a function to receive data from the server:

    httpReq.onreadystatechange = processData;

    Call the server side PHP script:'GET', 'get_data.php', true); httpReq.send(null);

  3. 3

    Create a PHP script. The JavaScript code calls a PHP script named "get_data.php" so create that file. What you place in the PHP script depends on how you are storing your data. If you need to retrieve it, for example from a database or other source, implement that in the PHP code. Once you have the data, you need to write it out to be sent back to the browser. The following PHP excerpt writes the data as "hard-coded" XML elements:

    <?php header("Content-type: text/xml"); echo "<data><value>apple</value><value>banana</value><value>pear</value></data>"; ?>

    This includes three values for the three text input elements. The PHP script should be saved on your server at the same location as the page.

  4. 4

    Process the received data. In your HTML page script section, after the function you already created, add the function you listed as "onreadystatechange":

    function processData(){


    Inside the function, check that the script returned a usable result:

    if (httpReq.readyState === 4 && httpReq.status === 200) {


    Inside this conditional block, retrieve the response data from the PHP script:

    var recXML=httpReq.responseXML;

    This should be the XML written out from PHP.

  5. 5

    Iterate through the returned data. After retrieving the response XML, query it for an array of elements with a particular tag name, in this case "value":

    var values = recXML.getElementsByTagName("value");

    Loop through this array:

    var i; for (i=0; i<values.length; i++){


    Inside the loop, write the values to the text input elements in the page using their IDs:


    The ID is built using the loop index. As long as the returned XML has three values, they will each be written to the text input elements in the page.

Tips and warnings

  • The PHP code does not need to return XML data, for example, it can return plain text.
  • If your pages rely on data from an external source such as a database, they will require thorough testing.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.