Setting value in html element from external js - javascript

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()">

Related

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

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

Form Validationn

I'm trying to create a simple form validation from an user input box. I'm trying to create an alert if the user does not enter anything into the text box. Here is the HTML:
<div id="block3">
<input type="text" name="form" id="FAQS_list"
placeholder="Enter Number Here"/>
<button value="Click" onclick="listFAQS()" onSubmit="return validateForm()">
Click
</button>
<script src="expExternal.js" type="text/javascript"></script>
</div>
Here is the Javascript:
function validateForm() {
var y = document.getElementById("form").value;
if (y == "") {
alert("Please enter a number!");
return false;
}
}
I can't tell what I'm doing wrong here, but when the text box is left empty, there is no alert pop-up. Any help would be appreciated!
Do this change:
var y = document.getElementById("FAQS_list").value;
The id of your input is FAQS_list and not name.
function validateForm() {
var y = document.getElementById("FAQS_list").value;
if (y == "") {
alert("Please enter a number!");
return false;
}
}
<div id="block3"><br/><br/>
<p id="p01">
Enter a number (up to 3):
<input type="text" name="form" id="FAQS_list" placeholder="Enter Number Here" />, and
<button value="Click" onclick="validateForm()" onSubmit="return validateForm()">Click</button> to see that many Frequently Asked Questions.<br/><br/><br/></p>
<p id="FAQS"></p>
<script src="expExternal.js" type="text/javascript"></script>
</div>

Determining if one of the two strings is a substring of the other String Javascript?

Suppose I have two text fields where the user can enter any text.
One field can have: The sky is blue.
Second field have: The ocean is blue.
In Javascript what is the easiest way to check if one string entered in one field is a substring for the other field?
So far this is what I have:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Substring Test</title>
<script type="text/javascript">
function displayContent() {
var contentEntered = document.getElementById("userContent").value;
var contentEnteredSecond = document.getElementById("secondUserContent").value;
document.getElementById("result").innerHTML += "<p> The content entered was " + contentEntered + " </p>";
document.getElementById("result").innerHTML += "<p> The content entered was " + contentEnteredSecond + " </p>";
}
</script>
</head>
<body>
<h1>Substring</h1>
<div id="mainCont">
<p>Please enter any content.</p>
<p>Content:
<input type="text" id="userContent">
</p>
<p>Content:
<input type="text" id="secondUserContent">
</p>
<p>
<input type="button" onclick="displayContent();" value="Submit">
</p>
<div id="result"></div>
</div>
</body>
</html>
function checkSub(str1, str2){
if(str1.indexOf(str2) > -1 || str2.indexOf(str1) > -1) return true;
else return false;
}
In ES6 it's simple with String.prototype.includes:
str1.includes(str2) || str2.includes(str1);
You can use includes function from lodash library.
function checkSubstr(str1, str2) {
return _.includes(str1, str2) || _.includes(str2, str1);
}

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>

Calling string from one function into another doesent seem to work., why?

So I have this code and it does not seem to work. The thing I want it to do is to call the "together" from the function "go" in the function "second". What am i doing wrong?
The program was initially supposed to take what is in the input-text and add it with the ".com" or the ".no"(depending on what u checked) and redirect to that page. But I only want to call the "together" in the "second" function. Is there any better way to do it?
<!doctype html>
<html>
<head>
<title>A Basic Form</title>
<link rel="stylesheet" type="text/css">
<style type="text/css">
</style>
</head>
<body>
<fieldset>
<legend>Redirection: </legend>
<div>
<label>Where do you want to go?</label>
<input type="text" id="input" name="input" size="7">
<input type="button" id="submit" name="submit" value="Submit" onclick="go()">
</div>
<div>
<input type="radio" id="no" name="end" value=".no">
<label for="no">.no</label><br />
<input type="radio" id="com" name="end" value=".com">
<label for="com">.com</label>
</div>
</fieldset>
<script type="text/javascript">
var end = "";
var input = document.getElementById("input").value;
function go(end, input){
if (document.getElementById("no").checked){
end = document.getElementById("no").value;
}else if (document.getElementById("com").checked){
end = document.getElementById("com").value;
}else{
alert("Please Choose a category!");
}
var together = input + end;
// window.location.replace("http://www." + together);
}
second(together);
function second(together){
alert(together);
}
</script>
</body>
</html>
function go(end, input){
if (document.getElementById("no").checked){
end = document.getElementById("no").value;
}else if (document.getElementById("com").checked){
end = document.getElementById("com").value;
}else{
alert("Please Choose a category!");
}
var together = input + end;
// window.location.replace("http://www." + together);
} // remove this
second(together);
} // add this

Categories

Resources