在Apps Script功能中获取html文本框的值 [英] Get value of html text box in Apps Script function

查看:196
本文介绍了在Apps Script功能中获取html文本框的值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这里有什么不对,我尝试从其他类似问题的所有建议似乎都不起作用。

我在Google脚本中有两个文件:myPage.html和myCode.gs。我已经将html文件作为一个web应用程序进行了部署,并且我已经计算出了(有帮助)如何使'submit'按钮的onclick事件触发myCode.gs文件中的emailTech函数。

现在我想将html文件中的文本框中的值插入到onClick事件中调用的电子邮件中。我已经尝试了 document.getElementById('textBoxId').value ,但是我得到以下错误Reference Error:documentis not defined。什么给出了? p>

myPage.html文件:

 < html> 
< head>
< title>测试页< /标题>
< / head>
< body>
< input type =buttononClick =google.script.run.emailTech(); value =提交/>

< input type =textvalue =id =textBoxname =textBox/>
< / body>
< script type =text / javascript>
< / script>
< / html>

myCode.gs文件:

 函数doGet(){
return HtmlService.createHtmlOutputFromFile('myPage');
}

函数emailTech(){

var nameBox = document.getElementById('textBox')。value;
var message =这是文本框的值+ nameBox;
MailApp.sendEmail(123@xyz.com,这是主题,消息);
}


解决方案

在您的Apps脚本函数 emailTech()中,没有变量名称为 document



您有两种不同的方式来部署Apps Script WebApps。由于您使用的是HTML服务(并且您的用户界面是一个html文件),因此您不能使用UI服务方法(如 getElementById())来访问输入值。所以,你会做一些不同的事情。

要将提交按钮和输入字段绑定在一起,请使用一个封闭在< form> 标签。提交按钮仍然具有onclick功能,但现在它将嵌入HTML中的JavaScript函数,该函数将所有输入从表单传递到 emailTech()功能。

在您的应用程序脚本端处理程序中,您将接收表单输入作为对象,并将表单中的字段用作键值对。关键是字段中的名称



通用解决方案在这个答案。这里有一个适合你的代码的版本。我忽略了Arun展示的成功和失败处理。当然,您应该在实际生活中进行错误检查。



Code.gs



 函数doGet(){
return HtmlService.createHtmlOutputFromFile('myPage');
}

函数emailTech(表单){

var nameBox = form.techEmail;
var message =这是文本框的值+ nameBox;
MailApp.sendEmail(email@somewhere.com,这是主题,消息);


code
$ h $ myPage.html

 < html> 

< head>
< title>测试页< /标题>
< / head>

< body>
< form>
< input type =textvalue =name =techEmail/>
< input type =buttononClick =formSubmit()value =Submit/>
< / form>
< / body>
< script type =text / javascript>
函数formSubmit(){
google.script.run.emailTech(document.forms [0]);
}
< / script>

< / html>


Something is wrong here, and all the suggestions I've tried from others with similar questions don't seem to work.

I have two files: myPage.html and myCode.gs in google scripts. I have deployed the html file as a web app, and I have figured out (with help) how to make the onclick event for the 'submit' button to trigger the emailTech function from the myCode.gs file just fine.

Now I want to insert the value from the text box in the html file into the email that is called from the onClick event. I have tried document.getElementById('textBoxId').value, but I get the following error "Reference Error: "document" is not defined. " What gives?

myPage.html file:

<html>
<head>
    <title>Test Page</title>
</head>
<body>
<input type="button" onClick="google.script.run.emailTech();" value="Submit" />

<input type="text" value=" " id = "textBox" name = "textBox" />
</body>
    <script type="text/javascript">
    </script>
</html>

myCode.gs file:

  function doGet() {
  return HtmlService.createHtmlOutputFromFile('myPage');
}

function emailTech(){

  var nameBox = document.getElementById('textBox').value;
  var message = "This is the text box value" + nameBox;
  MailApp.sendEmail("123@xyz.com", "This is the subject", message );
}

解决方案

The error message is correct - in your Apps Script function emailTech(), there is no variable in scope that's named document.

You've got two different ways of deploying Apps Script WebApps mixed up. Since you're using the HTML Service (and your user interface is an html file), you can't use the UI Service methods (like getElementById()) to access input values. So, you'll do something different.

To tie the submit button and input field together, use a form, enclosed in <form> tags. The submit button will still have an onclick function, but now it will be a javascript function embedded in your HTML, which will pass all the input from the form to your emailTech() function.

In your apps-script-side handler, you'll receive the form input as an Object, with the fields from the form as key-value pairs. The key is the name from the field.

The general solution is described in this answer. Here's a version that fits your code. I've left out the success and failure handling that Arun shows. You should build in error checking before deploying this in real life, of course.

Code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('myPage');
}

function emailTech(form){

  var nameBox = form.techEmail;
  var message = "This is the text box value" + nameBox;
  MailApp.sendEmail("email@somewhere.com", "This is the subject", message );

}

myPage.html

<html>

    <head>
        <title>Test Page</title>
    </head>

    <body>
        <form>
            <input type="text" value=" " name="techEmail" />
            <input type="button" onClick="formSubmit()" value="Submit" />
        </form>
    </body>
    <script type="text/javascript">
        function formSubmit() {
            google.script.run.emailTech(document.forms[0]);
        }
    </script>

</html>

这篇关于在Apps Script功能中获取html文本框的值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