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>
Related
I am battling to get my javascript function to fire when a button is clicked on my html page.
My html code snippet:
<!DOCTYPE html>
<html>
<head>
<title>VLA SYSTEM</title>
Logout
<script
type ="text/JavaScript" src="logout.js"></script>
</head>
<body>
<form>
<script
type ="text/JavaScript" src="regGen.js"></script>
<script
type="text/JavaScript" src="submit.js"></script>
<input type="button" name="btnAssign" value="Assign Owner To Registration Number..." onclick="submit()">
My javascript code snippet:
function submit() {
window.alert("Information Captured And Stored To Database!");
}
The idea is that, when the user clicks on the button, the alert should fire informing the user that information has been captured, however, I am unable to get this alert to appear.
Any advice would be greatly appreciated.
The problem is that, unintuitively, inline handlers essentially implicitly use with (this) for the element that triggered the event, and for the parent element, and so on:
<form>
<input type="button" name="btnAssign" value="Assign Owner To Registration Number..."
onclick="console.log(submit === document.querySelector('form').submit)"
>
</form>
And form.submit is a built-in function will submit the form.
Either use a different function name, like doAlert:
onclick="doAlert()"
and
function doAlert() {
window.alert("Information Captured And Stored To Database!");
}
Or attach the listener properly using Javascript instead (inline handlers are pretty bad practice, and can result in unintuitive behavior like you're seeing):
document.querySelector('input[name="btnAssign"]).addEventListener('click', submit);
I am trying to pass filepath value to publish.bat.
Can some one please help me parameterize below JavaScript.
<html>
<head>
<HTA:Application id="AppExecute"
ApplicationName="AppExecute"
WindowState="maximize">
<script language="JavaScript"><!--
function myapp(filepath){
var cmd = new ActiveXObject("WScript.Shell");
cmd.run("cmd /K CD C:\\publish & publish.bat C:\\publish\\prop\\lvl.Prop "&filepath)
}
--></script>
</head>
<body>
<font color=Blue><font size=3>Test Publisher
<br>
<Input type="text" name="filepath" title = "Do not change name of property files e.g. l2.ese">
<input type="button" value="CMD" onclick="myapp(filepath)"><br>
</form></center>
</body>
</html>
I am getting Error:
Script Error
Your code has several mistakes...
#Teemu explained some of them in the comment.
Then your buttons aren't properly enclosed within a form element. As I can see, there is only an ending tag for the form element.
After correcting that, you should change onclick event to:
onclick="myapp(this.form.filepath.value)"
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
Since I am new to JS coding and web designing, I have a following doubt:
I have one html page which has onclick function for form text area. If text area remains empty and user clicks submit, it should display message to enter entry and if entry is right one the corresponding file should get open. I have if/else condition in JS file, which is giving appropriate message while text area remains empty but not loading file which I am mentioning when entry is not empty.
Below is the html snippet:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
</head>
<body>
<form name="drugform" action="#">
<pre> Drug Name<input type="text" name="name1" value="" /></pre>
</p>
<input type="button" value="Enter" onclick='buttoncheck()' />
</form>
<script type="text/javascript" src="if-else-button.js"></script>
</body>
</html>
and JS code is:
function buttoncheck() {
if (Boolean(document.drugform.name1.value)) {
load(form1.php);
} else {
alert('Enter Drug name');
}
}
How to load file with js code (mentioned in if condition)?
if you want to load that form1.php file in existing file then you can use ajax for for reference go here.
and if you want to redirect to another page then you should use
window.location.href = "form1.php";
var url = 'form1.php';
window.location.href = url;
Instead of load(form1.php), substitute the above code snippet!
EDIT:
If you want to load the file without actually redirecting to a new page, you can use jquery's .load()
Check more about it here: http://api.jquery.com/load/
try like this,
function buttoncheck() {
if (document.drugform.name1.value != "") { // check not empty condition
load("form1.php"); // passing value to function with quotes
} else {
alert('Enter Drug name');
}
}
I want to create a XSS vulnerable web page which execute script entered in input box. Here I have written this code but whenever I enter script nothing happens.
<html>
<head>
</head>
<body>
<script type="text/javascript">
function changeThis(){
var formInput = document.getElementById('theInput').value;
document.getElementById('newText').innerHTML = formInput;
localStorage.setItem("name","Hello world!!!");
}
</script>
<p>You wrote: <span id='newText'></span> </p>
<input type='text' id='theInput' value='Write here' />
<input type='button' onclick='changeThis()' value='See what you wrote'/>
</body>
</html>
Please help. How should I modify the code?
Update: I was trying to do reflected XSS. According to me if I enter a script in input It should execute. This will happen only when I am not checking that user has entered a valid input or not and taking actions not to execute script.
Here is a web page www.insecurelabs.org/task/Rule1 which is XSS vulnerable when ever I type a script like: <script> alert("hell"); </script> in input field script executes.
I want to know what is the main difference between that and what I am doing?
If you use innerHTML to inject a script tag... the script won't run!
What you could do instead is inject an image with an onload event handler:
<img src="someImage.gif" onload="alert('hacked!')" />
[Update] About your last question: the main difference is that you are using innerHTML, while the insecurelabs page is using jQuery.html(). The jQuery approach will run the script.
Live demo: http://jsfiddle.net/wqqWt/
Just eval the code:
function changeThis(){
var formInput = document.getElementById('theInput').value;
eval(formInput);
}