Leveraging JSON for parsing xmlhttp.responseText to auto-fill input fields

Question

Leveraging JSON for parsing xmlhttp.responseText to auto-fill input fields

Is there a way to utilize JSON for parsing xmlhttp.responseText in order to populate textboxes? I've been struggling to achieve this using .value and .innerHTML with the dot notation, along with b.first and b.second from the json_encode function in the loadTextBox.php file (shown below), but the textboxes remain empty.

Code from the main page:

function loadDoc()
{
   var xmlhttp;

   // code for IE7+, Firefox, Chrome, Opera, Safari
   if (window.XMLHttpRequest)
   {
      xmlhttp=new XMLHttpRequest();
   }
   //code for IE6, IE5
   else
   {
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }

   xmlhttp.onreadystatechange=function()
   {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
         var doc = window.document.createElement("doc");
         var a = xmlhttp.responseText;
         var b = JSON.parse(a);
         document.getElementById("textbox").innerHTML=b.first;
         document.getElementById("textbox2").innerHTML=b.second;
      }
   }

   xmlhttp.open("GET","loadTextBox.php?id=4",true);
   xmlhttp.send();
}

Code from loadTextBox.php:

<?php
---Placeholder for correct DB login info---

$result = $mysql->query("SELECT column_one FROM table_one");

while ($row = $result->fetch_object())
{
   $queryResult[] = $row->present_tense;
}
$textboxValue = $queryResult[0];
$textboxValue2 = $queryResult[2];
echo json_encode(array('first'=>$textboxValue,'second'=>$textboxValue2));
?>

javascript ajax json

Answer 1

Answer №1

Tested thoroughly and confirmed to be functioning correctly. Use this code snippet as a foundation for achieving your desired outcome:

let endpoint = "YOUR.php"

let ajaxRequest = new XMLHttpRequest();
ajaxRequest.open("GET", endpoint, true);
ajaxRequest.send(null);

ajaxRequest.onreadystatechange = function () {
     if (ajaxRequest.readyState == 4 && (ajaxRequest.status == 200)) {

        console.log("Ready to process data")            
        
        let jsonData = JSON.parse(ajaxRequest.responseText);
        console.log(jsonData);
        console.log(jsonData.first);

    } else {
        console.log("Data not yet ready for processing")            
    }
}

This code assumes that the JSON output is properly formatted as you mentioned:

{"first":"example","second":"demo"}

Answer 2

Tested thoroughly and confirmed to be functioning correctly. Use this code snippet as a foundation for achieving your desired outcome:

let endpoint = "YOUR.php"

let ajaxRequest = new XMLHttpRequest();
ajaxRequest.open("GET", endpoint, true);
ajaxRequest.send(null);

ajaxRequest.onreadystatechange = function () {
     if (ajaxRequest.readyState == 4 && (ajaxRequest.status == 200)) {

        console.log("Ready to process data")            
        
        let jsonData = JSON.parse(ajaxRequest.responseText);
        console.log(jsonData);
        console.log(jsonData.first);

    } else {
        console.log("Data not yet ready for processing")            
    }
}

This code assumes that the JSON output is properly formatted as you mentioned:

{"first":"example","second":"demo"}

Answer 3

Answer №2

After extensive troubleshooting, I identified the root cause of the issue at hand. It appears that extra tags were being transmitted due to redundant tags present in my DB information file. These unnecessary tags were delivered in the responseText as {"first":"radim","second":"radi"}, causing errors in the segment related to ---Placeholder for correct DB login info---. By making adjustments such as changing .innerHTML to .value, I was able to rectify the problem.

Updates made to the main page code:

function loadDoc()
{
   var xmlhttp;

   // Revised code for better compatibility across browsers
   if (window.XMLHttpRequest)
   {
      xmlhttp=new XMLHttpRequest();
   }
   else
   {
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }

   xmlhttp.onreadystatechange=function()
   {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
         var a = JSON.parse(xmlhttp.responseText);
         document.getElementById("textbox").value=a.first;
         document.getElementById("textbox2").value=a.second;
      }
   }

   xmlhttp.open("GET","loadTextBox.php?id=4",true);
   xmlhttp.send();
}

Answer 4

After extensive troubleshooting, I identified the root cause of the issue at hand. It appears that extra tags were being transmitted due to redundant tags present in my DB information file. These unnecessary tags were delivered in the responseText as {"first":"radim","second":"radi"}, causing errors in the segment related to ---Placeholder for correct DB login info---. By making adjustments such as changing .innerHTML to .value, I was able to rectify the problem.

Updates made to the main page code:

function loadDoc()
{
   var xmlhttp;

   // Revised code for better compatibility across browsers
   if (window.XMLHttpRequest)
   {
      xmlhttp=new XMLHttpRequest();
   }
   else
   {
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }

   xmlhttp.onreadystatechange=function()
   {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
         var a = JSON.parse(xmlhttp.responseText);
         document.getElementById("textbox").value=a.first;
         document.getElementById("textbox2").value=a.second;
      }
   }

   xmlhttp.open("GET","loadTextBox.php?id=4",true);
   xmlhttp.send();
}

Leveraging JSON for parsing xmlhttp.responseText to auto-fill input fields

Answer №1

Answer №2

Similar questions

Unable to modify a record using the 'findById' method and save() function while utilizing promises

What is the technique for incorporating FontAwesome icons onto an HTML 5 canvas?

Having a Jquery resizing problem? No worries! When the width is less than 768, simply enable the click option. And when the width is

Creating nested directories in Node.js

Jquery Banner Fade In animation malfunctioning

Tips for running a function in CodeBehind triggered by jQuery?

What is the best way to store objects containing extensive binary data along with additional values?

Struggling with passing the decoded user ID from Node Express() middleware to a route can be problematic

Issue with retrieving query results using node_redis client

Modify div content based on user selection

Enhanced form validation using AJAX

When the onInput event is triggered, React renders components and console.log() displays different values

Ways to activate auto completion without using a string

How can you identify if a ByteArrayOutputStream object is a JSONArray or a JSONObject?

What is preventing PHP from accessing the $_SESSION[] array?

Swap out a component for another using a higher order component (HOC perhaps?)

Tips for sending custom props to a dynamic page in Next.js

Learn the step-by-step process of cropping and zooming an image using the react-image-crop

Continuously make Ajax requests to populate numerous div elements

Even in the face of errors, Selenium with Node.js continues to run seamlessly. The challenge arises specifically with the 107.xx version of the Chrome browser and Chrome driver