Call function in javascript file from html onclick event - javascript

This has been driving me crazy- I can't figure out why it wont 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 want the onclick event for the submit button to trigger the emailTech function from the myCode.gs file but it won't work! When I run the function straight from the file, it works fine.
I've done a few hours of research and tried to add <script type="text/javascript" src="myCode.gs"></script> but that causes an error when I refresh the web app. I have tried calling the function in the onClick event as onClick= "google.script.run.emailTech()" and onClick= "emailTech()" but neither work. I have also tried loading the emailTech function into the script tag in the header, but that didn't work either! What am I missing? Please help!
myPage.html file:
<script type="text/javascript"></script>
<body>
<input type="submit" onclick="emailTech();" value="Submit" />
</body>
myCode.gs file:
function doGet() {
return HtmlService.createHtmlOutputFromFile('myPage');
}
function emailTech(){
Logger.log("is this firing?");
var message = "This is the email message";
MailApp.sendEmail("XYZ#abc.com", "This is the subject", message );
}

You were actually on track with this:
<script type="text/javascript"></script>
<body>
<input type="button" onclick="emailTech();" value="Submit" />
</body>
Don't use a submit; use a button. The semantics of submits and onclick handlers are a little bizarre (not just because of HtmlService sandboxing, but even in general) and don't play well with google.script.run. This is documented in the HtmlService user guide:
" You cannot use this technique with a regular submit button"

EDIT: New answer - use google.script.run.
<script type="text/javascript"></script>
<body>
<input type="button" onclick="google.script.run.emailTech();" value="Submit" />
</body>

Related

Onclick function not work in IE 11

I'm trying to add a submit function in my HTML and refer to a js file with my function. The code runs successfully in Chrome but not in IE11. The error message is "submitFunc(event) is undefined". Could anyone help me fix this problem? I have tried everything I can. T.T
function submitFunc(event) {
console.log("Hey what are you looking for? ")
}
<html>
<div>
<input class="btn btn-primary" type="submit" value="submit" onclick="submitFunc(event)">
</div>
</html>
<script type="text/javascript" src="/static/js/main.js"></script>
It might be that your <script> tag in outside of the <html>...</html> block. Try moving it up into the a <head>...</head> section just after the first <html> tag.
I don't know if you still need help, but you're loading the JavaScript file after setting up the on-click event. I would assume that means you don't have the function defined yet. I would move the "script" tag before the elements.

window.history.back() not working in CSHTML page

I would like to navigate to previous page when I click back button. But when I click back button it redirects me to same page since my page has so many ajax calls.
Is there any javascript code available to navigate to previous page?
I have tried below code in my cshtml page.
<input id="btnback" type="button" value="Back" onclick="GoBack();" />
<script type="text/javascript" language="javascript">
function GoBack() {
window.history.back()
}
</script>
<script type="text/javascript" language="javascript">
function GoBack() {
window.history.go(-1)
}
</script>
You can do this in your html instead of writing function separately in scripts. See below :-
<input action="action" onclick="window.history.go(-1); return false;" type="button" value="Back" />
You can see my code in screenshot.
Go Back
I tried it and it is working. I hope this works for you as well :-)
Thanks.
Could you just add return false; to your existing javascript function and then check

Working with external JavaScript functions and HTML

Thank you in advance for helping me with my issue. I was wondering if someone could explain this for me as i am self teaching about JavaScript JQuery. What i am trying to do is push a message into a variable that is in the parameters of a function. Then i want to display the message using the function by calling it back to the html file that i originally had. So i want write a message in my function and print to my html page. I think i maybe in the right direction here is my source code. I am trying to get use to write with external javascript files as i think it is much cleaner way of working with HTML, CSS3, and JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src=".js"></script>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<form>
<input type="button" value="Click me" id="message "onclick="test();" />
</form>
</body>
</html>
External JavaScript file.
function test(message){
alert("Hello");
}
Use this.value to get the value of the input
<input type="button" value="Click me" id="message" onclick="test(this.value);" />
And then use the message you get
function test(message){
alert(message);
}
To show this message on your page, create an element on the page
<div id="message"></div>
Then, in your test function, instead of alert, set the innerText or innerHTML to the message
document.getElementById('message').innerText = message;
To show message in popup do it this way
Html:
<input type="button" value="Show message in popup" id="message "onclick="test2('hii this is my message');" />
JS:
function test2(message)
{
alert(message);
}
To show message in div
Html:
<input type="button" value="Show message in div" id="message "onclick="test('hii this is my message');" />
<div id="message"> </div>
JS
function test(message)
{
document.getElementById("message").innerHTML = message;
}
Demo : Fiddle
Adding the message: The easy way to do this would be by using jQuery or a javascript library of your choice. Otherwise, you can simply do this:
Create an empty div to display the msg with an id="msg"
and in your javascript function:
document.getElementById("msg").innerHTML = "Your message";
jQuery is much more fun: you can use readily available functions like .html() and .append()
You definitely want to do this, as it is much MUCH cleaner to do so. It also lets you use the same code in multiple places.
Look at this: http://www.w3schools.com/js/js_whereto.asp
(down by 'external JavaScript')
Essentially, you need to save the .js file as an actual file, like filename.js:
<script type="text/javascript" src="filewithcode.js"></script>
where filewithcode.js is the file path to the JavaScript file you have created.
Hope this helps

Alternative for onclick window.location

I have a button:
<input class="formatButton verInfo2" type="button" value="Aceptar" id="btnAceptar" />
That when clicked calls a whole bunch of fun-ctions that in turn call PHP etc, the problem is that all this magic happens on another page, this button is a mere trigger. I wanted to load such other page when the button is clicked and onclick=window.location was doing the job, expect that when used like this:
<input class="formatButton verInfo2" type="button" value="Aceptar" id="btnAceptar" onclick="window.location='somepage.php';" />
It totally ignored the scripts that I have at the end of my document, I specially need it to trigger the last one because it uses the button's id:
<script src="js/jquery.js"></script>
<script type="text/javascript" src = "js/agregarPcLogic.js"></script>
<script src="js/addLab.js"></script>
I figure that such thing happens because it read the code in order and once the button is pressed and it loads the other page it just ignores the rest, so I figure that adding such scripts somewhere before could fix that but I think it would look bulky, so my question is, is there any other method or technique I could use to load a page?
Or is the best solution?
<input class="formatButton verInfo2" type="button" value="Aceptar" id="btnAceptar"
<script src="js/jquery.js"></script>
<script type="text/javascript" src = "js/agregarPcLogic.js"></script>
<script src="js/addLab.js"></script>
onclick="window.location='somepage.php';" />
Thanks alot in advance for your kind words of wisdom.
Decided to just add another script with:
$("id of button").click(function(){
window.location.href='link to page .php';
})

Get value of html text box in Apps Script function

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>

Categories