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.
Related
Even if the format is dd/mm/yyyy I see that I can insert more than only 4 characters in the year. I don't know how to stop this behavior.
<html>
<head>
<title>input test data insert</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<input type="date" data-date-format="dd/mm/yyyy">
</body>
</html>
Add a max attrubute and set it to max="9999-12-31"
<html>
<head>
<title>input test data insert</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<input type="date" data-date-format="dd/mm/yyyy" max="9999-12-31">
</body>
</html>
You can specify a max date allowed in the input (keep in mind that 10000AD is a real year, even if it is a long way off), but it will only be checked when the form is submitted.
<form>
<input type="date" data-date-format="dd/mm/yyyy" max="9999-12-31">
<button>Submit</button>
</form>
You can add JS to check the value when it changes, but you'll need to provide your own UI for showing the error.
document.querySelector('input').addEventListener('change', event => {
if (!event.target.checkValidity()) alert("Error")
});
<form>
<input type="date" data-date-format="dd/mm/yyyy" max="9999-12-31">
<button>Submit</button>
</form>
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 am trying to make a link, and place a variable in the URL like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Main Page
<input type="color" id="colorPicker" value="#808080">
</body>
<html>
I am trying to send the user to index.html?color=VALUE GOES HERE. Instead of VALUE GOES HERE, I would like the current color input value.
You may use forms ,
The method attribute specifies how to send form-data (the form-data is
sent to the page specified in the action attribute).
The form-data can be sent as URL variables (with method="get")
<form action="index.html" method="get">
<input type="color" name="color" value="#808080">
<input type="submit" value="Submit">
</form>
The only way that I can think to do this is with JavaScript, so sorry if this is not what you are looking for:
function urlUpdate(hex) {
document.getElementById("link").href = "index.html?color=" + hex;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a id='link' href="index.html?color=">Main Page</a>
<input type="color" id="colorPicker" value="#808080" onchange="urlUpdate(value)">
</body>
<html>
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