如何让用户在提交表单之前查看答案？ [英] How To Allow Users to Review Answers before Submiting Form?

问题描述

我用UiApp构建了一个表单来收集用户的信息。由于多个面板和文件上传相当复杂，所以我想在提交之前让用户有机会查看他们的输入。我希望能够在一个最终评论面板上显示他们的输入，然后他们可以决定编辑信息并返回到以前的面板进行编辑。

以下是测试脚本。我得到的最远的地方是让它返回'textBox'而不是textBox的值。是否可以在我的脚本的doGet部分中保留值，还是必须移动到doPost来访问值？

你身边的工作会有什么建议？
感谢您的帮助！

 函数doGet（e）{
 var app = UiApp。 createApplication（）; 
 var appPanel = app.createVerticalPanel（）; 
 var form = app.createFormPanel（）; 
 var panel1 = app.createHorizo​​ntalPanel（）; 
 
 var emailLabel = app.createLabel（'Your Email'）; 
 var email = app.createTextBox（）。setName（'email'）。setId（'email'）; 
 
 app.add（form）; 
 
 var button1 = app.createButton（'Go to Review'）; 
 
 panel1.add（emailLabel）; 
 panel1.add（email）; 
 panel1.add（button1）; 
 appPanel.add（panel1）; 
 form.add（appPanel）; 
 
 
 var panel2 = app.createHorizo​​ntalPanel（）。setVisible（false）; 
 var reviewLabel = app.createLabel（'Your Email：'）; 
 var reviewEmail = app.createLabel（email）; 
 
 panel2.add（reviewLabel）; 
 panel2.add（reviewEmail）; 
 appPanel.add（panel2）; 
 
 // 
 var reviewPageTwo = app.createClientHandler（）
 .forTargets（panel1）.setVisible（false）
 .forTargets（panel2）.setVisible（true） ; 
 
 button1.addClickHandler（reviewPageTwo）; 
 
返回应用; 
} 
  

UPDATE 8.24.12
我包含了生成的脚本。它包括审阅功能，引导用户回到编辑的按钮，以及submitButton发布它。 （您将需要替换邮件的电子表格ID才能正常工作。）

感谢所有帮助！
Martin

 函数doGet（e）{
 var app = UiApp.createApplication（）; 
 var appPanel = app.createVerticalPanel（）; 
 var form = app.createFormPanel（）; 
 var panel1 = app.createHorizo​​ntalPanel（）。setId（'panel1'）; 
 
 var emailLabel = app.createLabel（'Your Email'）; 
 var email = app.createTextBox（）。setName（'email'）。setId（'email'）; 
 var syncChangeHandler = app.createServerHandler（'syncText'）。addCallbackElement（form）; 
 
 
 app.add（form）; 
 
 var button1 = app.createButton（'Go to Review'）; 
 
 panel1.add（emailLabel）; 
 panel1.add（email）; 
 panel1.add（button1）; 
 appPanel.add（panel1）; 
 form.add（appPanel）; 
 
 
 var panel2 = app.createHorizo​​ntalPanel（）。setId（'panel2'）。setVisible（false）; 
 var reviewGrid = app.createGrid（3,3）.setId（'reviewGrid'）; 
 var reviewEmail = app.createLabel（）。setId（'reviewEmail'）; 
 var reviewLabel = app.createLabel（'Your Email：'）; 
 var submitButton = app.createSubmitButton（'Submit'）; 
 var button2 = app.createButton（'Edit Response'）; 
 
 panel2.add（reviewLabel）; 
 panel2.add（reviewEmail）; 
 panel2.add（button2）; 
 panel2.add（submitButton）; 
 appPanel.add（panel2）; 
 
 // 
 var editResponse = app.createClientHandler（）
 .forTargets（panel1）.setVisible（true）
 .forTargets（panel2）.setVisible（false） ; 
 
 button1.addClickHandler（syncChangeHandler）; 
 button2.addClickHandler（editResponse）; 
 
返回应用; 
} 
 
