return data from showModalDialog - javascript

I would like to continue working with the data from the ModalDialog in the function abfrage().It is important that I get the data there I want to return it.i would like to create a loop with several input fields later on html, so i don't write this on the html page.
function abfrage(){
let count = 1;
let html = '<input type="text" name="text">';
var t = HtmlService.createTemplateFromFile('dialogForm');
let dialog = ui.showModalDialog(t.evaluate(), 'Hello');
}
dialogForm.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Userform</h1>
<table>
<?!= html ?>
</table>
<input type="button" value="Close" onclick="google.script.host.close()" >
<input type="submit" value="Submit" class="action">
</body>
</html>

gs:
function abfrage(){
let count = 1;
let html = '<form><br /><input type="text" name="text">';
var t = HtmlService.createTemplateFromFile('dialogForm');
let dialog = ui.showModalDialog(t.evaluate(), 'Hello');
}
function serversidefunctionname(obj) {
var name=obj.name;
//process name
//return html if desired
}
HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Userform</h1>
<?!= html ?>
<br /><input type="button" value="Close" onclick="google.script.host.close()" >
<br /><input type="button" value="Submit" class="action" onClick="processForm(this.parentNode);" />
</form>
<script>
function processForm(obj) {
google.script.run
.withSuccessHandler(function(retobj){
//process return from server side function if any
})
.serversidefunctionname(obj);
}
</script>
</body>
</html>

Related

Why does my object not alert when I've made it, saved it, and want to alert it?

