Data extract from the Google spreadsheet to use in HTML Form

Question

I have 300 plus employee data. I want to collect their mobile number details. For collection of mobile number data I have made HTML page which collecting the details like Employee number, Employee Name and Mobile number. Here I want that on input of the employee ID, name of the employee will auto populate in the page. For which I have made HTML / JavaScript code shown below:

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Data Collecction for</title>
</head>

<body>

<form id="my-form">

<script>

function MyFun() {


var response1 = document.getElementById('N1').value;

 if (response1 == '') {document.getElementById("N2").value = ''; alert('Please enter your employee ID');}   
 
 else if (response1 == "100220") {document.getElementById("N2").value = 'William';}
 else if (response1 == "100221") {document.getElementById("N2").value = 'Lucas';}
 else if (response1 == "100222") {document.getElementById("N2").value = 'John';}

 else {document.getElementById("N2").value = ''; alert('Please enter correct employee ID');}             
            
}

</script>

  <label for="T1">Employee ID:</label><br><br>
  <input type="number" id="N1" onchange="validity.valid||(value='');MyFun()" ><br><br>

  <label for="T2">Employee Name:</label><br><br>
  <input type="text" id="N2" readonly required style="background-color:#E6E6FA"  size="50" ><br><br>


  <label for="T4">Mobile Number:</label><br><br>
  <input type="text" pattern="[7-9]{1}[0-9]{9}" id="N4" ><br><br>

  <br><br>
  <button type="submit" name="myButton">Submit</button></center>



</form>

</body>
</html>

Here I have use javascript to populate name of employee. But here I required to change the code each time whenever employee database change. I want that "Employee name" should be extract from the Google Spreadsheet based on "Employee ID". Sample Google spreadsheet is here .

I tried to search on inte.net but failed to do so. Can please help me so that once i update the Google SpreadSheet and then HTML page extract it and use in the form.

Answer 1

If you want to pull data from google spreadsheet you can publish your spreadsheet as a web app and use it as a REST API, you can read more about that here.

https://developers.google.com/apps-script/guides/web

An example of that you want to do would be the following:

function doGet(e) {

    var employee_id = e.parameter.employee_id;

    var values = SpreadsheetApp.getActiveSheet().getRange('A1:B').getValues();

    var find = values.find((row) => row[0] === employee_id);

    var result = {name: find ? find[1]:'Not found'};

    return HtmlService.createHtmlOutput(params);

}

Data extract from the Google spreadsheet to use in HTML Form

Question

1 answers

solution1
0 2022-11-21 17:07:06

Data extract from the Google spreadsheet to use in HTML Form

Question

1 answers

solution1 0 2022-11-21 17:07:06

solution1
0 2022-11-21 17:07:06