Setting value in html element from external js
Question
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.
3 answers
solution1
1 2015-07-29 08:09:11
您可以尝试将<button id="btn"> Search </button>替换为<input type="button" id="btn" value = "Search"></button>
solution2
1 2015-07-29 08:21:58
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/>
<a href="javascript: void(0);" class="btn btn-primary" onclick="func1()">Submit</a>
</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:
<a href="javascript: void(0);" class="btn btn-primary" onclick="func1()">Submit</a>
Here is example on JSFiddle
solution3
0 ACCPTED 2015-07-29 12:01:41
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()">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.