title: How to change values in cell of Google Sheet from custom HTML sidebar?
body: <p>I have a Google spreadsheet with custom sidebar. Sidebar contains a form with <code>&lt;textarea&gt;</code> only.
  The <code>&lt;textarea&gt;</code> takes value from table cell with script.
  I want to send new value from sidebar to the same cell by <code>onchange</code> trigger or keep old value in the cell if it's not changed by user.
  You can see below what I have. Unfortunately it does not work. Does not work means the sidebar takes value from the cell but don't send new one after changing. I don't understand why where I'm wrong and how to fix it?
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function showSidebar() {
      var html = HtmlService.createHtmlOutputFromFile('Change.html')
          .setTitle('Cooking method')
          .setWidth(300);
      SpreadsheetApp.getUi()
          .showSidebar(html);
    }
  
  function addNewMethod(form_data)
  {  
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var sheet = ss.getSheetByName('Method');
    var cookingMethod = form_data.method;   
    sheet.getRange('A2').setValue(cookingMethod);
  }
  
  function getDefaultMethod() {
    const ss = SpreadsheetApp.getActiveSpreadsheet();
    const sheet = ss.getSheetByName('Method');
    const currentMethod = sheet.getRange('A2').getValue();
    return currentMethod
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;base target="_top"&gt;
    &lt;link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css"&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;change&lt;/title&gt;
    &lt;style&gt;
     body{
     background-color: #3366CC;
     } 
     textarea {
     margin: 10px
     }
    &lt;/style&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        $(function()
        {
           google.script.run
               .withSuccessHandler(updateMethod)
               .getDefaultMethod();
        });
        function updateMethod(method_val)
        {
           document.getElementById('method').innerHTML=method_val;
        }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;form id="mysidebar"&gt;
      &lt;div class="block form-group"&gt;
      &lt;label for="method"&gt;&lt;/label&gt;
          &lt;textarea id="method" name="method" rows="30" cols="45"&gt;
          &lt;/textarea&gt;
      &lt;/div&gt;   
      &lt;/form&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;script&gt;
           $("method").change(function () {
           google.script.run.addNewMethod(this);
           }).change();
  
  &lt;/script&gt; 
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>