Yagisanatode/Index.html

## Index.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
  </head>
  <body>
  <div id="container">
    <h1>Choose Your Goat</h1>
    <form id="goatForm" onsubmit="event.preventDefault();">
      <input type="hidden" name="_csrf" value="<?= getCsrfToken() ?>" />
      <label for="goat_type">Type of Goat:</label><br>
      <input type="radio" name="goat_type" id="goat_type_pygmy" value="pygmy">
      <label for="goat_type_pygmy">Pygmy Goat</label><br>
      <input type="radio" name="goat_type" id="goat_type_nigerian_dwarf" value="nigerian_dwarf">
      <label for="goat_type_nigerian_dwarf">Nigerian Dwarf Goat</label><br>
      <input type="radio" name="goat_type" id="goat_type_boer" value="boer">
      <label for="goat_type_boer">Boer Goat</label><br>
    </form>
      <input type="button" value="Submit" onclick="submit()">
      <div id="resp">Response: <span id="response">...</span></div>
  </div>
  </body>

  <script>


    /**
     * When the validation process is completed successfully without Apps Scripting errors.
     * @param {String.<Object>} e - event parameter containing 'hasError' boolean and 'text' string.
     */
    function onSuccess(e){
      const message = JSON.parse(e)

      let color = message.hasError? "red" : "blue"

      const resp = document.getElementById("response")
      resp.innerText = message.text
      resp.style.color = color
    }


    /**
     * Submits the response back to Google Apps Script.
     */
    function submit(){

      const form = document.getElementById('goatForm');

      // Create a FormData object
      const formData = new FormData(form);

      let payload = {}

      // Iterate over the form data
      for (const [key, value] of formData.entries()) {
        console.log(key, value);
        Object.assign(payload, {[key]: value})

      }

      console.log(payload)
      google.script.run.withSuccessHandler(onSuccess).formInputs(JSON.stringify(payload));
    }
  </script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<base target="_top">
	<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
	</head>
	<body>
	<div id="container">
	<h1>Choose Your Goat</h1>
	<form id="goatForm" onsubmit="event.preventDefault();">
	<input type="hidden" name="_csrf" value="<?= getCsrfToken() ?>" />
	<label for="goat_type">Type of Goat:</label><br>
	<input type="radio" name="goat_type" id="goat_type_pygmy" value="pygmy">
	<label for="goat_type_pygmy">Pygmy Goat</label><br>
	<input type="radio" name="goat_type" id="goat_type_nigerian_dwarf" value="nigerian_dwarf">
	<label for="goat_type_nigerian_dwarf">Nigerian Dwarf Goat</label><br>
	<input type="radio" name="goat_type" id="goat_type_boer" value="boer">
	<label for="goat_type_boer">Boer Goat</label><br>
	</form>
	<input type="button" value="Submit" onclick="submit()">
	<div id="resp">Response: <span id="response">...</span></div>
	</div>
	</body>

	<script>


	/**
	* When the validation process is completed successfully without Apps Scripting errors.
	* @param {String.<Object>} e - event parameter containing 'hasError' boolean and 'text' string.
	*/
	function onSuccess(e){
	const message = JSON.parse(e)

	let color = message.hasError? "red" : "blue"

	const resp = document.getElementById("response")
	resp.innerText = message.text
	resp.style.color = color
	}


	/**
	* Submits the response back to Google Apps Script.
	*/
	function submit(){

	const form = document.getElementById('goatForm');

	// Create a FormData object
	const formData = new FormData(form);

	let payload = {}

	// Iterate over the form data
	for (const [key, value] of formData.entries()) {
	console.log(key, value);
	Object.assign(payload, {[key]: value})

	}

	console.log(payload)
	google.script.run.withSuccessHandler(onSuccess).formInputs(JSON.stringify(payload));
	}
	</script>
	</html>