I want to add a "show password" button with bootstrap 5 - html

i want something like this
Image form bootstrap
but i get this instead
Image on my localhost
And this is my code:
<input
type="password"
class="form-control"
placeholder="contraseña"
id="password-input"
aria-label="password input"
aria-describedby="password-input"
/>
<span class="input-group-text" id="password-input">#</span>
All the examples that i see in internet are the same, looks nice but i put the code in my proyect and don't work :(

Wrap your input and span tag with this way
<div class="input-group flex-nowrap">
<input type="password" class="form-control" placeholder="contraseña" id="password-input" aria-label="password input" aria-describedby="password-input" />
<span class="input-group-text" id="password-input">#</span>
</div>

<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>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
i {
cursor: pointer;
}
</style>
<body>
<div>
<!-- Password field -->
<label for="Password">Password:
<input type="password" class="border border-0" value="" id="myInput">
<!-- An element to toggle between password visibility -->
<i class="fa fa-eye" style="font-size:24px" onclick="myFunction()"></i>
</label>
</div>
<script>
function myFunction() {
var x = document.getElementById("myInput");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>
</body>

Related

convert asynchronous onSuccess into a promise and do await

I have html page with inputs
<!doctype html>
<html lang="en">
<head>
<title>CLR: PACKING</title>
<meta charset = "UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<?!= include("index-css"); ?>
</head>
<body>
<div class="conteiner">
<form novalidate>
<h6 class="title">PACKING</h6>
<div class="dws-input">
<div class="col-md-3"></div>
<div>
<div>
<button id="del" type="button"><RESET</button>
</div>
<div class="form-floating mb-3 mt-3">
<input type="text" class="form-control" novalidate id="tLogin" name= "username" placeholder= "Логин:" autofocus >
<label for="tLogin">Login:</label>
</div>
<div class="form-floating mb-3 mt-3">
<input type="text" class="form-control" novalidate id="tTable" name= "text" placeholder= "Номер стола:" >
<label for="tTable">Table:</label>
</div>
</div>
<div class="form-floating mb-3 mt-3">
<input type="text" novalidate class="form-control" id="tOrder" name= "text" placeholder= "Заказ:" >
<label for="tOrder">Order:</label>
</div>
</div>
</form>
</div>
<?!= include("index-js"); ?>
</body>
</html>f
In include(index-js.html) I wrote this
<script>
var curInpID;
var findData;
function keyPressFunction(ev) {
var inputData = ev.target.value;
if (ev.code !== 'Enter') return;
curInpID = ev.target.id;
google.script.run.withSuccessHandler(onSuccess).searchData(inputData);
console.log(findData); //result onSuccess here
for (const i of formControl) {
if (i.value === '') {
i.nextElementSibling.focus();
break;
}
}
}
function onSuccess(_findData) {
findData = _findData;
}
</script>
onSuccess goes to apps script, check value at input there and return true/false in findData
function searchData(data){
for (let i = 0; i < arrLogins.length; i++){
if(arrLogins[i].indexOf(login)!==-1){
firstValid = true;
return firstValid;
}
}
firstValid = false;
return firstValid;
}
Because of onSuccess is asynchronous, this way works slowly and sometimes returns wrong value to the findData. In the previous topic, a colleague suggested to me to convert it into a promise and do await.
I found some examples with async, await and promise on this site, but I can't understand, what I need to transform here. Please, help me! Thank you!

Trying to send data from html to google spreadsheet by fetch and post

I'm trying to go like author in youtube here
https://www.youtube.com/watch?v=yiPnkBEHqf0&list=PLRmEk9smitaVGAAhgU0Pdc2sEs7yxDrEk&index=2
the task to send data to google spreadsheet from html to spreadsheet
this script I wrote from js with fetch:
const url = "https://script.google.com/macros/s/AKfycbzPNAtqRkYrkbJ8SuDu5mLrtn8A3syzkU7CwzXHUEHXTxJbSLKn/exec";
var loginText = document.getElementById("tLogin");
var tableText = document.getElementById("tTable");
var orderText = document.getElementById("tOrder");
function testGS(){
var userInfo = {
login: loginText.value,
table: tableText.value,
order: orderText.value,
tdate: new Date().toLocaleDateString(),
//komm: kommText.value,
};
fetch(url, {
method: 'POST',
body: JSON.stringify(userInfo)
})
.then((res) => res.text())
.then((res) => console.log(res));
}
document.getElementById("del").addEventListener("click", testGS);
This I wrote in Apps script:
<!-- begin snippet: js hide: false console: true babel: false -->
The html-page is here.
<!doctype html>
<html lang="en">
<head>
<title>CLR: PACKING</title>
<meta charset = "UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="CSS/main_page_style.css">
<link rel="icon" href="Image/favicon.png" type="png">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>
<div class="conteiner">
<form novalidate>
<h6 class="title">PACKING</h6>
<img src="Image/mainImg.jpg" class="img-fluid" alt="...">
<div class="dws-input">
<div class="col-md-3"></div>
<div>
<div>
<button id="del" type="button"><======СБРОС</button>
</div>
<div class="form-floating mb-3 mt-3">
<input type="text" class="form-control" novalidate id="tLogin" name= "username" placeholder= "Логин:" autofocus >
<label for="tLogin">Логин:</label>
</div>
<div class="form-floating mb-3 mt-3">
<input type="text" class="form-control" novalidate id="tTable" name= "text" placeholder= "Номер стола:" >
<label for="tTable">Номер стола:</label>
</div>
</div>
<div class="form-floating mb-3 mt-3">
<input type="text" novalidate class="form-control" id="tOrder" name= "text" placeholder= "Заказ:" >
<label for="type3">Заказ:</label>
</div>
</div>
</form>
</div>
<script src="JS/fetchNew.js"></script>
</body>
</html>
Js-script with fetch must be start by clicking button "del" and data must go to spreadsheet. But I take some errors. I have broke my brain, I tryed to reinstall node.js, clasp, tried to login again, prn init, republished my project, but mistake is the same
Can you help me what I forgot? Thank you for help!
The path with spreadsheet is here https://drive.google.com/drive/folders/1JwWgndNrcM2hgxyE3CBF0SKOxZarwCCf?usp=sharing

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