How to fill all input fields automatically from database

Question

Hello,

How to fill all input fields automatically from database by entering input in one textbox using Javascript? Do I need a web services?

This is so far I create with help, but still cannot retrieve the full name and ssn from database when enter memberid in the input text.

2 erros is happening right now:

1) getUserDetails() is not deifned AND

2) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

async function getUserDetails(MemberID) {
    try {
        const config = {

            server: '.',
            database: 'WebForms',
            options: {
                //encrypt: true // Use this if you're on Azure
            }
        };

        // Connect to the database
        await sql.connect(config);

        // Query the database
        const result = await sql.query`SELECT RTRIM(LTRIM(CONCAT(COALESCE(FirstName + ' ', ''), COALESCE(LastName, '')))) AS MemberName, SSN FROM dbo.Members WHERE MemberID = ${MemberID}`;

        if (result.recordset.length > 0) {
            const { MemberName, SSN } = result.recordset[0];
            console.log(`Name: ${MemberName} ${SSN}`);

           result = document.getElementById("membername").value="";
           result = document.getElementById("SSN").value="";

        } else {
            console.log('No user found with the provided account number.');
        }
    } catch (err) {
        console.error('SQL error', err);
    } finally {
        await sql.close();
    }
}

Gowtham Cp · Answer

Hi Ivonne, There are two main issues that need addressing. First, the getUserDetails is not defined error is likely due to the function not being correctly linked to your HTML or the event listener not being properly set up. Ensure that the function is included and triggered using an appropriate event listener such as onkeypress or onchange . Secondly, in the current code, you're clearing the input fields immediately after assigning values, which is preventing the data from displaying. Below is an updated version of the code that resolves this issue by properly fetching and displaying the values: async function getUserDetails(MemberID) { try { const config = { server: '.', database: 'WebForms', }; await sql.connect(config); const result = await sql.query`SELECT CONCAT(FirstName, ' ', LastName) AS MemberName, SSN FROM dbo.Members WHERE MemberID = ${MemberID}`; if (result.recordset.length > 0) { const { MemberName, SSN } = result.recordset[0]; document.getElementById("membername").value = MemberName; document.getElementById("SSN").value = SSN; } else { console.log('No user found'); document.getElementById("membername").value = ''; document.getElementById("SSN").value = ''; } } catch (err) { console.error('SQL error:', err); } finally { await sql.close(); } } Also, make sure your HTML triggers the function correctly when you press "Enter," like this: This should allow you to fill the fields automatically when entering the MemberID . Let me know if you need more help!

Ivonne Aspilcueta · Answer

Hi Muhammad, I still received the error: getUserDetails is not defined at HTMLInputElement.onkeypress whentry to enter the memberid on textbox to automatically populate fullname and ssn.

Muhammad Imran Ansari · Answer

Hi Ivonne, You have tried the code in the right direction but it seems some issues need to be fixed. After fetching the record, you are not assigning the values and cleaning them right after the return. Try the following code change for If-Else block, Here is the modified code for If-Else bock if (result.recordset.length > 0) { const { MemberName, SSN } = result.recordset[0]; console.log(`Name: ${MemberName}, SSN: ${SSN}`); document.getElementById("membername").value = MemberName; document.getElementById("SSN").value = SSN; } else { console.log('No user found with the provided MemberID.'); document.getElementById("membername").value = ''; document.getElementById("SSN").value = ''; } Thank you.

Ivonne Aspilcueta · Answer

Hi Gowtham, I followed your advised, but I changed the event listener to onchange instead of onkeypressed, because it was giving the same error: "getUserDetails() not define, after changing the event listener a new error is showing: "AuthorizationToCloseAccount.html:1 Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received" Do you know what is that error about? HTML page: Thank you.

How to fill all input fields automatically from database

Answers (4)