サーバーサイドスクリプトを使用してHTMLページのテキストボックスを更新できません

Question

チーム

サーバーサイドスクリプトを使用してHTMLページのテキストボックスを更新できません。 Googl App Scriptを使用して構築されたサーバーサイドコードと1つのHTMLページがあります。次のように

server.gs

function doGet(e) 
{ 
var form =  HtmlService.createTemplateFromFile('form.html'); 
form.listId = "categories"; form.datalist = ["Category 1", "Category 2", "Category 3"]; 
return form.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME); 
} 

function updatescreen(form) 
{ 
try 
{ 
     if (form.listId == "Category 1") 
     { 
      form.myExpense = 2000; 
      Logger.clear(); 
      Logger.log("2000"); 
      return; 
     } 
     if (form.listId == "Category 2") 
     { 
      form.myExpense = 3000; 
      Logger.clear(); 
      Logger.log("3000"); 
      return; 
     } 

     //form.myExpense = 4000; 
     Logger.clear(); 
     Logger.log("4000"); 
     return; 
} 
catch (error) 
    { 
     return error.toString(); 
    } 
} 

<form id="myForm"> 
     <input type="text" id="myExpense" placeholder=1000> 
     <input list="<?= listId ?>" name="<?= listId ?>" 
      onclick = google.script.run.withSuccessHandler(screenupdated) 
       .updatescreen(this.parentNode); 
       return true;> 
      <datalist id="<?= listId ?>"> 
       <? for (var i=0; i<datalist.length; i++) { ?> 
        <option value="<?= datalist[i] ?>"> 
       <? } ?> 
      </datalist> 

     <input type="submit" name = "refresh" value="Update Screen" 
      onclick="this.value='Updating Screen ...'; 
         google.script.run.withSuccessHandler(screenupdated) 
         .updatescreen(this.parentNode); 
         return false;"> </form> <div id="output"></div> 

<script> 
    function screenupdated(status) 
    { 
     document.getElementById('myForm').refresh.value = "Update Screen"; 
     document.getElementById('myForm').show(); 
     document.getElementById('output').innerHTML = status; 
    } 
</script> 

<style> 
     input { display:block; margin: 20px; } 
</style> 

form.html私の質問は以下のとおりです。

1. という名前のドロップダウンリストの選択時にアクションを追加しようとしていますが"listID"として - onclick関数はスクリプトを "updatescreen"に制御しませんでした。私は、テキストボックス "myExpense"リストボックス "listID"の選択に基づいて値を更新しようとしていた。テキストボックス「myExpense」が更新されない

2. ボタンを使って画面を更新しようとしましたが、それでも機能しませんでした。コントロールがサーバー側のオブザーバに渡されているかどうかを確認するためにロガーを追加しようとしたときに、奇妙な動作が発生しました。 - form.myExpense = 4000;それはログを更新することさえできません。その行がコメントされると、ロガーが動作します。

どのようなアイデア - どのようにこれにアプローチできますか？

ありがとうございました。

フセイン。

Answer 1

チーム

私はこれを理解しました。サーバー側でテキストボックスを直接更新することはできません。 successhandlerとsuccesshandlerに戻り値を渡すだけで、フィールドを更新できます。

改訂コードは以下の通りである：

server.gs

function doGet(e) 
{ 
    var form = HtmlService.createTemplateFromFile('form.html'); 
    form.listId = "categories"; 
    form.datalist = ["Category 1", "Category 2", "Category 3"]; 
    return form.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME); 
} 

function updatescreen(form) 
{ 
    try 
    { 
     var returnvalue = 0; 

     if (form.listId == "Category 1") 
     { 
      returnvalue = 2000; 
      Logger.clear(); 
      Logger.log("2000"); 
      return; 
     } 
     if (form.listId == "Category 2") 
     { 
      returnvalue = 3000; 
      Logger.clear(); 
      Logger.log("3000"); 
      return; 
     } 

     return returnvalue; 
    } 
    catch (error) 
    { 
     return error.toString(); 
    } 
} 

を

<form id="myForm"> 
     <input type="text" name="myExpense" placeholder=1000> 
     <input list="<?= listId ?>" name="<?= listId ?>" 
      onclick = google.script.run.withSuccessHandler(screenupdated) 
       .updatescreen(this.parentNode); 
       return true;> 
      <datalist id="<?= listId ?>"> 
       <? for (var i=0; i<datalist.length; i++) { ?> 
        <option value="<?= datalist[i] ?>"> 
       <? } ?> 
      </datalist> 

     <input type="submit" name = "refresh" value="Update Screen" 
      onclick="this.value='Updating Screen ...'; 
         google.script.run.withSuccessHandler(screenupdated) 
         .updatescreen(this.parentNode); 
         return false;"> 




<script> 
    function screenupdated(status) 
    { 
     document.getElementById('myForm').refresh.value = "Update Screen"; 
     document.getElementById('myForm').myExpense.value = status; 
    } 
</script> 

<style> 
input { display:block; margin: 20px; } 
</style> 

form.htmlすべてのいただきありがとうございます。

フセイン。