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

Having trouble with Semantic UI Modal onShow / onVisible functionality?

Searching for nested divs with the same class name in jQuery can be achieved by using the

Is there a way in Javascript to apply quotation marks to each value within an array individually?

Using JQUERY to customize the quantity box in Magento's list.phtml file

Ensure that a div with fluid width remains consistently centered within another div

Unexpected outcome from the zero-fill operator (>>>) in Javascript's right shift operation

Use $parse to extract the field names that include the dot character

Utilizing Airbnb's iCalendar Link for Automation

Update the text content in the specific span element when the class attribute matches the selected option in the

Implementing Checkbox Functionality within a Dropdown Menu using AngularJS or JavaScript

What is the optimal way to organize OATH and views in a Grails RESTful client application?

The Jqueryui image link is not displaying the image despite no error being reported

avoid selecting a d3 table

What is the best way to recover past messages from a channel?

What is the best way to add a new item to an object using its index value?

A conflict with the Ajax file is causing an automatic logout

Tips on tallying the frequency of items in a state array

Efficient method for parsing multiple JSON objects simultaneously to create a single aggregated JSON output

Issue: The module "node:util" could not be located while attempting to utilize the "sharp" tool

keep jquery scrolltop position consistent after receiving response