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>
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've searched SO a bit for the same issue, but I could only find 'sort of solutions' like max & maxlength, but these won't work for me.
HTML that I have:
<input type="text" id="current" name="current_xj" maxlength="9" placeholder="Enter your value">
I want to set the maximum at: 200000000.
I thought I could use max="200000000" but it doesn't work for me.
<input type="text" id="current" name="current_xj" maxlength="9" max="200000000" placeholder="Enter your value">
You can still enter the number 250000000 or 999999999, I tend to do some live calculations. So it doesn't validate if the number is higher then 200000000.
What I want to do is:
Option 1)
If somebody enters a number higher then 200000000, then change the input value to 200000000. Instantly, since there is no button to click (like submit or calculate or anything).
Option 2)
Don't allow any number higher then 200000000 being input.
How would I do this?
Thanks in advance!
Below is the code which will trigger the function when the value becomes greater
function func() {
if (document.getElementById("current").value > 200000000) {
//alert("reached max limit");
document.getElementById("current").value = 200000000;
}
}
<input type="text" id="current" name="current_xj" maxlength="9" onkeyup="func()" placeholder="Enter your value">
Try the below code:
$(document).ready(function() {
$("input").keyup(function() {
//alert($(this).val());
if ($(this).val() < 200000000) {
} else {
alert("Reached Maximun Limit of Input");
$(this).val() = 200000000;
}
});
});
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h4>Validate text Box</h4>
<input type="text" id="current" name="current_xj" maxlength="9" max="200000000" placeholder="Enter your value">
</body>
Here is some JQuery test you could continue on developing
$(document).ready(function() {
$(".Int").keydown(function() {
try {
var value = parseFloat($(this).val());
$(this).attr("Temp", value) // Save the current value
} catch (err) {
}
}).keyup(function() {
var value = parseFloat($(this).val());
var temp = $(this).attr("Temp");
var max = parseFloat($(this).attr("max"));
// if the new value bigger then max, then load the prev value
if (value > max)
$(this).val(temp);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="current" class="Int" name="current_xj" maxlength="9" max="200000000" placeholder="Enter your value">
Hi guys I am having trouble getting value from the calendar picker.
I want to chose a date from the calendar (with id Date_of_Birth) and assign the date say 12/11/2013 to the textbox txtDate.
How do I do this? My code is as follows
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form name="myForm" action="displayDate.html" method="post">
Date of Birth: < script type="text/javascript" src="http://www.snaphost.com/jquery/Calendar.aspx?dateFormat=dd/mm/yy" name="Date_of_Birth" id="Date_of_Birth"></script><br>
<input type="text" id="txtDate" name="txtDate"
<input type="submit" value="Submit">
</form>
</body>
</html>
The first problem is you did not include "http://www.snaphost.com/jquery/Calendar.aspx?dateFormat=dd/mm/yy" correctly. This script creates a calendar and does not work the way you want it to. From the code I could see this library uses jQueryUI.
Instead of using the aspx url, include the jQueryUI library separately:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<form name="myForm" action="displayDate.html" method="post">
Date of Birth: <input type="text" id="txtDate" name="txtDate"/>
<input type="submit" value="Submit"/>
</form>
To bind a datepicker to the txtDate use:
$(function() {
$( "#txtDate" ).datepicker();
});
See the working example: http://jsfiddle.net/2zdgz/
Is there any way to stop this scrolling when user inputs data on ipad,i tried different things but does not work.
Is there any way to stop this scrolling.
here is my code
<html lang = "en">
<head>
<title>formDemo.html</title>
<meta charset = "UTF-8" />
<script>
$(document).ready(function() {
$(document).bind('touchmove', false);
});
</script>
</head>
<body>
<h1>Form Demo</h1>
<form>
<label for="name">Text Input:</label>
<input type="text" name="name" id="inputtext" onFocus="window.scrollTo(0, 0); value="" style="margin:400px 0 0 0;" />
</form>
</body>
</html>
Your question is almost answered here. You only have to combine your logic with:
$(document).bind('touchmove', false); // or true, depends you want to disable / enable