How should I get the data from google sheet using html code - javascript

I am trying to make mobile app using Phonegap. I am writing a code using HTML to search an ID in google sheet and give the complete row in return. Following is my HTML code.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="form-row">
<div class="form-group col-md-2">
<label for="idNum">ID Number</label>
<input type="text" class="form-control" id="idNum">
<output id="rnum"></output>
</div>
<button type="button" class="btn btn-outline-info" id="searchbtn" onclick="search_ID()">Search Profile</button>
</div>
<p id="demo"></p>
<form class="google_script" method="POST"
action="https://script.google.com/macros/s/AKfycbwlHuXwW1fEDfeer1ot6Ltb9cqT83VRZfQQQdTqZSgPvpYapUs/exec">
<script data-cfasync="false" src="index.js"></script>
</body>
</html>
and index.js file is:
function search_ID() {
var input = document.getElementById("idNum").value;
if (isNaN(input)) {
voteable = "Input is not a number";
} else {
voteable = (input.length ==6 ) ? "Correct Value" : "Wrong Value";
}
document.getElementById("demo").innerHTML = voteable;
google.script.run.doSomething();
}
I want to call function in Google Script from local HTML file to get the data from google sheet (Given public view). Please help.

I think you want to do something like this:
function search_ID() {
var input = document.getElementById("idNum").value;
if (isNaN(input)) {
voteable = "Input is not a number";
} else {
voteable = (input.length ==6 ) ? "Correct Value" : "Wrong Value";
}
document.getElementById("demo").innerHTML = voteable;
google.script.run.
.witSuccessHandler(function(obj){
window.alert(obj.msg);
})
doSomething();
}
You can also do it like this:
google.script.run
.withSuccessHandler(functionname)
.doSomething()
function functionname() {
window.alert('obj.msg');
}
gs:
function doSomething() {
//
return {msg:"I did something and returned;"}
}
client to server communication

Related

HTML check user input in form for letters

