i cannot change language for my placeholder text. i can only change language for normal button text , head text but i cannot change language for placeholder text. please help to suggest anything i need to add on in my code. thanks
<!DOCTYPE html>
<html>
<head>
<title>Node.js app</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="Style.css" />
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<label class="switch">
<input type="checkbox" id="togBtn">
<div class="slider round">
<span language='myanmar' class="on">MYN</span>
<span language='english' class="off">ENG</span>
</div>
</label>
<div class="form-group">
<input type="text" class="form-control usrplaceholder" placeholder="Username" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control pwplaceholder" name="pw" placeholder="Password" required="required">
</div>
<script>
document.querySelector('#togBtn').addEventListener('input', (event) => {
document.querySelector('.usrplaceholder').textContent = data[event.currentTarget.checked ? 'myanmar' : 'english'].usrplaceholder;
document.querySelector('.pwplaceholder').textContent = data[event.currentTarget.checked ? 'myanmar' : 'english'].pwplaceholder;
});
var data = {
"english": {
"usrplaceholder": "Username",
"pwplaceholder": "Password"
},
"japanese": {
"usrplaceholder": "အသုံးပြုသူအမည်",
"pwplaceholder": "စကားဝှက်",
}
}
</script>
</body>
</html>
There's two problems in your code.
Firstly you're trying to access the myanmar property of the data object when it doesn't exist. The only properties, in the example code at least, as english and japanese.
Secondly, the input elements do not have a textContent property. From the context it looks like you're trying to set the placeholder property instead.
document.querySelector('#togBtn').addEventListener('input', (event) => {
document.querySelector('.usrplaceholder').placeholder = data[event.currentTarget.checked ? 'japanese' : 'english'].usrplaceholder;
document.querySelector('.pwplaceholder').placeholder = data[event.currentTarget.checked ? 'japanese' : 'english'].pwplaceholder;
});
var data = {
"english": {
"usrplaceholder": "Username",
"pwplaceholder": "Password"
},
"japanese": {
"usrplaceholder": "အသုံးပြုသူအမည်",
"pwplaceholder": "စကားဝှက်",
}
}
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<label class="switch">
<input type="checkbox" id="togBtn">
<div class="slider round">
<span language='myanmar' class="on">MYN</span>
<span language='english' class="off">ENG</span>
</div>
</label>
<div class="form-group">
<input type="text" class="form-control usrplaceholder" placeholder="Username" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control pwplaceholder" name="pw" placeholder="Password" required="required">
</div>
Related
I have a form with a select field (for this case is the first name), I want to select one of the options and with that data selected, the other fiels should be auto completed.
The data is comming from an API.
I'm able to have the dropdown working but whenever I select one option the fields aren't being populated.
Can someone help me, please?
This is my javascript:
document.addEventListener('DOMContentLoaded',() => {
const nomeSelectDrop = document.getElementById('nome');
const sobrenome = document.getElementById('sobrenome');
const email = document.getElementById('email');
const password = document.getElementById('password');
fetch('http://localhost:5000/user')
.then(res => {
return res.json();
})
.then(data => {
let output = "";
data.forEach(users => {
output += `<option value = "${users.firstName}">${users.firstName}</option>`;
})
nomeSelectDrop.innerHTML = output;
})
.catch(err => {
console.log(err);
})
nome.addEventListener('change', (event) => {
sobrenome.innerHTML = event.target.lastName.value;
email.innerHTML = event.target.email.value;
password.innerHTML = event.target.password.value;
})
})
This is my html:
<!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="stylesheet" type="text/css" href="style.css">
<title>Form Exercise</title>
</head>
<body>
<form class="formulario">
<div class="field">
<label for="nome">Nome:</label>
<select id="nome" name="nome"></select>
</div>
<div class="field">
<label for="sobrenome">Sobrenome:</label>
<input type="text" id="sobrenome" name="sobrenome" placeholder="sobrenome" required>
</div>
<div class="field">
<label for="email">E-Mail:</label>
<input type="email" id="email" name="email" placeholder="e-mail" required>
</div>
<div class="field">
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="password" required>
</div>
<div class="buttons">
<input type="submit" name="atualizar" value="Atualizar">
<input type="submit" name="eliminar" value="Eliminar">
</div>
</form>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
Be aware that some of the #ids and names in HTML has been changed (I think slower reading foreign words -- I'm dumb that way 😕). HTMLFormElement and HTMLFormControlsCollection interfaces were used to reference <form>, <input>, and <select>. The most important part is declaring a variable outside of fetch(), then defining that variable as the data within fetch() which brings the data within scope for functions, expressions, etc outside of fetch().
Details are commented in example below
// Reference the <form>
const exc = document.forms.exc;
document.addEventListener('DOMContentLoaded', (e) => {
/*
Collect all <select>,<fieldset>,<input> into a HTMLCollection
*/
let io = exc.elements;
// Declare a variable outside of fetch()
let users;
fetch('https://my.api.mockaroo.com/userlist.json?key=3634fcf0')
.then(res => {
return res.json();
})
.then(data => {
/* IMPORTANT
Define users as JSON data -- now the JSON is in scope within
this event handler
*/
users = data;
let output = "";
data.forEach(user => {
output += `<option value = "${user.first}">${user.first}</option>`;
});
/*
Use insertAdjacentHTML() instead of innerHTML -- it doesn't destroy
content it adds to content.
*/
io.first.insertAdjacentHTML('beforeend', output);
})
.catch(err => {});
/*
Bind <form> to the change event
*/
exc.addEventListener('change', (e) => {
// Reference the tag user is interacting with
const sel = e.target;
/*
If the tag the user is interacting with is a <select>...
*/
if (sel.matches('select')) {
// Find the index of selected <option>
let idx = sel.selectedIndex;
/*
users = JSON
Reference index of users with index of selected <option>
*/
io.last.value = users[idx].last;
io.email.value = users[idx].email;
io.password.value = users[idx].password;
}
});
});
html {font: 2ch/1.25 'Segoe UI'}
fieldset {max-width: max-content;}
legend {font-size:1.25rem}
input, select, label {display: inline-block; margin: 2px; font: inherit;}
input:not([type='submit']) {width: 32ch}
[type='submit'] {float: right; cursor: pointer;}
select {width: 33ch}
<!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 href="style.css" rel="stylesheet">
<title>Form Exercise</title>
</head>
<body>
<form id="exc">
<fieldset class="field">
<legend>User Registration</legend>
<label for="first">First Name: </label><br>
<select id="first" name="first">
<option selected disabled>Select a user</option>
</select><br>
<label for="last">Last Name:</label><br>
<input id="last" name="last" required><br>
<label for="email">E-Mail:</label><br>
<input id="email" name="email" type="email" placeholder="user#mail.com" required><br>
<label for="password">Password:</label><br>
<input id="password" name="password" type="password" placeholder="Min 8 characters" required>
<menu class="buttons">
<input name="update" type="submit" value='Update'>
<input name="remove" type="submit" value="Remove">
</menu>
</fieldset>
</form>
<script src="app.js"></script>
</body>
</html>
I am totally new to this stuff and get quite nothing of it.
I used some tutorials to write this, but I don't know how to get the link to the uploaded document in the google sheet.
This is the Apps Script code:
function doGet() {
var html = HtmlService.createHtmlOutputFromFile('index');
return html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
// App Script function to save data to sheet
function saveData(data) {
var sheet = SpreadsheetApp.getActiveSheet();
sheet.appendRow(data);
}
function uploadFiles(data)
{
var file = data.myFile;
var folder = DriveApp.getFolderById('1NWq9CoBxzYumYQzTlCjLMS95Y6G2NY6X');
var createFile = folder.createFile(file);
return createFile.getUrl();
var uploadURL = file.getUrl();
}
And here the HTML code in: index.html
<!DOCTYPE html>
<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">
</head>
<body>
<div class="container">
<br>
<h1>Custom HTML Forms to Google Sheet</h1>
<br>
<div id="form">
<form>
<div class="form-group">
<label for="Name">Name</label>
<input type="text" class="form-control form-data" id="Name">
</div>
<div class="form-group">
<label for="Email">Email</label>
<input type="text" class="form-control form-data" id="Email">
</div>
<div class="form-group">
<label for="Age">Age</label>
<input type="text" class="form-control form-data" id="Age">
</div>
<div class="form-group">
<label for="Company">Company</label>
<input type="text" class="form-control form-data" id="Company">
</div>
<div class="form-group">
<label for="Mob">Mob</label>
<input type="text" class="form-control form-data" id="Mob">
</div>
<div>
<input type="file" name="myFile">
</div>
<button type="button" class="btn btn-primary" onclick="send_data()" id="submitBtn" value="Upload Files">Submit</button>
</form>
</div>
<!-- Optional if you want to give a completion feedback! -->
<div id="completion-msg" style="display: none;">
Thank you for completing this form!
<label id="resp"></label>
</div>
</div>
<script>
document.getElementById('submitBtn').addEventListener('click',
function send_data(){
google.script.run.withSuccessHandler(onSuccess).uploadFiles(this.parentNode)
var form_data = document.getElementsByClassName("form-data"); //retrieve filled form data
var i;
var 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"; // Optional if you want to give a completion feedback!
})
function onSuccess(data){
document.getElementById('resp').innerHTML = "File Uploaded to the path " +data;
}
</script>
</body>
</html>
It is totally ok, if you say that there is no way to change this code into something that works, but please say how I could solve it elsewise.
I would really appreciate it, if you help me. Thanks!
I am developing a system, where the user will have to make the payment via credit card. When he starts typing the first numbers on the card, the flag will be automatically identified and selected. I don't know much about jQuery or JavaScript.
JS
var cartoes = {
visa: /^4[0-9]{12}(?:[0-9]{3})/,
mast: /^5[1-5][0-9]{14}/,
diners: /^3(?:0[0-5]|[68][0-9])[0-9]{11}/,
amex: /^3[47][0-9]{13}/,
discover: /^6(?:011|5[0-9]{2})[0-9]{12}/,
hipercard: /^(606282\d{10}(\d{3})?)|(3841\d{15})/,
elo: /^((((636368)|(438935)|(504175)|(451416)|(636297))\d{0,10})|((5067)|(4576)|(4011))\d{0,12})/
};
The problem is that when entering the flag it is not working, that is, he is not selecting the flag as I type the card number. I tried with the cards I have: MasterCard, Amex and Visa. I will put the complete code.
var cartoes = {
visa: /^4[0-9]{12}(?:[0-9]{3})/,
mast: /^5[1-5][0-9]{14}/,
diners: /^3(?:0[0-5]|[68][0-9])[0-9]{11}/,
amex: /^3[47][0-9]{13}/,
discover: /^6(?:011|5[0-9]{2})[0-9]{12}/,
hipercard: /^(606282\d{10}(\d{3})?)|(3841\d{15})/,
elo: /^((((636368)|(438935)|(504175)|(451416)|(636297))\d{0,10})|((5067)|(4576)|(4011))\d{0,12})/
};
document.getElementById('num').addEventListener('keyup', testarCC);
var inputs = document.querySelectorAll('.fsResDir input[type="radio"]');
function testarCC(e) {
var nr = this.value;
var tipo;
for (var cartao in cartoes)
if (nr.match(cartoes[cartao])) tipo = cartao;
// alert(tipo);
if (tipo) document.getElementById(tipo).click();
else
for (var i = 0; i < inputs.length; i++) inputs[i].checked = false;
}
<!DOCTYPE html>
<html lang="pt-br">
<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>Testando a Braspag</title>
<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>
<fieldset class="fsResDir">
<legend>Dados do Cartão </legend>
<input type="radio" name="RadBand" id="visa" />
<label for="visa">
<img src="bandeiras/visa.png" style="width: 90px" />
</label>
<input type="radio" name="RadBand" id="mast" />
<label for="mast">
<img src="bandeiras/mastercard.png" style="width: 90px"/>
</label>
<input type="radio" name="RadBand" id="amex" />
<label for="amex">
<img src="bandeiras/amex.png" style="width: 90px"/>
</label>
<label for="val" class="lab90">Validade:</label>
<input type="text" class="ent20Form" id="val" name="TxtValMes" class="form-control" />/
<input type="text" class="ent40Form" name="TxtValAno" class="form-control" />
<label for="num" class="lab90">Numero:</label>
<input type=text class="ent120Form" id="num" name="TxtNumero" class="form-control" />
</fieldset>
</body>
</html>
I have been trying to solve the problem that I am having with this email validation in JavaScript, but all the code I have tried was having the same problem. When I used the developer tool in google chrome I didn't see any error message, so I don't understand why is this happening. I want to show the error message if an email is not valid.
What am I missing?
link full code - https://jsfiddle.net/lmanhaes/cq1g5dyt/14/
Thanks.
function checkEmail(validate) {
let re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
let email = validate.userName.value;
if (email === re)
return true;
else {
error.setAttribute("class", "error");
error.innerHTML = ("Email is not correct. Please retype.");
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<link rel="stylesheet" href="css/styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<section>
<h1></h1>
<ul>
</ul>
<h1>Register</h1>
<p>* = Required Field</p>
<div id="formcontainer">
<form id="registerDetails" action="lmanha01_fma_t3confirm.html">
<div>
<label for="username">* Userame:</label>
<input type="text" id="userName" required>
<!--pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$"-->
<!--check that the user has in fact typed in an email address-->
<div id="error"></div>
</div>
<div>
<label for="password">* Password (must be 8 characters exactly and include one Uppercase, one
lowercase and
one number):</label>
<input type="password" id="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,8}$"
required>
<input type="checkbox" id="showpasswords" onclick="Toggle()">
<!--This creates a toggle effect-->
<label id="showpasswordslabel" for="showpasswords">Show passwords</label>
</div>
<div>
<label for="retypedpassword">* Retype your password:</label>
<input type="password" id="retypedpassword">
<span id="passwordmatcherror"></span>
</div>
<div>
<button type="submit" id="registerButton">Register</button>
</div>
</form>
</div>
</section>
<!--moved to the bottom to load the page faster-->
<script src="scripts/exemple.js"></script>
</body>
</html>
You should use test() method of regex to return true or false if input value matches the email pattern.
if (re.test(email)){
//logic when it is valid
}
else{
//logic when it is invalid
}
const email = document.getElementById('email');
function validate(){
const regex=/^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
return regex.test(email.value) ?console.log("Valid"):console.log("Invalid");
}
<input type="email" id="email" />
<button onclick="validate()">
Validate
</button>
JavaScript codes and HTML codes
I'm trying to put a generated value of the qr code a input text to be save in my SQLite database can't pust the darn value of the qr code
var resultDiv;
document.addEventListener("deviceready", init, false);
function init() {
document.querySelector("#startScan").
addEventListener("touchend", startScan, false);
resultDiv = document.querySelector("#results");//works in <p id="results"></p>
resultDiv = document.querySelector('#text4');//wont work at all <input id="text4" type="text" placeholder="Book Info"/>
}
function startScan() {
cordova.plugins.barcodeScanner.scan(
function (result) {
var s = result.text.split('|');
result.format;
result.cancelled;
resultDiv.innerHTML = s;
},
function (error) {
alert("Scanning failed: " + error);
}
);
}
JavaScript codes and HTML codes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>qrBorrowers</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<nav>
<div class="topnav">
Add
Borrow
Return
QR code
</div>
</nav>
<Label>
<h1> Borrow a Book </h1>
</Label>
<div class="borrow">
<input id="text1" type="text" placeholder="Borrower Number" onfocus="this.value=''"/>
<input id="text2" type="text" placeholder="Borrower Last Name" onfocus="this.value=''" />
<input id="text3" type="text" placeholder="Borrower First Name" onfocus="this.value=''" />
<input id="text4" type="text" placeholder="Book Info"/>
<input id="text6" type="date" placeholder="Date Borrowed" />
<br>
</div>
<div class="borrow">
<p id="results"></p>
<button id="startScan">Start Scan</button>
<button id="savedb">Save </button>
</div>
<script type="text/javascript" src="js/scanQR.js"></script>
</body>
</html>
With inner HTML it will not going to save your generated QR code to input box. You need to change the innerHTML to value to save the value in input box such that you can use that when form submit as value to save in database.
var resultDiv;
document.addEventListener("deviceready", init, false);
function init() {
document.querySelector("#startScan").
addEventListener("touchend", startScan, false);
resultDiv = document.querySelector("#results");//works in <p id="results"></p>
resultDiv = document.querySelector('#text4');//wont work at all <input id="text4" type="text" placeholder="Book Info"/>
}
function startScan() {
cordova.plugins.barcodeScanner.scan(
function (result) {
var s = result.text.split('|');
result.format;
result.cancelled;
resultDiv.value = s;
},
function (error) {
alert("Scanning failed: " + error);
}
);
}
JavaScript codes and HTML codes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>qrBorrowers</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<nav>
<div class="topnav">
Add
Borrow
Return
QR code
</div>
</nav>
<Label>
<h1> Borrow a Book </h1>
</Label>
<div class="borrow">
<input id="text1" type="text" placeholder="Borrower Number" onfocus="this.value=''"/>
<input id="text2" type="text" placeholder="Borrower Last Name" onfocus="this.value=''" />
<input id="text3" type="text" placeholder="Borrower First Name" onfocus="this.value=''" />
<input id="text4" type="text" placeholder="Book Info"/>
<input id="text6" type="date" placeholder="Date Borrowed" />
<br>
</div>
<div class="borrow">
<p id="results"></p>
<button id="startScan">Start Scan</button>
<button id="savedb">Save </button>
</div>
<script type="text/javascript" src="js/scanQR.js"></script>
</body>
</html>
To save the value in input box should not use "resultDiv.innerHTML = s;"
Rather you should use "resultDiv.value = s" which will save your code to input box which you can use to save in SQLite Database.