How to get information from a radio button? - html

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>

Related

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>```

How to do autofocus for a google web app script?

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')
}

How can I send an array of post data from one html form to another?

I want to send all the input data acquired from a html form and show them (as a preview) in another html form.
My first html form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cafteria details</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Cafeteria registration</h2>
<form id="details" method="POST">
Full name: <input type="text" id="name" size=25 "><br><br>
Organization:<div id="org"><input type="checkbox" id="cb1" onclick="check()">ID no: <input type="number" id="org_number" style="visibility: hidden"><br><br>
<input type="checkbox" id="cb2" onclick="check()">Mobile No: <input type="tel" id="ph_number" style="visibility: hidden" required></div><br><br>
E-mail: <input type="email" id="email" size=25><br><br>
Upload ID Card: <input type="file" accept=".jpeg , .png" id="img"><br><br>
</form>
<button id="button" style="background-color: whitesmoke" onclick="submit()" >Register</button>
<script src="back_end.js" async></script>
</body>
</html>
The javascript (back_end.js)
var btn=document.getElementById("button");
function submit(){
var file = document.getElementById("img").files[0];
const reader = new FileReader();
reader.addEventListener("load", (event) => {
localStorage.setItem("Image", event.target.result);
const dForm = document.getElementById('details');
dForm.addEventListener('submit', function(e) {
e.preventDefault();
fetch("preview.html", {
method: 'post',
mode: 'cors',
headers: {'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, HEAD, OPTIONS'},
body: JSON.stringify({
full_name: document.getElementById("name").value,
mobile: document.getElementById("ph_number").value,
Email: document.getElementById("email").value,
image: localStorage.getItem('Image'),
id: document.getElementById("org_number").value
})
}).then(function (response){
return response.text();
}).then(function (text){
console.log(text);
}).catch(function (error){
console.error(error);
})
});
window.location.href = "preview.html";
});
reader.readAsDataURL(file);
}
My second html form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preview</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="preview_back_end.js"async></script>
<link rel="stylesheet" href="preview_styles.css">
</head>
<body>
<h2>Please finalize your details</h2>
<form id="details" method="post" class="form">
Full name: <strong name="name_1" value=""></strong><br><br>
ID No:<strong name="org_number_1" value=""></strong><br><br>
Mobile No:<strong name="ph_number_1" value=""></strong><br><br>
E-mail: <strong name="email_1"></strong><br><br>
ID Card: <img src="" alt="preview" name="image" style="width: 100px; height: 100px;" value=""><br><br>
<button id="go" style="background-color: whitesmoke">It's correct</button>
</form>
<button id="back" style="background-color: whitesmoke" onclick="goback()">Something's wrong</button>
<p id="response"></p>
</body>
</html>
Now I want to fetch those values and write them in this new html form, how do I do that? Also, from the second html page I want to post the data into my php script.

Oh, This is the front end.
But you need backend.
You can use "PHP" implement form upload.
Only using javascript can not achieve form upload.
***.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cafteria details</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Cafeteria registration</h2>
<form id="details" method="POST" action="demo.php">
Full name: <input type="text" id="name" size=25 " name="fullname"><br><br>
Organization:<div id="org"><input type="checkbox" id="cb1" onclick="check()" name="org">ID no: <input type="number" id="org_number" style="visibility: hidden" name="id"><br><br>
<input type="checkbox" id="cb2" onclick="check()">Mobile No: <input type="tel" id="ph_number" style="visibility: hidden" required name="mobile"></div><br><br>
E-mail: <input type="email" id="email" size=25 name="email"><br><br>
Upload ID Card: <input type="file" accept=".jpeg , .png" id="img" name="idcard"><br><br>
</form>
<button id="button" style="background-color: whitesmoke" onclick="submit()" >Register</button>
<script src="back_end.js" async></script>
</body>
</html>
demo.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preview</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="preview_back_end.js"async></script>
<link rel="stylesheet" href="preview_styles.css">
</head>
<body>
<h2>Please finalize your details</h2>
<form id="details" method="post" class="form">
Full name: <strong name="name_1" value=""><?php echo $_POST["fullname"]; ?></strong><br><br>
ID No:<strong name="org_number_1" value=""><?php echo $_POST["id"] ?></strong><br><br>
Mobile No:<strong name="ph_number_1" value=""><?php echo $_POST["mobile"] ?></strong><br><br>
E-mail: <strong name="email_1"><?php echo $_POST["email"]; ?></strong><br><br>
ID Card: <img src="<?php echo $_POST["idcard"]; ?>" alt="preview" name="image" style="width: 100px; height: 100px;" value=""><br><br>
<button id="go" style="background-color: whitesmoke">It's correct</button>
</form>
<button id="back" style="background-color: whitesmoke" onclick="goback()">Something's wrong</button>
<p id="response"></p>
</body>
</html>
You also need to specify whether to get or post.
You can ask me any questions.

html checkbox switch active/inactive labels not working

I am using the switch class from foundation-zurb and I am using the example from their website, but the inside labels for the inactive/active settings are not working. The code is below:
<p>Above/Below</p>
<div class="switch">
<input class="switch-input" id="Above/Below" type="checkbox" name="ABSwitch">
<label class="switch-paddle" for="Above/Below">
<span class="switch-active" aria-hidden="true">A</span>
<span class="switch-inactive" aria-hidden="true">B</span>
</label>
</div>
The A and B on the respective active/inactive settings of the switch do not show up.

Try something like this:
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="https://cdn.jsdelivr.net/foundation/6.1.1/foundation.min.css" rel="stylesheet" />
</head>
<body>
<p>Above/Below</p>
<div class="switch">
<input class="switch-input" id="Above/Below" type="checkbox" name="ABSwitch">
<label class="switch-paddle" for="Above/Below">
<span class="switch-active" aria-hidden="true">A</span>
<span class="switch-inactive" aria-hidden="true">B</span>
</label>
</div>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.1.1/js/foundation.accordion.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>

html form sending GET instead of POST on form submit

Pardon my web skills but i have a very rudimentary problem.
I have this html form which should ideally call my /login url with post but for some reason it always sends a get request to that url and fails. I can't figure out how that is happening.
This is my html form
<!DOCTYPE html>
<html class="no-js">
<head>
<title>Login - MobileMedic</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="">
<meta name="author" content="" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,800italic,400,600,800" type="text/css">
<link rel="stylesheet" href="./css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="./css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="./css/jquery-ui-1.9.2.custom.min.css" type="text/css" />
<link rel="stylesheet" href="./css/App.css" type="text/css" />
<link rel="stylesheet" href="./css/Login.css" type="text/css" />
<link rel="stylesheet" href="./css/custom.css" type="text/css" />
<script src="./js/jquery-1.9.1.min.js"></script>
<script src="./js/alert.js"></script>
<script src="./js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/plugins/parsley/parsley.js"></script>
</head>
<body>
<div class="gifload"></div>
<div id="login-container">
<div id="logo">
<img src="./images/logos/logo-login.png" alt="Logo" />
</div>
<div id="login">
<h3>Welcome to Apprick Technologies.</h3>
<h5>Please sign in to get access.</h5>
<form method="post" action="/login" id="login-form" class="form parsley-form" data-validate="parsley">
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="Email" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" placeholder="Password" required="required">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary btn-block" name= "Signin" value="Signin"/>
</div>
</form>
</div>
</div>
<!-- /#login-container -->
</body>
To make the question more clear i use express js with parse.com and here are the two routing defined
app.get('/login', function(req, res) {
res.send('get is called');
});
app.post('/login', function(req, res) {
res.send('post is called');
});
Now no matter what i provide in my form method i always get "get is called" in the browser on submitting the button.
I also tried to debug what is happening in by the developer console and this is what i get

I tried your code and it is working as a "POST" request. Try changing your request to "GET" and you can notice in the URL that it has something like this at the end "?Signin=Signin".
Include a "name" attribute to your input tags.
Sample:
<input type="email" name="email" class="form-control" id="email" placeholder="Email" required="required">
And you can see something like this upon submitting the form:
/login?email=testemail%40test.test&Signin=Signin