cannot get values from google apps web page and store them into variables

[toolmania1]

I made a page in my site on google apps. I used their new "Build a User Interface 'Experimental'" to build a ui for the page. Basically, I wanted to put a 'Contact Us 'page in the google sites. I researched and found this is not possible in html. I even copied html code for a different 'Contact Us' page I had already made in html and php from another page I made and pasted it into a page I made for my google site. The page was not displayed. When I took the <form> and </form> tags out, the rest of the table was displayed correctly. So, I can confirm that I could not just add a form to a page for my google site. Also, I researched and found that php pages cannot be stored on their site.

At this point, I researched and found a lot of old documentation about using spreadsheets to create a 'Contact Us' page. I don't want to use this method. I should be able to use javascript. At least all of the sample code I have found in researching the google apps script looks like they are using javascript.

So, I found this new "Build a User Interface 'Experimental'" in google sites. It actually is easy to use. So, I built a page. I put some textboxes, labels and form panels on there. For the submit button, I clicked on it and then went to Events -> onMouseClick. I chose the function I created in apps script. So, basically, when the submit button is pressed, the code will run for the app script I chose. This works, because when I hard code the email information for the mail function, as I will note later, I do get a successful email.

Anyways, the one strange thing I noticed is that I can only put one child element on each form panel. I thought that I would drop a form panel and put everything inside of it. But, this does not appear to be how this works. So, when I made my design, the way that made sense to me was to add 2 form panels. I put the submit button into one. I put the reset button into another. There were no errors displayed on the screen. I also do not think this is the issue anyways. I think the problem lies when I do the scripting:

=======

function doGet() {

var app = UiApp.createApplication();
app.add(app.loadComponent('emailForm1'));

var emailToAddress = app.getElementById('emailTextBox');
var subject = app.getElementById('SubjectTextBox');
var message = app.getElementById('MessageTextBox');

var emailToAddressValue = emailToAddress.value;
// var emailToAddressValue = "hey"; user this one to see the hard coded value and I saw it, so I know the other .value are not retrieving the value from the ui page
var subjectValue = subject.value;
var messageValue = message.value;

// debugger

// MailApp.sendEmail("[email protected]", "Here is the subject", "Here is some text" );
MailApp.sendEmail( emailToAddressValue, subjectValue, messageValue );

return app;
}

======

Side Note:
I also found that the main function MUST be called "doGet" or google sites throws an error.

=====

So, the problem I am having is that when I leave the above MailApp.sendEmail uncommented:

MailApp.sendEmail( emailToAddressValue, subjectValue, messageValue );

I get an error and the mail does not get sent:
"Syntax error: Invalid email: undefined line: ? (line 18)"

But, if I comment that line out and uncomment the line above it where I hard code email addresses in, then I actually do receive the email into my account and no error occurs:

MailApp.sendEmail("[email protected]", "Here is the subject", "Here is some text" );

So, I used their debugger. If you type "debugger" right into the code on the apps script page and then click on the debug icon ( looks like a bug icon ) when you are editing the apps script in google sites, the debugger will run. So, when I run the debugger, the values listed in the debugger for these lines is "undefined" for each one:

var emailToAddressValue = emailToAddress.value;
var subjectValue = subject.value;
var messageValue = message.value;

So, I am not retrieving the value of the items on the ui I build using the "Build a User Interface 'Experimental'".

Also, in the debugger still, I have the value of "Object xxxxx" for each of the elements when I grab them by id:

var emailToAddress = app.getElementById('emailTextBox');
var subject = app.getElementById('SubjectTextBox');
var message = app.getElementById('MessageTextBox');

So, I know I am able to retrieve the elements by id. I just cannot get the values that are typed in. But, actually, I never get a chance to retrieve the values since the page errors and does not display the page correctly when I navigate to the page in a browser.

I think this is a simple javascript problem though. I know javascript a little, but I still have some stuff to learn. So, maybe I am making a simple mistake. Does anyone have any idea why I do not have a value for any of these variables?

By the way, here is how I opened the "Build a User Interface 'Experimental'" for those of you who will read this and want to use this:

