2016-05-14 144 views
0

团队,无法使用服务器端脚本更新HTML页面上的文本框

我无法使用服务器端脚本更新HTML页面上的文本框。有一个服务器端代码和一个HTML页面 - 使用Googl应用脚本构建。是

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.html

<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> 

我的问题如下:

  1. 虽然试图在下拉列表中指定的选择添加行为作为“listID” - onclick函数没有指示控件脚本“updatescreen”;我试图用基于列表框“listID”中的选择来更新文本框“myExpense”。文本框“myExpense”没有得到更新

  2. 我试图用一个按钮来更新屏幕 - 仍然没有工作。当我试图添加记录器来查看控件是否传递给服务器端观察者时出现了一种奇怪的行为 - 当form.myExpense = 4000;达到 - 它甚至不更新日志。当该行被评论 - 记录器工作。

任何想法 - 如何可以接近?

谢谢你的帮助。

Hussain。

回答

0

团队,

我想通了。服务器端无法直接更新文本框。它只能传递给成功处理程序的返回值,然后成功处理程序可以更新该字段。

修订代码如下:

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.html

<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> 

谢谢大家。

Hussain。

相关问题