Share via

HTML Form Data to Azure SQL Table via Azure Function Output SQL Binding: Data not loading to Table

JOSEPH PAWLOWSKI - Home 0 Reputation points
2023-09-06T12:54:58.0166667+00:00

o, I have developed an Azure Function App using an Output SQL Binding. It works and, when I run it locally from VS Code and from Azure, data populates into the connected Azure SQL Table.

My project entails creating an HTML Form that would pass the input form data into the Azure SQL Table. After getting through some config bugs, etc. I'm able to:

  1. Submit my Form
  2. Convert to JSON
  3. Send to Azure Function HTTP Trigger API

The HTML page is hosted in Azure Storage. I've tried to run from there and locally, I understand there shouldn't be a difference but, just thought I'd mention it.

I feel that what I'm passing isn't labeled properly or isn't in the format the function is expecting.

I feel like I'm close. I'll take a direct answer but, happy to keep digging and learning and figuring it out on my own but, I'm stuck. All help is GREATLY appreciated.

Here's the baseline code I think will be helpful:

function.json

"type": "sql",       
"direction": "out",       
"name": "toDoItems",       
"commandText": "dbo.ToDo",       
"connectionStringSetting": "SqlConnectionString"

index.js

html page
Azure Functions
Azure Functions
An Azure service that provides an event-driven serverless compute platform.
4,679 questions

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. MayankBargali-MSFT 70,016 Reputation points
    2023-09-07T02:40:17.99+00:00

    [@JOSEPH PAWLOWSKI(/users/na/?userid=348f3946-8f4b-47ad-aad0-fb92879d6233) Thanks for reaching out. I don't see any of your HTML code. For your reference sharing the code how to call any HTTP POST request. To authenticate azure function, you need to pass x-functions-key in your request as documented here or in the query string. The below is just for reference and I will suggest you to use fiddler/postman to test the function endpoint to verify if you are getting right response. I believe you have already tested running the local webpage but to double confirm.

    For your reference I have tested the same using the above code and it works fine. You can debug the page locally F12 on your browser and check for any error/issue.

    Note: You might get CORS issue so make sure to add the URL in the CORS setting of your function app. You can also set it to * to resolve the CORS issue if you face any.

    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Call Azure Function from HTML</title>
</head>
<body>
   <div id="demo">
    <h1>Request</h1>
    <button type="button" onclick="callFunction()">Call Function</button>
   </div>
  <script>
    function callFunction() {
      const xhr = new XMLHttpRequest();
      const url = 'https://<functionappname>.azurewebsites.net/api/HttpTrigger1?code=yourkey';
      xhr.open('POST', url, true);
      xhr.setRequestHeader('Content-Type', 'application/json');
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
	        document.getElementById("demo").innerHTML = xhr.responseText;
        }
      };
      const data = JSON.stringify({
        // Request body goes here
      });
      xhr.send(data);
    }
  </script>
</body>
</html>

    test

    0 comments