I'm making a code where the user enters information and it stores it in an object, but when I check if the object is saved by alerting one of its values it says there is no such object.
here is my code.
let users = {};
function user(name,real){
this.username = name,
this.realname = real,
this.id = Math.floor(Math.random() *1000);
this.subs = 0,
this.videos = [],
this.listuser = function() {
return this.username;
}
};
function newuser(name, email,username){
users[name] = new user(username, name);
};
let savefile = () => {
var channame = string(document.getElementById('channame'));
var name = string(document.getElementById('name'));
var email = string(document.getElementById('email'));
newuser(name,email,channame);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>youtube ripoff</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<br> <br><br><br><br><br>
<form action="">
<label for="username">Channel Name: </label>
<input type="text" id="channame" name="channelname"><br>
Real Name
<input type="text" id="name" name="name"><br>
Email
<input type="text" id="email" name="email"><br>
<input type="submit" value="Submit" onmousedown="newuser('name1','name#gmail.com','channelname1');">
<br><br><br><br>
<input type="button" value="Load Channels" id="seech" name="seechannels" onmousedown="alert(users['name1'].listuser());"><br>
</form>
<script src="script.js">
function fun(){
window.alert("starting program...")
//other code
}
</script>
</body>
</html>
Is there some sort of error that I'm not seeing?
After click on submit button in form with action="" page is reload and all data is lost. Pleas use:
<form action="javascript:void(0)">
instead of
<form action="">
This prevent page reload.

Not able to print the array once new item added using push method

I am new to JavaScript. below is my code to print array once new item is added but not printing the array. can someone help. below is my code. I am also not getting any error in console. I have used push method to add new item to array and once added calling display function to print the array.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<input type="text" id="item" >
<br>
<br/>
<input type="button" value="Push" onClick="Push()">
<input type="button" value="Pop" onClick="Pop()">
<input type="button" value="Shift" onClick="Shift()">
<input type="button" value="UnShift" onClick="UnShift()">
<div id="list_items"> </div>
<script type="text/javascript">
var arra1=[12,34,56,67,78,89,87];
function display()
{
var lists=document.getElementById('list_items');
document.write("Array items are:<br>" );
for(var i=0;i<arra1.length;i++)
{
var para = document.createElement('div');
lists.appendChild(para);
para.innerHTML = arra1[i];
}
}
function Push()
{
var item1=document.getElementById("item").value;
arra1.push(item1);
display();
}
function Pop()
{
arra1.pop();
display();
}
</script>
</body>
</html>
So I just Edited this a little bit and got it working.
var arra1=[12,34,56,67,78,89,87];
function display()
{
var lists=document.getElementById('list_items');
for(var i=0;i<arra1.length;i++)
{
var para = document.createElement('p');
lists.appendChild(para);
para.innerHTML = arra1[i];
}
}
function Push()
{
var item1=document.getElementById("item").value;
arra1.push(item1);
display();
}
function Pop()
{
arra1.pop();
display();
}
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<input type="text" id="item" >
<br>
<br/>
<input type="button" value="Push" onClick="Push()">
<input type="button" value="Pop" onClick="Pop()">
<input type="button" value="Shift" onClick="Shift()">
<input type="button" value="UnShift" onClick="UnShift()">
<div id="list_items">
</div>
<scrip
</script>
</body>
</html>

I am trying to convert Fahrenheit to Celsius but it's not working what am i doing wrong? - Javascript (needs to have a form and a clear button)

<html>
<head>
<title>
Form
</title>
</head>
<body>
<script type="text/javascript">
function calculate (form)
{
cel = fah * 0.5555 - 32;
document.getElementById("finish").innerHTML = cel;
}
</script>
<form name="myform" action="" method="get"> Turn Fahrenheit to Celsius! <br>
<input type="number" name="fah">
<input type="button" name="button" value="calculate" onClick="calculate(this.form)">
<button type="reset" value="Reset">Reset</button>
</form>
<p id="finish">°C</p>
</body>
</html>
Edit1: Moved the inner.HTML into the Function
So the reset button is the only thing that works. Is it possible to calculate the math this way?
You asked a question on how to create a pizza form a while ago and you deleted it soon as it was down voted a few times.
The point to note here is, it is okay if a few people dislike your question. You've joined StackExchange not to gain points but to learn a few things. Your question could be helpful to a lot of others out there in this world. So here it is the answer to your pizza question
<html>
<body>
<p>A pizza is 13 dollars with no toppings.</p>
<form action="form_action.asp">
<input type="checkbox" name="pizza" value="Pepperoni" id="pep">Pepperoni + 5$<br>
<input type="checkbox" name="pizza" value="Cheese" id="che">Cheese + 4$<br>
<br>
<input type="button" onclick="myFunction()" value="Send order">
<input type="button" onclick="cost()" value="Get cost">
<br><br>
<input type="text" id="order" size="50">
</form>
<script>
function myFunction() {
var pizza = document.forms[0];
var txt = "";
var i;
for (i = 0; i < pizza.length; i++) {
if (pizza[i].checked) {
txt = txt + pizza[i].value + " ";
}
}
document.getElementById("order").value = "You ordered a pizza with: " + txt;
}
function cost() {
var pep = 5;
var che = 4;
var pizza = 13;
var total = 0;
if (document.getElementById("pep").checked === true) {
total += pep;
}
if (document.getElementById("che").checked === true) {
total += che;
}
document.getElementById("order").value = "The cost is : " + total;
}
</script>
</body>
</html>
Thanks. I hope this helps you.
Adeno Fixed it by declaring what fah was. you can also see your errors with f12.
https://stackoverflow.com/users/965051/adeneo
<html>
<head>
<title>
Form
</title>
</head>
<body>
<script type="text/javascript">
function calculate(form) {
var cel = (document.getElementById("fah").value -32) * 5 / 9;
document.getElementById("finish").innerHTML = cel;
}
</script>
<form name="myform" action="" method="get"> Turn Fahrenheit to Celsius!
<br>
<input type="number" name="fah" id="fah">
<input type="button" name="button" value="calculate" onClick="calculate(this.form)">
<button type="reset" value="Reset">Reset</button>
</form>
<p id="finish">°C</p>
</body>
You never get the value from the input type = "number"
Try this
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
function calculate()
{
var fah = document.getElementById('fah').value;
var cel = parseFloat(fah * 0.5555 - 32);
document.getElementById("finish").innerHTML = cel;
}
</script>
</head>
<body>
<form>
Turn Fahrenheit to Celsius! <br>
<input type="text" name="fah" id="fah">
<input type="button" name="button" value="calculate" onClick="calculate()">
<button type="reset" value="Reset">Reset</button>
</form>
<p id="finish">°C</p>
</body>
</html>
Couple things: You need to set the innerhtml from within the function because the variable is in the function. Or you could have declared the variable outside the function first like var fah = "" then the function. But since you declared it in the function only the function can see it. So i moved the innerhtml set into the function.
Also, javascript likes to use id's not name = "fah" You can call an element by name but id is easier.
i rounded it to integer. you would get 9 decimals your way.
Lastly, innerhtml set clears all the html so you would lose the °C the way you had it.
<html>
<head>
<title>
Form
</title>
</head>
<body>
<script type="text/javascript">
function calculate (form)
{
var fah = this.fah.value;
cel = Math.round((fah-32) / 1.8);
document.getElementById("finish").innerHTML = cel+"°C";
}
</script>
<form name="myform" action="" method="get"> Turn Fahrenheit to Celsius! <br>
<input type="number" name="fah" id = "fah">
<input type="button" name="button" value="calculate" onClick="calculate(this.form)">
<button type="reset" value="Reset">Reset</button>
</form>
<p id="finish"></p>
</body>
</html>

How Can I use form items in javascript

I want to use HTML form elements in JavaScript. I used them like this but it doesn't work:
<form name="M">
<input name="in1" type="text" id="in1">
<input type="button" name="btn1" id="btn1" value="Check" onclick="f1()">
</form>
<script src="script.js"></script>
...and the JavaScript code was like this:
var s1 = 60;
function f1() {
``
if (document.M.elements[0] == s1) {
window.location = 'tick.htm';
} else {
window.location = 'cross.htm';
}
}
What is wrong here?
Just to give some clarification on why this was not working. In the test, document.M.elements[0] is a reference to the input object, not the value of the input. Using document.M.elements[0].value gives us the current value of the input.
//Ignore this, for display only.
function output(msg) {
var element = document.getElementById('output');
element.innerHTML = msg;
};
function f1() {
var s1 = 60;
if (document.M.elements[0].value == s1) {
output('Pass');
} else {
output('Fail');
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<form name="M">
<input name="in1" type="text" id="in1">
<input type="button" name="btn1" id="btn1" value="Check" onclick="f1()">
</form>
<b id="output"></b>
</body>
</html>

XML Restful parsing

I need to search for a 'term' and then display the data in the html page.
See more info here.
http://www.nlm.nih.gov/medlineplus/webservices.html
The data that needs to be displayed is
"title"
"FullSummary"
"groupName"
"snippet"
I am a beginner when it comes to ajax and javascrpt
What I have so far is:
<html>
<head runat="server">
<title></title>
<script type="text/javascript">
function DoSearch() {
'http://wsearch.nlm.nih.gov/ws/query?db=healthTopics&term='($get("searchterm"), DoCallback);
}
function DoCallback(result) {
for (var i = 0; i < result.length; i++) {
$get("searchterm").innerHTML += results[i] + "<br/>";
}
}
</script>
</head>
<body>
<form name="input">
Search Term: <input type="text" name="searchterm" value=""><br>
<input type="button" onclick="mySearch()" value="Search">
</form>
<div id="searchResultsPlaceholder">resultsDiv
</div>
</body>
</html>
Can anyone advise?
Ajax will work based on Same Origin Policy.
Assume you are using Same Origin Policy while accessing url via XMLHttpRequest
<html>
<head runat="server">
<title></title>
<script type="text/javascript">
function mySearch()
{
var term = $("#searchterm").val();
$.get("http://wsearch.nlm.nih.gov/ws/query",
{
db:"healthTopics",
term:term
},
function(result,status){
var resultHTML=""
for (var i = 0; i < result.length; i++) {
resultHTML + = results[i] + "<br/>";
}
$get("searchResultsPlaceholder").innerHTML =resultHTML;
});
}
</script>
</head>
<body>
<form name="input">
Search Term: <input type="text" name="searchterm" value=""><br>
<input type="button" onclick="mySearch()" value="Search">
</form>
<div id="searchResultsPlaceholder"></div>
</body>
</html>

Categories