How insert result of a Netlify function into the HTML web page whose form called the function (example: calculator)

Question

Background:

I'm coming from the server-side world of Rails, and trying to figure out the Netlify static html + serverless functions approach to doing a few extremely basic landing page web apps which need a serverless function to insert data into an HTML page.

I'm trying to start with the simplest possible case of an HTML page with a form and a serverless function that returns a result back to the page. (e.g., no static site generators).

I have not found any Netlify tutorials that show how a HTML page can have a form that posts to a function which then returns the result of that function back into the same web page.

The simplest sample app I can think of is a page asks a question, the user POSTs their answer to a serverless function, and the same HTML page is updated with the result of the function... a trivial case being to display "your answer was X" above the form. (It is immaterial to me whether the actual page is rewritten again with the result string included, or the result string is dynamically inserted by somehow poking the string to the div, so long as the result string originates in a serverless function; integrating serverless functions results with HTML pages is what I'm trying to learn.)

In the code below a simple HTML page below displays a form, the form POSTs an answer to a javascript function check_answer.js, and the javascript function erases the current page and displays the string "Your answer was XXXX".

That was simple to do, and lots of tutorials show how to have a function accept a form post then return a result string to the browser (overwriting the prior page).

My question:

How can the serverless function insert the result string back into the original HTML page (at the div id="answer") instead of outputting the result to a blank page?

Current code:

# index.html
<html>
  <head>
    <title>A test form</title>
  </head>
  <body>
    <div id="answer">
    </div>
    <p>How much is 1 + 3?</p>
    <p>form using POST:</p>
    <form method="post" name="calc 2" action="/.netlify/functions/check_answer" id="calcform2" data-netlify="true" >
      <p>
          <label for="my_answer">Answer:</label>
          <input type="text" name="my_answer" id="my_answer">
          <label for="my_comment">Comment:</label>
          <input type="text" name="my_comment" id="my_comment">
      </p>
      <p>
          <input type="submit">
      </p>    
    </form>
  </body>
</html>

# functions/check_answer.js
exports.handler = async event => {
  console.log(event.queryStringParameters);
  console.log(event);
  console.log(event.body);
  if (event.httpMethod == 'POST')
  {
    console.log('is POST');
    var params = parseQuery(event.body);
    console.log(params);
    var answer_string = params['my_answer'];
  }
  else
  {
    console.log('is GET');
    var answer_string = event.queryStringParameters.my_answer || 'empty'
  };

  return {
    statusCode: 200,
    body: `Your answer was ${answer_string}`,
  }
}

// handle parsing form query aaaa=bbbbb&cccc=dddd into hash object
// from https://stackoverflow.com/a/13419367/597992
function parseQuery(queryString) {
    var query = {};
    var pairs = (queryString[0] === '?' ? queryString.substr(1) : queryString).split('&');
    for (var i = 0; i < pairs.length; i++) {
        var pair = pairs[i].split('=');
        query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
    }
    return query;
}

How insert result of a Netlify function into the HTML web page whose form called the function (example: calculator)

0 Answers0