函数syncChangeHandler（e）{
 var app = UiApp.getActiveApplication（）; 
 
 
 app.getElementById（'reviewEmail'）。setText（e.parameter.email）; 
 app.getElementById（'panel1'）。setVisible（false）; 
 app.getElementById（'panel2'）。setVisible（true）; 
返回应用程序; 
 
 
函数doPost（e）{
 var ss = SpreadsheetApp.openById（'* your spreadsheet id here *'）。getSheets（）[0]; 
 var range = ss.getRange（ss.getLastRow（）+ 1,1,1，1,2）; 
 
 var values = [[new Date（），e.​​parameter.email]]; 
 range.setValues（values）; 
 
 var app = UiApp.getActiveApplication（）; 
 var label = app.createLabel（'Thank You！'）; 
 app.add（label）; 
 
返回应用; 
 
  

解决方案

的doGet（）。 doGet（）函数在您的UI首次加载时执行。
因此，

  var email = app.createTextBox（）。setName（'email'）。setId（'email ）; 
  

实际上可以解析为文本框。当你做的时候

  var reviewEmail = app.createLabel（email）; 
  

您正尝试将文本框作为参数传递给createLabel，这是不允许的。因此这不起作用。您必须处理对处理程序中文本框的更改。

 函数doGet（）{
 var syncChangeHandler = app.createServerHandler（'syncText'）。addCallbackElement（form）; 
 var email = app.createTextBox（）。setName（'email'）。setId（'email'）; 
 ... 
 var reviewEmail = app.createLabel（）。setId（'reviewEmail'）; 
 ... 
} 
 
函数syncText（e）{
 var app = UiApp.getActiveAplication（）; 
 app.getElementById（'reviewEmail'）。setText（e.parameter.email）; 
返回应用程序; 
} 
  

I've built a form with UiApp to collect information from the user. It's rather complex with multiple panels and file uploads, so I would like to give the user the opportunity review their inputs before submitting. I was hoping to display their inputs on one final review panel that would then allow them to decide to edit the info and move back to a earlier panel to edit.

Following is the test script. The farthest I've gotten is getting it to return 'textBox' and not the value of the textBox. Is it possible to get the values while staying in the doGet portion of my script, or must I move to doPost to access the values?

What would be the work around you would suggest? Thanks for any and all help!

function doGet(e){
var app = UiApp.createApplication();
var appPanel = app.createVerticalPanel();
var form = app.createFormPanel();
var panel1 = app.createHorizontalPanel();

var emailLabel = app.createLabel('Your Email');
var email = app.createTextBox().setName('email').setId('email');

app.add(form);

var button1 = app.createButton('Go to Review');

panel1.add(emailLabel);
panel1.add(email);
panel1.add(button1);
appPanel.add(panel1);
form.add(appPanel);


var panel2 = app.createHorizontalPanel().setVisible(false);
var reviewLabel = app.createLabel('Your Email:');
var reviewEmail = app.createLabel(email);

panel2.add(reviewLabel);
panel2.add(reviewEmail);
appPanel.add(panel2);

//
var reviewPageTwo = app.createClientHandler()
.forTargets(panel1).setVisible(false)
.forTargets(panel2).setVisible(true);

button1.addClickHandler(reviewPageTwo);

return app;
}

UPDATE 8.24.12 I'm including the resulting script. It includes the review function, the button to lead the user back to edit, and the submitButton to post it. (You will need to replace the spreadsheet ID for the post to work.)

Thank for the help all! Martin

 function doGet(e){
var app = UiApp.createApplication();
var appPanel = app.createVerticalPanel();
var form = app.createFormPanel();
var panel1 = app.createHorizontalPanel().setId('panel1');

var emailLabel = app.createLabel('Your Email');
var email = app.createTextBox().setName('email').setId('email');
var syncChangeHandler = app.createServerHandler('syncText').addCallbackElement(form);


app.add(form);

var button1 = app.createButton('Go to Review');

panel1.add(emailLabel);
panel1.add(email);
panel1.add(button1);
appPanel.add(panel1);
form.add(appPanel);


var panel2 = app.createHorizontalPanel().setId('panel2').setVisible(false);
var reviewGrid = app.createGrid(3,3).setId('reviewGrid');
var reviewEmail = app.createLabel().setId('reviewEmail');
var reviewLabel = app.createLabel('Your Email:');
var submitButton = app.createSubmitButton('Submit');
var button2 = app.createButton('Edit Response');

panel2.add(reviewLabel);
panel2.add(reviewEmail);
panel2.add(button2);
panel2.add(submitButton);
appPanel.add(panel2);

//
var editResponse = app.createClientHandler()
.forTargets(panel1).setVisible(true)
.forTargets(panel2).setVisible(false);

button1.addClickHandler(syncChangeHandler);
button2.addClickHandler(editResponse);

return app;
}

function syncChangeHandler(e){
  var app = UiApp.getActiveApplication(); 


  app.getElementById('reviewEmail').setText(e.parameter.email);
  app.getElementById('panel1').setVisible(false);
  app.getElementById('panel2').setVisible(true);
  return app;
}

function doPost(e){
var ss = SpreadsheetApp.openById('*your spreadsheet id here*').getSheets()[0];
var range = ss.getRange(ss.getLastRow()+1, 1, 1,2);

var values = [[new Date(),e.parameter.email]];
range.setValues(values);

var app = UiApp.getActiveApplication();
var label = app.createLabel('Thank You!');
app.add(label);

return app;
}

解决方案

You have your entire function inside doGet(). The doGet() function is executed when your UI is first loaded. So,

var email = app.createTextBox().setName('email').setId('email');

actually resolves to a text box. When you do

var reviewEmail = app.createLabel(email);

you are trying to pass a text box as an argument to createLabel, which is not allowed. Therefore this won't work. You must handle the changes to the text box in a handler.

function doGet(){
var syncChangeHandler = app.createServerHandler('syncText').addCallbackElement(form);
var email = app.createTextBox().setName('email').setId('email');
...
var reviewEmail = app.createLabel().setId('reviewEmail');
...
}

function syncText(e){
  var app = UiApp.getActiveAplication(); 
  app.getElementById('reviewEmail').setText(e.parameter.email);
  return app;
}

这篇关于如何让用户在提交表单之前查看答案？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！