My UserForm doesnt give an Output (GoogleSheets)-CodePudding

i am very new to google sheets and tryed to use an Userform to fill in my Sheets. But every time, i click submit it just freezes and nothing more happends...

https://docs.google.com/spreadsheets/d/13LdDIMvWpVkj5rom2fHV25FtYvbOcnKr4cZF84nITYQ/edit?usp=sharing

And the code: HTML:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <form>
      <div >
        <label for="name" >name</label>
        <input type="text"  id="name">
      </div>
      <div >
        <label for="price" >price</label>
        <input type="text"  id="price">
      </div>
      <button type="submit"  id="add" >Submit</button>
    </form>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7 zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
    <script>

      function afterButtonClicked(){
        var item = document.getElementById("name");
        var price = document.getElementById("price");
        
        google.script.run.addnewrow(name,price);
      }
        document.getElementById("add").addEventListener("click",afterButtonClicked);
    <script>

  </body>
</html>

Here are my functions:

function addnewRow(nameprice) {

  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const ws = ss.getSheetByName("Results");
  ws.appendRow([name,price]);
 
}

I dont know if its important, but here is the cutom menu:

function loadForm() {

  const htmlForSidebar = HtmlService.createTemplateFromFile("uform");
  const htmlOutput = htmlForSidebar.evaluate();

  const ui = SpreadsheetApp.getUi();
  ui.showSidebar(htmlOutput);
  
}


function createMenu(){

  const ui = SpreadsheetApp.getUi();
  const menu = ui.createMenu("Meine Forms");
  menu.addItem("Show UserForm","loadForm");
  menu.addToUi();

}

function onOpen(){
  createMenu();
}

Thank you!

CodePudding user response：

There are few modification in your code:-

In HTML file you've syntax error, you didn't used </script>.
You're passing wrong variable as a argument in addnewRow while running it through google.script.run.
You're trying to run function which actually doesn't exist in server-side.
Parameter in addnewRow function is missing comma , in server-side.
Sheet you're trying to access in ss.getSheetByName("Results") doesn't exist.

Do following modifications in <script> tag of client side code(HTML File):-

    <script>

       function afterButtonClicked(){

        var item = document.getElementById("name").value;
        var price = document.getElementById("price").value;
        google.script.run.addnewRow(item,price);
      }
        document.getElementById("add").addEventListener("click",afterButtonClicked);
    </script>

And replace this :-

function addnewRow(nameprice) {

  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const ws = ss.getSheetByName("Results");
  ws.appendRow([name,price]);     
}

with this :-

function addnewRow(name,price) {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const ws = ss.getSheetByName("Results");
  ws.appendRow([name,price]); 
}

and change/add the sheet name as Result in Spreadsheet.