showing the data in a textbox using AJAX retrieved information

I have a table where additional rows can be added by the user with the click of a JavaScript function.

Each row contains a drop down list, and based on the selected value, an AJAX script fetches some values to display in corresponding textfields within that same row.

Below is the HTML code snippet:

<td><div align="center">

            <label>
            <select name="gcno1" id="gcno1"  onchange="fetch_gc(this)">
             <option value="0">NIL</option>
             <option value="2">1</option>
            <?php while($row=mysql_fetch_array($result))
                    {
            ?>
              <option value="<?php echo $row[0]; ?>"><?php echo $row[0]; ?></option>
              <?php }?>
            </select>
            </label>
          </div></td>
          <td><div align="center"><input name="date1" id="date1" type="text" size="10" />
          </div></td>

And here is the AJAX code I am using:

    xmlhttp = new XMLHttpRequest();
    var value=encodeURIComponent(document.getElementById('gcno1').value);
    var parameters="param1="+value;

    xmlhttp.open("POST", 'fetch_gc.php', true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send(parameters);
    xmlhttp.onreadystatechange=function(){
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200) 
        {
            var detail=xmlhttp.responseText.split('+');
            alert(detail[0]);
            document.getElementsByName('date1').value=String(detail[0]);
            alert("life " + document.getElementById('gcno1').value);

        }
    }

The alert message in the AJAX code correctly displays the response text (detail[0]) but for some reason, it's not updating the textbox with the name 'gcno1' with this value. Assistance with solving this issue would be greatly appreciated.

Answer №1

When using .getElementsByName(), keep in mind that it returns a list. Therefore, you can access the elements like this:

document.getElementsByName('date1')[0].value = String(details[0]);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating dynamic email content with Node.js using SendGrid templating

How can I properly format SendGrid's content using Node.js? I'm currently working on sending emails from a contact form within an application using SendGrid. I have a Google Cloud Function set up that I call via an HTTP post request. Although I ...

Challenge: RxJS timeout function not functioning as expected

I am facing an issue with exiting the Observable stream after 3 seconds if there is no new string input. The problem arises when I paste the same value multiple times, as the distinctUntilChanged operator prevents the input stream from progressing. I wan ...

React Router Redux causing an infinite loop when navigating back

I recently encountered a strange issue with my React + Redux app. I am using React Router in combination with React Router Redux for routing, and I noticed some unexpected behavior. Clicking the back button once takes me from route 0 to -1 successfully. Ho ...

What is the best way to verify the [routerLink] values displayed from an Angular component string array?

I want to display the [routerLink] values coming from a string array in my Angular component. This is the TypeScript code: import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-header', templateUrl: & ...

The FatSecret Sharp API does not support starting an asynchronous operation at the current moment

I'm currently working on an ASP.NET project where I need to integrate the Fatsecret API using a wrapper called FatSecret Sharp. However, when attempting to make a server side method call from my JavaScript script, I encounter an error. I am seeking gu ...

Linking two socket.io clients together (Establishing a direct socket-to-socket connection that works across different browsers)

Can a direct P2P connection be established between two browsers using socket.io-client, bypassing the node.js server they are currently connected to? If possible, how? The goal is for clients A and B to communicate directly without going through the node. ...

Sticky box fails to maintain position as header scrolls

I am looking to create a Sidebar that sticks to the window while scrolling, but stops when it reaches the footer. I have managed to get it partially working, but there is a small issue that I can't seem to solve. Test it live here: Everything seems ...

How can you convert Promise.all to a single Promise?

I have successfully implemented two API calls using Promise.all method with no issues. Even though one API call is sufficient to retrieve the results, I decided to stick with Promise.all and it's still working fine. I attempted to replace Promise.al ...

What is the best way to incorporate white-space:normal within the text of a jQuery Mobile grid button?

Below is the code for my jQuery Mobile Grid buttons: <div class="ui-grid-b my-breakpoint"> <div class="ui-block-a"><button type="button" data-theme="c"> <img src="res/icon/android/business.png" height="45"><br>Business</ ...

Gulp encountered an issue - Module 'sigmund' not found

After installing browser-sync, my previously working Gulp encountered an error: Error: Cannot find module 'lru-cache' To resolve this issue, I utilized the following solution: npm link lru-cache as suggested in this thread However, upon atte ...

Prevent selection of specific weekdays in Kendo grid calendar

When editing a record in a Kendo grid with a date field, is there a way to only allow the selection of Monday and disable all other days of the week? ...

Guide on generating virtual nodes from a string containing HTML tags using Vue 3

Investigation I stumbled upon this solution for converting a simple SVG with one path layer into Vue2 vnode list and wanted to adapt it for Vue3. After scouring resources, including the MDN docs, I couldn't find any pre-existing solutions. So, I dec ...

Tips for adjusting the color of boxes within a grid

I've built a grid containing multiple boxes, each identified with an id of box + i. However, I'm encountering difficulties when attempting to implement an on-click function to change the color of each box. Below is the code snippet in question: f ...

Looking to dynamically add content to a webpage without needing to refresh the page? Utilizing AJAX can help achieve that

On my website, users have the ability to create posts which are then saved in a database. I would like these posts to be retrieved with a query and displayed on the webpage without having to refresh the page. I understand that I need to implement Ajax for ...

Exploring VueJS watchers: How to get started?

Struggling to grasp the concept of Watchers in VueJS, particularly when trying to implement them for tracking tab changes and resetting values. Even though I have set up a watch with parameters like `oldValue` and `newValue`, their usage remains unclear to ...

Swap Text/Characters When Hovered Over

I'm looking to add a fun interactive element to my webpage where the letters in certain text rearrange when a user hovers over it. For instance, hovering over "WORK" would display "OWKR" instead. I have a feeling that some JavaScript is needed for thi ...

Adjust the aesthetic based on whether the field is populated or empty

I have a simple text field on my website that triggers a search when the user inputs a value. I am wondering if it is possible to style the text field differently depending on whether it is empty or has content. Specifically, I want to change the border c ...

Validating numbers in React JS input fields component

I need assistance with implementing number validation for 3 Textfields in my application. Currently, the code displays an error message if a Textfield is empty, but I am stuck on validating whether the input is text or numbers. import React from 'rea ...

Scroll-triggered Autoplay for YouTube Videos using JQuery

Issue: I'm trying to implement a feature where a YouTube video starts playing automatically when the user scrolls to it, and stops when the user scrolls past it. Challenges Faced: I am new to JavaScript web development. Solution Attempted: I referre ...

The state of XMLHttpRequest always remains in a perpetual state of progress, never

I have come across an MVC Core application. One of the methods in this application currently has the following structure: public IActionResult Call(string call) { Response.ContentType = "text/plain"; return Ok(call); } In addi ...