1. Create google account
2. Log into google with your new account ( I log into gmail first so that I am logged into google )
3. Open a new tab and go to http://www.google.com
4. Click on More and then click on Even More
5. Under "Home and Office", click on Sites
6. Click on Create
7. Follow instructions to create the new site
8. Now, go back to the sites page if you have not been taken directly to your new site ( I don't remember since I already have a site created and it just comes up for me already )
9. Click on your site
10. Click on More -> Manage Site
11. Click on App Scripts
12. Click on Add New Script
13. Save the new script ( even if you don't put anything into the function they put up on the screen for you right now )
14. Now, click on File -> Build a User Interface 'Experimental'
15. Build the interface
16. Add a form panel
17. Add a submit button inside the form panel
18. Click on the submit button
19. On the right side, click on Events -> onMouseClick
20. Choose the function the you saved in step 13, it should be listed with the name of the function here
21. Save the ui by File -> Save
21. Hit the page in a browser now

 

[toolmania1]

I took a different approach to my form issue. I was not sure about the 'Experimental' part of the UI. So, I created everything on the fly in the same script ( textboxes, labels, submit button, etc. ). This way, I already had all of the names, ids, values, etc in the script and did not have to worry about pulling them from the pseudo form I made using the "Build a UI Interface 'Experimental'". Here is my code that works:

function doGet() {

var app = UiApp.createApplication();

var mainPanel = app.createVerticalPanel().setId('mainPanel');
app.add(mainPanel);

//a lable to give some directions and feedback
var emailLabel1 = app.createLabel('Please enter your email address').setId('emailLabel1');
mainPanel.add(emailLabel1);

//the text box, you will need setName AND setId
var emailAddress1 = app.createTextBox().setName('emailAddress1').setId('emailAddress1');
mainPanel.add(emailAddress1);

//a button to send the text box info to the function addText
var submitButton = app.createButton('Submit');
mainPanel.add(submitButton);

//the button handler
var handler = app.createServerClickHandler('sendMail');
handler.addCallbackElement(mainPanel);
submitButton.addClickHandler(handler);


return app;
}

function sendMail( e ) {

var app = UiApp.getActiveApplication();
//we passed our elements by name when we set the callback as mainPanel
//to get a value use the dot notation
var emailAddress = e.parameter.emailAddress1;

MailApp.sendEmail( emailAddress, "Here is my subject", "Here is my mesage" );
return app;
}

 

[toolmania1]

Finally,

Here is what I wanted. I pulled everything in a variable instead of hard coding anything:

This is the line which I was most focused on and wanted variables:
MailApp.sendEmail( emailAddress, subject1, message1 );

=========
function doGet() {

var app = UiApp.createApplication();

var mainPanel = app.createVerticalPanel().setId('mainPanel');
app.add(mainPanel);

//a lable to enter email address
var emailLabel1 = app.createLabel('Please enter your email address').setId('emailLabel1');
mainPanel.add(emailLabel1);

//the text box, you will need setName AND setId
var emailAddress1 = app.createTextBox().setName('emailAddress1').setId('emailAddress1');
mainPanel.add(emailAddress1);


//a lable to enter subject
var subjectLabel1 = app.createLabel('Please enter your subject').setId('subjectLabel1');
mainPanel.add(subjectLabel1);

//the text box, you will need setName AND setId
var subject1 = app.createTextBox().setName('subject1').setId('subject1');
mainPanel.add(subject1);


//a lable to enter message
var messageLabel1 = app.createLabel('Please enter your message here').setId('messageLabel1');
mainPanel.add(messageLabel1);

//the text box, you will need setName AND setId
var message1 = app.createTextBox().setName('message1').setId('message1');
mainPanel.add(message1);



//a button to send the text box info to the function addText
var submitButton = app.createButton('Submit');
mainPanel.add(submitButton);

//the button handler
var handler = app.createServerClickHandler('sendMail');
handler.addCallbackElement(mainPanel);
submitButton.addClickHandler(handler);


return app;
}

function sendMail( e ) {

var app = UiApp.getActiveApplication();
//we passed our elements by name when we set the callback as mainPanel
//to get a value use the dot notation
var emailAddress = e.parameter.emailAddress1;
var subject1 = e.parameter.subject1;
var message1 = e.parameter.message1;

MailApp.sendEmail( emailAddress, subject1, message1 );
return app;
}