javascript - 使用 .withSuccessHandler 更改输入按钮的属性

Question

我正在尝试使用 HTML 服务在 Google Apps 脚本中构建用户界面。我希望我的按钮从“保存”更改为“已保存!”当数据成功保存到用户的脚本属性时。我知道函数 saveProperties 正在成功执行，因为正在更新用户属性。不知道为什么我正在做的事情不起作用。该按钮仍然显示“保存”。

脚本文件

function saveProperties(first, last, email) {  
  ScriptProperties.setProperty('first', first);
  ScriptProperties.setProperty('last', last);
  ScriptProperties.setProperty('email', email);
  return;
}

html 文件

<input type="text" id="first"/>
<input type="text" id="last"/>
<input type="text" id="email"/>
<input id="submitButton" type="submit" value="Save"/>

<script>
function onSubmit(){
    var $first = $('#first').val();
    var $last = $('#last').val();
    var $email = $('#email').val();
    google.script.run
    .withSuccessHandler(changeButton)
    .saveProperties($first, $last, $email);
}

function changeButton(test){
    $('#submitButton').attr('value','SAVED!');
}
</script>

Answer 1

我的测试不包括jQuery等外部库，但应该没有区别。

代码.gs

function saveProperties(first, last, email) {  
  ScriptProperties.setProperty('first', first);
  ScriptProperties.setProperty('last', last);
  ScriptProperties.setProperty('email', email);
  return;
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

JavaScript.html

<script>
function onSubmit(obj) {
    var $first = document.getElementById('first').value;
    var $last = document.getElementById('last').value;
    var $email = document.getElementById('email').value;
    google.script.run.withSuccessHandler(changeButton).withUserObject(obj).saveProperties($first, $last, $email);
}

function changeButton(value, obj) {
    obj.value = 'SAVED!';
}
</script>

Test.html

<input type='text' id='first'/>
<input type='text' id='last'/>
<input type='text' id='email'/>
<input id='submitButton' name='submitButton' type='button' value='Save' onclick='onSubmit(this)' />
<?!= include('JavaScript'); ?>

更新 - 替代版本:

JavaScript.html

<script>
function onSubmit() {
    var $first = document.getElementById('first').value;
    var $last = document.getElementById('last').value;
    var $email = document.getElementById('email').value;
    google.script.run.withSuccessHandler(changeButton).saveProperties($first, $last, $email);
}

function changeButton() {
    document.getElementById('submitButton').value = 'SAVED!';
}
</script>

Test.html

<input type='text' id='first'/>
<input type='text' id='last'/>
<input type='text' id='email'/>
<input id='submitButton' name='submitButton' type='button' value='Save' onclick='onSubmit()' />
<?!= include('JavaScript'); ?>