How to do autofocus for a google web app script? - html

I am writing my first Google webapp. I am trying to setup a form with an input but cannot get focus on the first input. Is there some trick to doing autofocus in google webapps? In the following code focus is not given to the input.
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head> <body>
<form>
<h1>Enter Loan Details</h1>
<br>
<label for="multiInput">Scan Number / Name or Hardware Tag</label>
<input type="text" id="multiInput" name="multiInput" autofocus>
</form> </body> </html>

Focus on element of your choice
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Hello</h1>
<label>Your name: </label>
<input id="first" type="text" size = "25" />
<script>
//waits for window to load
window.onload = function() {
document.getElementById('first').focus();
}
</script>
</body>
</html>
HTMLElement.focus()
addMetaTag(name, content)
getTitle()
function showdialog() {
let ui = SpreadsheetApp.getUi();
ui.showModelessDialog(HtmlService.createHtmlOutputFromFile('ah2'),Test Dialog')
}

Related

How to get the input field Value and put it in a paragraph?

I want to get the value of an input field and put the value in between a paragraph and a <strong></strong> tag.
$(document).ready() {
$("#submit").on("click", function() {
let inputval = $("#name").val();
$(".inputvalue").val(inputval);
})
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<body>
<header>
<h1>Jquery</h1>
</header>
<main>
<section>
<label for="name">Name</label>
<input type="text" id="name">
<input type="submit" id="submit">
<p class="inputvalue">Hallo <strong>here goes the value of the input field</strong></p>
</main>
<link rel="stylesheet" href="/lib/css/styleswebd06.css">
<script src="/lib/jquery.min.js"></script>
<script src="/lib/js/appwebd06.js"></script>
</body>
</html>
i tried to get the value of the input field #name in class .inputvalue
to geht the text hallo inputvalue
Could you try this :
$(document).ready()
{
$("#submit").on("click", function () {
let inputval = $("#name").val();
$(".inputvalue").html('HELLO <strong>' + inputval + '</strong>');
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<body>
<header><h1>Jquery</h1></header>
<main>
<section>
<label for="name">Name</label>
<input type="text" id="name">
<input type="submit" id="submit">
<p class="inputvalue">Hallo <strong>here goes the value of the input field</strong></p>
</main>
<link rel="stylesheet" href="/lib/css/styleswebd06.css">
<script src="/lib/jquery.min.js"></script>
<script src="/lib/js/appwebd06.js"></script>
</body>
</html>
$(".inputvalue strong").text(inputvalue);
$(".inputvalue").html('HELLO <strong>' + inputval + '</strong>');
Thank you very much.

How to get information from a radio button?

I am currently in the process of creating a form and was wondering if there is a way to save radio button information within the function send data. Is there a specific method or technique that I can use to achieve this?
<!DOCTYPE html>
<head>
<base target="_top">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Form</title>
</head>
<body>
<div class="container">
<br>
<h1>Custom HTML Forms to Google Sheet</h1>
<br>
<div id="form">
<form>
<div class="form-group">
Are you a freshman, sophomore, junior, or senior?
<br>
<input type="radio" name="class" value="freshman"> Freshman
<br>
<input type="radio" name="class" value="sophomore"> Sophomore
<br>
<input type="radio" name="class" value="junior"> Junior
<br>
<input type="radio" name="class" value="senior"> Senior
</div>
<div id="completion-msg" style="display: none;">
Thank you for completing this form!
</div>
</div>
<script>
function send_data(){
const form_data = document.getElementsByClassName("form-data"); //retrieve filled form data
let i;
const data = [];
for(i=0; i<form_data.length; i++){
data.push(form_data[i].value);
}
google.script.run.saveData(data); // send to google app script
document.getElementById("form").style.display = "none"; // make form invisible
document.getElementById("completion-msg").style.display = "block";
}
</script>
</body>

How to select a dropdown menu option and populate information from an object

Hi I am trying to work on this simple program to display information of the selected item based on dropdown menu.If plotnumber 1 is selected from the dropdown menu I want to display rate and area of plotnumber1 and later on calculate the toal price of the plot.Also wanted to add a term called installment for the payment options; likewise when purchasing the plot downpayment option is provided,and the rest of the payment in required to be made in terms of installment; likevise for the first 1.5 months installment is 30% and for the remaining quarters the installment is 70%; I want information for the rate and area to be populated for the selected plotnumber from the dropdown menu.
**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************`
app.js
var plot = [
{ plotnumber:1,
area:1000,
rate:5000
},
{plotnumber:2,
area:2000,
rate:1500},
{plotnumber:3,
area:3000,
rate:1100}
];
for(var i = 0; i < plot.length;i++){
document.getElementById("#selectNumber").append("<option value = '" + plot[i].plotnumber + "'>" + plot[i].area + plot[i].rate + "</options>");
}`
```<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" type = "text/css" href="style1.css">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400;600&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="top">
<div class="budget">
<form id="signup" class="form">
<h1>Plot Registration Form</h1>
<div class="form-field">
<label for="username">Customer Name:</label>
<input type="text" name="username" id="username" autocomplete="off">
<small></small>
</div>
</form>
<br>
<form id="myForm">
<label for="plotnumber">Plot Number:</label>
<select id="selectNumber">
<option>Choose a Plot number</option>
</select>
</form>
</div>
</div>
<div class="plot-selection">
<p id = "demo"></p>
</div>
<script src =app.js></script>
</body>
</html>```

Tried to run the html page but the output is now what I expected

I tried to run this page with the given input but it doesn't display any output instead it reloads and displays an empty result.This is the given input And this is the output which I received . Below I have attached the code snippet.
const formEl = document.querySelector('form');
const sentenceInputEl = document.querySelector('#sentence');
const letterInputEl = document.querySelector('#letter');
formEl.addEventListener('submit', (e) => {
e.preventDefault();
const letterIndex = sentenceInputEl.value.indexOf(letterInputEl.value);
if (letterIndex === -1 || letterInputEl.value === ''") {
alert("The letter doesn't exist in the sentence");
} else {
const slicedWord = sentenceInputEl.value.slice(letterIndex + 1);
alert(slicedWord);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="script.js" defer></script>
<title>Document</title>
</head>
<body>
<main>
<form>
<div>
<label for="sentence">Sentence</label>
<input type="text" name="sentence" id="sentence" />
</div>
<div>
<label for="letter">Letter</label>
<input type="text" name="letter" id="letter" />
</div>
<button type="submit">Submit</button>
</form>
</main>
</body>
</html>

How to apply html stylistic tags to conditional statements?

I do not know anything about coding and html.
I am trying to create a kind of calculator that detects upper bounds. For example, a number is read and if it surpasses the number 20, the box should highlight red. See below for what I have come up with so far:
<head>
<title>Form</title>
<style> .red{
color: red;
}
</style>
</head>
<body>
<input type="number" placeholder="Length" id="length">
<input type="number" placeholder="Width" id="width">
<input type="number" placeholder="Height" id="height">
<input type="number" placeholder="Weight" id="weight">
<script>
function condition()
{
var len=document.getElementById("length").value);
var wid=document.getElementById("width").value);
var hei=document.getElementById("height").value);
var wei=document.getElementById("weight").value);
if (len >="20"){
<p class="red">This is some paragraph with red color.</p> //<<<This is where I have the issue. I do not know how to display the color after it is read and accepted.
}
</script>
<button type ="button" onclick="condition()">Calculate</button>
</body>
</html>
This is what you were trying to do. If you want the box to be red, just change the document.getElementById("target") to width or whatever you need, and then in the style in the .red class change color to border-color. After that, you need to make a reset mechanism so it won't stay red the next time you press the button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.red {
color: red;
}
</style>
<input type="number" placeholder="Length" id="length">
<input type="number" placeholder="Width" id="width">
<input type="number" placeholder="Height" id="height">
<input type="number" placeholder="Weight" id="weight">
<p id="target"></p>
<button type="button" onclick="condition()">Calculate</button>
<script>
function condition() {
let len = document.getElementById("length").value;
let wid = document.getElementById("width").value;
let hei = document.getElementById("height").value;
let wei = document.getElementById("weight").value;
if (len >= 20) {
let target = document.getElementById("target");
target.innerText = "This is some paragraph with red color.";
target.classList.add("red");
}
}
</script>
</body>
</html>