Hi I am new to HTML and JavaScript. I want to check the users phone number input for any letters, and print out those letters within the error message.
I'm a bit lost at the moment, can I save input as a string (as shown by the pseudo code saving input as InsertLetter). As well as put any string characters that are letters into an error message?
<form onsubmit="return isnumb()">
<label for="ph"> Enter Phone: </label>
<input type="text" id="phnumb"> <span
id="message"></span>
//InsertLetter = phnumb output
</form>
<script>
function isnumb() {
if (document.getElementById("phnumb").match =([a-z]))
{document.getElementById("message").innerHTML =
"<em> Number includes letter" + InsertLetter + "</em>";
return false;}
else return true;
It is far better to use <input type="tel"> in this situation. On that occasion user input should follow the given pattern which you can check with. Use Form Validation for the rest of the work, for example:
const phone = document.getElementById("phone");
const button = document.getElementsByTagName('button')[0];
const errorMessage = document.querySelector('p.error');
button.addEventListener('click', (e) => {
if (!phone.validity.valid) {
showError();
e.preventDefault();
}
});
phone.addEventListener('keyup', (e) => {
if (phone.validity.valid) {
errorMessage.innerHTML = '';
} else {
showError();
}
});
function showError() {
if (phone.validity.valueMissing) {
errorMessage.textContent = "Phone is required";
}
if (phone.validity.patternMismatch) {
errorMessage.textContent = "You are not supposed to use characters like this one: " + phone.value;
}
if (phone.validity.valid) {
phone.setCustomValidity("");
}
}
.error {
color: red;
}
<form>
<label for="phone">Phone Number (Format: +99 999 999 9999)</label>
<input type="tel" id="phone" name="phone" pattern="[\+]\d{2}[\s]\d{3}[\s]\d{3}[\s]\d{4}" required>
<p class="error"></p>
<button>Submit</button>
</form>
First of all i want to give u an answer of user should insert only number :`
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function submitForm() {
var phonenumber = document.forms["myForm"]["notanumber"].value;
if (isNaN(phonenumber)) {
alert("only number required");
} else {
alert("submit");
}
}
</script>
</head>
<body>
<form id="myForm">
<input type="text" id="notanumber" />
<input type="submit" onclick="submitForm()" />
</form>
</body>
</html>
-> isNaN() is an inbuilt function in js, if variable is not a number, it return true, else return false.
the simple code :
restric the user from clicking any key, Only numbers allowed.
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function submit() {
alert("submited");
}
function noAlphabets(e) {
var phonenumber = document.forms["myForm"]["notanumber"].value;
var x = e.which || e.keycode;
if (x >= 48 && x <= 57) {
return submit();
} else {
alert("insert only numbers");
return false;
}
}
</script>
</head>
<body>
<form id="myForm">
<input
type="text"
id="notanumber"
onkeypress="return noAlphabets(event)"
/>
<button type="button" onclick="submit()">Submit</button>
</form>
</body>
</html>

Update from NATIVE sandbox to IFRAME; button not working

Since the NATIVE sandbox on google apps script is deprecated, I'm switching to IFRAME, which has caused some issues.
The basic outline of the app is that it should allow a user to fill in some information and upload a file (it also makes sure all required fields are completed). Upon submission (by clicking a button), the file should be uploaded to a folder in google drive and a spreadsheet should be updated with the user's information. When I'm in NATIVE, everything works fine. When I set it to IFRAME, nothing happens when I click the submit button.
This is a similar issue to here and here, but neither of them directly address my problem. I also tried following the Google Guide but it didn't help.
Here is my server.gs script:
function doGet(e) {
return template = HtmlService.createHtmlOutputFromFile('form.html').setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function uploadFiles(form) {
try {
var dropbox = "Applications";
var folder, folders = DriveApp.getFoldersByName(dropbox);
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}
var CV = form.CV;
var foldername = form.myLastName + ", " + form.myFirstName;
var myFolder = folder.createFolder(foldername);
var file_CV = myFolder.createFile(CV);
var CV_url = file_CV.getUrl();
var sheet_return = addApplicant(form, CV_url);
return "Thank you for your submission."
} catch (error) {
return error.toString();
}
}
function addApplicant(form, CV_url) {
try {
var d = new Date()
var ss = SpreadsheetApp.openByUrl(***INSERT URL TO GOOGLE SHEETS PAGE***);
SpreadsheetApp.setActiveSpreadsheet(ss);
SpreadsheetApp.setActiveSheet(ss.getSheets()[0]);
var sheet = SpreadsheetApp.getActiveSheet();
if (form.visa != "Yes"){
form.visa = "No"
}
sheet.appendRow([d, form.myFirstName, form.myLastName, form.myEmail, form.visa, CV_url]);
} catch (error) {
return error.toString();
}
}
Here is my form.html script:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<!-- You can also include your own CSS styles -->
<link href='https://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>
<style type="text/css">
.warning {border: 1px solid red !important; background: #fdecb2 !important;}
.hideClass {display:none;}
</style>
<div class="form-style-10">
<title> Application </title>
<form id="myForm" name="myForm">
<fieldset class="fields">
<div class="section"> Personal Information </div>
<div class="inner-wrap">
<label for="myFirstName"> First Name* </label>
<input type="text" id="myFirstName" name="myFirstName" placeholder="" required />
<label for="myLastName"> Last Name* </label>
<input type="text" name="myLastName" placeholder="" required />
<label for="myEmail"> Email* </label>
<input type="email" name="myEmail" placeholder="" required />
<span class="visa-checkbox">
Check if you will require visa assistance. <input type="checkbox" name="visa" value="Yes" />
</span>
</div>
</fieldset>
<fieldset class="fields">
<div class="section"> Documents (pdf format is preferred) </div>
<div class="inner-wrap">
<label for="CV"> CV* </label>
<input type="file" name="CV" required />
</div>
</fieldset>
<p> </p>
<p id="incompleteWarning" class="hideClass"> Please check for incomplete fields and re-submit. </p>
<p id="bePatient" class="hideClass"> Please be patient while the files are being uploaded. Do not close or refresh the form. </p>
<input id="submitbutton" type="button" value="Submit Application" />
</form>
<div id="output" class="hideClass">
<span id="ThankYou" >Thank you for taking the time to complete the application.
</span>
</div>
</div>
<script type="text/javscript">
document.getElementById('submitbutton').addEventListener("click", validatefunction);
function validatefunction() {
document.getElementById('submitbutton').val = 'Submitting...';
//check for required fields
var j = 0;
var form = document.getElementById('myForm');
var elem = form.elements;
for (var i = 0; i < elem.length; i++){
elem[i].className = "";
if (elem[i].value === "" && elem[i].hasAttribute('required')){
elem[i].className = "warning";
j++;
}
}
if (j === 0) {
var btn = document.getElementById('submitbutton');
btn.disabled = true;
document.getElementById('incompleteWarning').style.display = 'none';
document.getElementById('bePatient').style.display = 'inline';
google.script.run.withSuccessHandler(fileUploaded).uploadFiles(this.parentNode);
} else{
document.getElementById('submitbutton').val = 'Submit Application';
document.getElementById('incompleteWarning').style.display = 'inline';
document.getElementById('incompleteWarning').style.color = 'red';
}
};
</script>
<script>
function fileUploaded(status) {
document.getElementById('myForm').style.display = 'none';
document.getElementById('output').style.display = 'inline';
}
</script>
<style>
input { display:block; margin: 20px; }
</style>
</body>
</html>
Change:
<script type="text/javscript">
To:
<script language="javascript">
I don't know why it doesn't like type="text/javscript"

i want to check that the php string code and html attribute code are equal when the user clicks the button

<script language="javascript" type="text/javascript">
function validate5(str)
{
var myvar = <?php echo json_encode($code);?>
if (str.valueOf()===myvar.valueOf())
{
<?php include_once("view/ok.php");
$this->model->insertCustomer(); ?>
return true;
}
else{
alert("Wrong Key ...Try Again");
return false;
}
}
</script>
</head>
<body>
<form >
<h3> Insert Code: </h3> <input type="text" id="code" />
<button type="button" onclick="return validate5(code)">Confirm</button>
</form>
</body>
I've declared the $code correctly
i just want to redirect the user to ok.php if the text user entered matches with the $code is code is correct or stay on same page.
is it possible to it the way i'm trying to do?
if not please suggest some different way
Try this:
<script language="javascript" type="text/javascript">
function validate5()
{
var myvar = <?php echo json_encode($code);?>
var str = document.getElementById('code').value;
if (str==myvar)
{
window.location.href="/view/ok.php";
return true;
}
else{
alert("Wrong Key ...Try Again");
return false;
}
}
</script>
</head>
<body>
<form >
<h3> Insert Code: </h3> <input type="text" id="code" />
<button type="button" onclick="return validate5();">Confirm</button>
</form>
</body>

Setting value in html element from external js

I have a webpage. It takes input phone number and search in the directory if the number is stored or not. Then shows the name of the people and the phone number.
I'm doing this with html and javascript. The search result is set by the external js file. But the problem is after setting the value in
document.getElementById("result").innerHTML=res;
it just shows and disappears in less than 1 second.
how to solve this problem ?
here is my html code-
<html>
<head>
<title> Eureca </title>
<link href="../Student Info Search Engine/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header"> </div>
<div class="container">
<form>
<input type="text" id="search" onChange="func1()"> <br/>
<input type="button" id="btn" value="Search"> </button>
</form>
<!-- <p id="result"> </p> -->
</div>
<div class="result"> </div>
<script src="../Student Info Search Engine/design.js" type="text/javascript"> </script>
</body>
here is the javascript code-
function func1(){
var str;
var students=[];
str=document.getElementById("search").value;
if(str[0]=='+'){
alert("Invalid format");
return;
}
if(str.length>=2){
if(isnum(str)){
//alert("The number is "+str);
if(str[0]=='0' && str[1]=='1' && str.length<=11){
var res,i,out=[];
out=phone(str);
res="";
for(i=0;i<out.length;i++){
res+=out[i].name+" "+out[i].phn+"\n";
}
document.getElementById("result").innerHTML=res;
}
else if(str[0]=='1' && (str[1]=='3' || str[1]=='4') && str.length<=7){
}
else{
alert("Invalid input");
return;
}
}
else{
alert("The text is "+str);
}
}
else{
alert("Please enter at least 2 characters");
}
}
i didn't post full js code, because it will make the post very long.
Can you try just to replace <button id="btn"> Search </button> with <input type="button" id="btn" value = "Search"></button>
If your problem with disappearing value after click submit button then here is solution:
<html>
<head>
<title></title>
<meta content="">
<style></style>
</head>
<body class="background-color">
<div class="header"> </div>
<div class="container">
<form>
<input type="text" id="search" onChange="func1()"> <br/>
Submit
</form>
<p id="result"> </p>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script >
function func1(){
var str = [];
var students=[];
str=document.getElementById("search").value;
if(str[0]=='+'){
alert("Invalid format");
return;
}
if(str.length>=2){
if(str){
//alert("The number is "+str);
if(str[0]=='0' && str[1]=='1' && str.length<=11){
var res,i,out=[];
out=str;
res="";
for(i=0;i<out.length;i++){
res+="name" +" "+"number"+"\n";
}
document.getElementById("result").innerHTML=res;
}
else if(str[0]=='1' && (str[1]=='3' || str[1]=='4') && str.length<=7){
}
else{
alert("Invalid input");
return;
}
}
else{
alert("The text is "+str);
}
}
else{
alert("Please enter at least 2 characters");
}
}
</script>
</html>
I added this instead of button:
Submit
Here is example on JSFiddle
I have solved the problem. Just added one more button which is taking the output from a function and assigning it to innerHTML. I added this one line of code-
<input type="button" id="btn2" value="Show Result" onClick="document.getElementById('result').innerHTML = show_result()">

focus textfield if javascript validation failed

I've this code:
<html>
<head>
<script type="text/javascript">
function validate(){
var name=document.frm.name.value;
if(name.indexOf("A")==0){
alert(name);
}
}
</script>
</head>
<body>
<form name="frm" action="test.php">
Enter name:<input type="text" name="name" onblur="validate()"/>
Enter e-Mail:<input type="text" name="email" onblur=""/>
<input type="submit"/>
</form>
</body>
</html>
In above code, I'd tried to validate textfields when they lose focus. The script working fine if the name starts with A. But I want if the user enter different name which doesn't start with A it will return the focus to the textfield name. For that I'd written this script:
<script type="text/javascript">
var name = document.frm.name.value;
if(name.indexOf("A") == 0){
alert(name);
}else{
document.frm.name.focus();
}
</script>
then it doesn't works.
Anybody could help with that what should I do to request focus of textfield name?
I've only a little knowledge of javascript.
Just give an id for you form and refer it with document.getElementById('form_id'). Use of name attribute in this context has been deprecated over a decade ago. Also name for input should be something else than "name", rather use username or sth.
HTML:
<form id="frm" action="test.php">
Enter name:<input type="text" name="username" id="username" onblur="validate()"/>
Enter e-Mail:<input type="text" name="email" id="email" onblur=""/>
</form>
JavaScript:
function validate(){
var form = document.getElementById('frm');
if (form.username.value.indexOf("A") === 0) {
alert(name);
} else {
form.username.focus();
}
}
Instead of retrieving the id of the form, you can also pass the form to validate() as an argument: onblur="validate(this);". Then use that argument as a form in the eventhandler:
function validate(form){
if (form.username.value.indexOf("A") === 0) {
alert(name);
} else {
form.username.focus();
}
}
EDIT
Focus doesn't seem to work without a delay, you can try this (the inputhas an id="username"):
function focusTo (elm) {
elm.focus();
return;
}
function validate(){
var form = document.getElementById('frm');
if (form.username.value.indexOf("A") === 0) {
alert(name);
} else {
alert('error');
setTimeout(function () {focusTo(form.username);}, 10);
}
}
modifiy your script like this
<html>
<head>
<script type="text/javascript">
function validate(){
var name=document.frm.name.value;
if(name.indexOf("A")==0){
alert(name);
}
}
</script>
</head>
<body >
<form id="frm" action="test.php">
Enter name:<input type="text" name="username" onblur="validate()"/>
Enter e-Mail:<input type="text" name="email" onblur=""/>
<input type="submit" onclick="check()"/>
</form>
<SCRIPT LANGUAGE="JavaScript">
<!--
function validate()
{
var name = document.getElementById('frm').username.value;
if(name.indexOf("A") == 0){
alert(name);
document.getElementById('frm').email.focus();
}else{
document.getElementById('frm').username.focus();
}
}
function check()
{
var name = document.getElementById('frm').username.value;
if(name.indexOf("A") == 0){
}else{
alert("Please enter a name starting with 'A'");
document.getElementById('frm').username.focus();
}
}
//-->
</SCRIPT>
</body>
</html>
You want to execute function validate() on event onblur. in the script you have written the code for focusing, but not added it in a function.
try this document.frm.username.focus(); . i hope it will work.

Categories

Resources