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>
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.
I am currently using the HTML 5 Datetime-local input to get my date and time data which then gets replicated into another input field however when it gets replicated it formats the date and time differently. How am I able to format the date/time before it gets added into the input field?
Datetime-local picker:
Input field:
HTML:
<input id="dt" class="input" type="datetime-local">
jQuery:
$(document).ready(function () {
$('#dt').on('change', function () {
$('#datetime').val($(this).val())
})
})
TIA
You can easily edit the value of your date time local using JavaScript
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<title></title>
</head>
<body>
<label for="datetime">datetime</label>
<input type="text" name="datetime" id="datetime" value="" />
<input id="dt" class="input" type="datetime-local" onchange="dateTimeFormat()">
<script type="text/javascript" charset="utf-8">
function dateTimeFormat(){
let unformattedDT = dt.value;
let processingDate = unformattedDT.replace(/-/g,"/");
console.log(processingDate);
let list=processingDate.split("T");
datetime.value =`${list[0]} , ${list[1]}`;
}
</script>
</body>
</html>
I have been learning Javascript using the thenewboston YouTube channel. In the form validation part I am getting the following error Uncaught SyntaxError: Unexpected token '<'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript">
<form>
Username: <input type="text"/>
Password: <input type="password"/>
<input type="submit" value="Submit!"/>
</form>
//length of a form is how many items do you have in it
var x = document.forms[0].length
document.write(x);
</script>
</body>
</html>
you have to take the form tag outside the script tag.
The form shouldn't be in your script! Putting HTML code in a <script> element doesn't make sense.
For that, you are getting the error:
Uncaught SyntaxError: Unexpected token '<'
Here is your code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<form>
Username: <input type="text"/>
Password: <input type="password"/>
<input type="submit" value="Submit!"/>
</form>
<script type="text/javascript">
//length of a form is how many items do you have in it
var x = document.forms[0].length
document.write(x);
</script>
</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 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