I have created a simple html page to test the localstorage and for the life of me i cant get it to work, even though my firebug shows that the localstorage stored value as the one that i am storing here is my code for the first html page called Testhtml.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TEsthtml.html</title>
</head>
<script >
function save()
{
var passvalue = document.getElementById('entry_1').value;
localStorage.setItem('passingvalue', passvalue);
}
</script>
<body>
<form action="simple.html" method="POST">
<label for="entry_0">Type ur name</label>
<input type="text" name="entry.0.single" value="" id="entry_0">
<br>
<label for="entry_1">ur pets name
</label>
<label for="entry_1">type something</label>
<input type="text" name="entry.1.single" value="" id="entry_1">
<br>
<input type="submit" name="submit" id="submit" onClick="save()" value="Submit">
</form>
</body>
</html>
Second form called the simple.html code is as follows
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Simple HTML</title>
<script >
function load()
{
var storedvalue = localstorage.getItem('passingvalue');
if(storedvalue)
{
document.getElementById('tb1').value=storedValue;
}
}
</script>
</head>
<body onload="load()" >
<input id="tb1" name="tb1" type="text"/>
<input type="submit" name="submit" id="submit" onClick="load()" value="Submit">
</body>
</html>
I try to run this code the simple.html which is the second form in the only textbox that is there it is not displaying anything..tried so many different things!!
It's just typographical errors in Simple.html on lines 8 and 9; 'localstorage' should be 'localStorage' and 'storedvalue' should be 'storedValue'.
You should look into your browsers error reporting and developer tools, they would have helped you solve this problem on your own. I personally prefer to develop on Google Chrome because of the fast, simple, and easy-to-use debug tools (if you use chrome, just press Ctrl+Shift+J).
simple.html's code is the same as testhtml.html . Did you post wrong code?
a simple tutorial for localStorage:
http://www.w3schools.com/html5/html5_webstorage.asp
Related
I am creating a webpage that redirects users to a specific webpage.
Some part of the URL of the specific webpage is constant and the rest is a variable.
If the webpage is www.gotop.com/page1. www.gotop.com/ is constant every time but the page1 part changes. And I want to take the page1 part as an input in my webpage and then a button to go to www.gotop.com/page1
I tried a lot but failed. My final code is
<!DOCTYPE html>
<html>
<label for="name">Name (4 to 8 characters):</label>
<input type="text" id="name" name="name" required
minlength="4" maxlength="8" size="10">
<body>
<h1>The button Element</h1>
<button type="button" onclick="window.location.href='http://152.158.53.1:2222/q/"name"/';">Click Me!</button>
<p>PLEASE WAIT...Redirecting to REALME 1 URL</p>
</body>
</html>
But it doesn't work.
Here I took the value of the variable part of URL from the input and concatenated it at the end of the constant part of the URL.
window.location.href redirects you to the desired URL.
This should help,
document.getElementById('button').addEventListener('click', function(e) {
const page = document.getElementById('val').value
window.location.href = `/constant/url/${page}`
})
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" id="val">
<button id="button">Click me!</button>
</body>
</html>
I think this would be a better solution
function loadPage(){
location.href = document.querySelector("#page_name").value;
}
<input type="text" id="page_name"/>
<button onclick="loadPage()">Go</button>
When the button is clicked, the loadPage function would be called. There, The value of the input is obtained and the page is redirected to that url.
Using Hta i want data from web page to hta text Box. Below is the code which i am trying to create but i have no clue how to call data from web page to hta text box.
<html>
<head>
<title>My HTML Application</title>
<script language="vbscript">
urls=("https://www.99acres.com/shri-laxmi-celebration-residency-sector-2b-vasundhara-ghaziabad-npxid-r63907?src=NPSRP&sid=UiB8IFFTIHwgUyB8IzEjICB8IG5vaWRhIzUjIHwgQ1AxMiB8IFkgIzE4I3wgIHwgMTIgfCMzIyAgfCA3ICM1I3wgIHwgMjMgfCM0MyMgIHw=")
Sub RunLoop()
window.navigate urls
End Sub
</script>
</head>
<body>
<input type="button" value="Click" onclick="RunLoop">
Possession:
<input type="text" name="Possession" Value="">
Configurations:
<input type="text" name="Configurations" Value="">
New Booking Base Price:
<input type="text" name="New Booking Base Price" Value="">
</body>
</html>
The data which i require from webpage.
The output which i require in hta.
Using window.ActiveXObject("Microsoft.XMLHTTP"), we get the whole webpage and assign it to an invisible/hidden div (for simplicity). Note that this may result to unwanted styling because of the webpage's own global styling. A better way to do it is to open the webpage on a separate IE.
HTAs default engine is IE7 so we needed to insert meta http-equiv="x-ua-compatible" content="ie=9" in order to support the getElementsByClassName functionality because the data that we want to get from 99acres.com was referenced by class.
Copy the code below to notepad and save it as xxx.hta:
<html>
<head>
<meta http-equiv="x-ua-compatible" content="ie=9">
<title>My HTML Application</title>
<script language="javascript">
var url= "https://www.99acres.com/shri-laxmi-celebration-residency-sector-2b-vasundhara-ghaziabad-npxid-r63907?src=NPSRP&sid=UiB8IFFTIHwgUyB8IzEjICB8IG5vaWRhIzUjIHwgQ1AxMiB8IFkgIzE4I3wgIHwgMTIgfCMzIyAgfCA3ICM1I3wgIHwgMjMgfCM0MyMgIHw=";
var xmlHttp = new window.ActiveXObject("Microsoft.XMLHTTP");
function httpGet(theUrl){
xmlHttp.open( "GET", theUrl, false );
xmlHttp.send( null );
return xmlHttp.responseText;
}
function RunLoop() {
var data = httpGet(url);
document.getElementById("tempdiv").innerHTML = data;
document.getElementsByName("Possession")[0].value = document.getElementsByClassName("factVal1")[0].innerHTML;
document.getElementsByName("Configurations")[0].value = document.getElementsByClassName("factVal1")[1].innerHTML;
document.getElementsByName("New Booking Base Price")[0].value = document.getElementsByClassName("factValsecond")[0].innerHTML;
}
</script>
</head>
<body>
<input type="button" value="Click" onclick="javascript:RunLoop();">
Possession:
<input type="text" name="Possession" Value="">
Configurations:
<input type="text" name="Configurations" Value="">
New Booking Base Price:
<input type="text" name="New Booking Base Price" Value="">
<div id="tempdiv" style="display:none;visibility:hidden;height:0px">
</div>
</body>
</html>
I am new to Node.JS and I am trying to display the submitted data in a form which is stored as an html file using Node.JS. How can I do that?
I don't want to use any framework as I want to make my base stronger.
Here is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sample Form with Node.JS and MongoDB</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="sample.js"></script>
</head>
<body>
<form method="POST" action="incoming" enctype="multipart/form-data">
<fieldset>
<legend>Sample Form</legend>
<p><input type="text" name="name" placeholder="Enter your Name"></p>
<p><input type="email" name="email" placeholder="Enter your Email"></p>
<p><input type="submit" name="submit"></p>
</fieldset>
</form>
</body>
</html>
And here is my sample.js
var http=require('http');
var qs=require('querystring');
var fs=require('fs')
var port=8000;
http.createServer(function(req,res){
if(req.method==="GET"){
fs.readFile('index.html',function(err,data){
res.writeHead(200,{'Content-Type':'text/html'});
res.write(data);
res.end();
});
}
else if(req.method==='POST'){
if(req.url==='/incoming'){
var reqbody='';
req.on('data',function(data){
reqbody+=data;
});
req.on('end',function (){
var formdata=qs.parse(reqbody);
res.writeHead(200,{'Content-Type':'text/html'});
res.write('<fieldset><legend>Form Inputs</legend>');
res.write('Name: '+formdata.name);
res.write('Email: '+formdata.email);
res.end('</fieldset></body></html>');
});
}
}
}).listen(port);
Your help would be appreciated. Thank You in advance.
UPDATE
Removing the enctype somehow worked and now it's working just fine. Thanks
Just remove the enctype from index.html, I don't know why it worked but when I was fiddling with my code to make it work removing the enctype did the trick
I'm using this form I found :
<FORM METHOD="POST" ENCTYPE="x-www-form-urlencoded">
<input type="text" id="Password"/>
<input type="button" id="Access" onclick="document.location=Password.value" VALUE="Accès"/>
</FORM>
It works fine for what I want to do, but I would like to allow the command to be triggered by pressing enter too. I have read a solution using the submit type instead and also a solution adding
onkeydown="if (event.keyCode == 13) document.getElementById('Access').click()" in the text input.
Neither works so I don't know if I'm misusing them or if my document.location=Password.value cannot be used this way. If so, could you indicate me the simplest solution to replace it without using php or js file because I don't really understand that. This website will not be public so I don't really care about security or if it's not the right way to do.
EDIT : Considering the answer you gave me are not fully working (jlbruno's one does not work neither on enter or on click, riad's one only works on click), here is the full code of my page with riad's solution, please tell me if something could interfere
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>JVPW Cloud - Le Nuage de la JVPW !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<p><center><img src="logo.png" width="1000" height="400" /></center></p>
<p><span style="font-family:Verdana"><b>Tout l'univers de la JVPW pour seulement 9.99 $</b></span></p>
<h1>Bienvenue</h1>
<p>Si vous disposez d'un early access gratuit, entrez le code ci-dessous et appuyez sur Accès (pas Entrée !)</p>
<FORM METHOD="POST" ENCTYPE="x-www-form-urlencoded">
<input type="text" id="Password" onkeydown="if (event.keyCode == 13) document.getElementById('Access').click()" />
<input type="button" id="Access" onclick="window.location=document.getElementById('Password').value ;" VALUE="Accès"/>
</FORM>
</body>
</html>
I wouldn't recommend having inline event handlers, but that said I'll keep doing it for an example.
You should change your button to a submit button, and move your current onclick into an onsubmit on the form.
<FORM METHOD="POST" ENCTYPE="x-www-form-urlencoded" onsubmit="document.location=Password.value">
<input type="text" id="Password"/>
<input type="submit" id="Access" VALUE="Accès"/>
</FORM>
You can try this.
<FORM METHOD="POST" ENCTYPE="x-www-form-urlencoded">
<input type="text" id="Password" onkeydown="if (event.keyCode == 13) document.getElementById('Access').click()" />
<input type="button" id="Access" onclick="doSubmitWork();" VALUE="Accès"/>
</FORM>
<script type="text/javascript">
function doSubmitWork(){
window.location = 'mywebsite.com/'+document.getElementById('Password').value ;
}
</script>
JS FIDDLE DEMO
I did the following and it works for me. I hope is helps you.
<form name="frm" method="post">
<input type="password" name="psw">
<input type="submit" value="Enter">
</form>
The following code shows how I am trying to first write info to .txt file and then have the custom search performed. If I remark out the action in Button2, Button1 works fine and writes text to .txt. When I open Button2 to do search, it appears that the .php in Button1 is ignored and Button2 presents custom search, however, there is write to .txt file. I have tried everything I can find, including all in one .php file, but the second action seems to take control and won't allow the first action to run.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>If NOT found to right ENTER Your</title>
<script language="Javascript">
<!--
function OnButton1()
{
// Action used to write to .txt file only
document.Form1.action = "open-close.php";
}
function OnButton2()
{
// Action performs custom google search
document.Form1.action = "http://www.google.com";
}
-->
</script>
</head>
<body>
<h3><span style="color: #00ff00;">If NOT found to right ENTER Your Topic Here! </span></h3>
<style type="text/css">
#import url(http://www.google.com/cse/api/branding.css);
</style>
<div class="cse-branding-right" style="background-color:#999999;color:#000000">
<div class="cse-branding-form">
<form id="cse-search-box" target="_blank" name="Form1">
<div>
<input type="hidden" name="cx" value="" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="55" />
<input type="submit" name="sa" value="Search" Onclick="OnButton1(); OnButton2();"/>
</div>
</form>
</div>
<div class="cse-branding-logo">
<img src="http://www.google.com/images/poweredby_transparent/poweredby_999999.gif" alt="Google" />
</div>
<div class="cse-branding-text">
Your Custom Search
</div>
</div>
</body>
</html>
Call OnButton1() on button click and from within the function onButton1() call onButton2():
<input type="submit" name="sa" value="Search" Onclick="OnButton1();"/>
function OnButton1()
{
// Action used to write to .txt file only
document.Form1.action = "open-close.php";
OnButton2();
}