I want to create a simple html-javascript page with a text field and a submit button. Submit button has to be enabled every 5 minutes, then you can wrote something in the field and click on submit.clicking on submit, it show how much time is elapsed from activation and submit. Thanks
<html>
<body>
<div id="main">
<!-- Form -->
<form id="form" action="/" method="post">
<label>
<span>Website:</span>
<input placeholder="http://" type="url" tabindex="4" required>
</label>
</div>
<div>
<button name="submit" type="submit" id="submit">invia</button>
<script type="text/javascript">
document.getElementById('submit').disabled = true;
setTimeout(function(){
document.getElementById('submit').disabled = false;
}, 2000);
</script>
<script type="text/javascript">
var t0 = performance.now();
var i=0;
do
{
i++;
} while document.getElementById('submit').click();
var t1 = performance.now();
var time= ( (t1 - t0) + " milliseconds.");
document.getElementById('time').innerHTML = time;
</script>
</div>
<div id="time"></div>
</form>
<!-- /Form -->
</div>
</body>
</html>
Have a look at WindowTimers.setInterval() where a function/callback is invoked at every nth time defined.
In your case, button attribute enabled/disabled.
Hope this helps.
problem solved.
<html>
<body>
<div id="main">
<!-- Form -->
<form id="form" action="/" method="post">
<div>
<label>
<span>Website:</span>
<input placeholder="http://" type="url" required>
</label>
</div>
<div>
<input type="button" value="Invia" id="Invia" onclick="stopTimer()" />
<script type="text/javascript">
document.getElementById('Invia').disabled = true;
setTimeout(function(){
document.getElementById('Invia').disabled = false;
document.getElementById('tempVar').value = Date.now();
}, 5000);
</script>
<script>
var greeting;
function timeGreeting()
{
greeting = performance.now();
}
timeGreeting();
function stopTimer()
{
var time = performance.now();
alert((time - greeting) + "ms");
}
</script>
<input type="button" value="Ricarica Pagina" onClick="document.location.reload(true)">
</div>
</form>
<!-- /Form -->
</div>
</body>
</html>
Related
I'm stuck on a problem. I'm working on an exercise that generates a random integer between 1-10. The user will submit a number from 1-10 in the input box. If a match occurs, the user will get an alert notifying them of success.
I'm stuck on getting the number from the user input. I want to log to the console the form input, but for the life of me, I cannot figure this out. I've tried changing the form type="number", type="text" and tried using parseInt().
Anything glaring in my code?
function exerciseEight() {
let input = document.querySelector("#number").value;
let button = document.querySelector("#guess");
let valueInt = parseInt(input, 10);
let number = Math.ceil(Math.random() * 10);
console.log(number);
button.onclick = function() {
console.log(input);
};
}
exerciseEight();
<body>
<div class="container container-fluid">
<p><strong>Exercise Eight:</strong> Guess a Number between 1 and 10.</p>
<form>
<div class="form-group">
<label for="number">Choose Number:</label>
<input id="number" value="" type="text" name="number" />
</form>
<!-- Result will go here -->
<p id="result"></p>
</div>
<button class="btn btn-dark" id="guess" type="submit">SUBMIT</button>
</body>
You need to get the input value when the user clicks. You're setting input and all the other variables that depend on it when the page is first loaded.
function exerciseEight() {
let button = document.querySelector("#guess");
let number = Math.ceil(Math.random() * 10);
button.onclick = function() {
let input = document.querySelector("#number").value;
let valueInt = parseInt(input, 10);
console.log(number, input);
};
}
exerciseEight();
<body>
<div class="container container-fluid">
<p><strong>Exercise Eight:</strong> Guess a Number between 1 and 10.</p>
<form>
<div class="form-group">
<label for="number">Choose Number:</label>
<input id="number" value="" type="text" name="number" />
</form>
<!-- Result will go here -->
<p id="result"></p>
</div>
<button class="btn btn-dark" id="guess" type="submit">SUBMIT</button>
</body>
The problem is that you are calling the function when the page loads, so it gets the values from the start, and doesn't change them at runtime when user enters input. You should call the function when user clicks the button.
function exerciseEight() {
let input = document.querySelector("#number").value;
let valueInt = parseInt(input, 10);
let number = Math.ceil(Math.random() * 10);
console.log(number);
}
let button = document.querySelector("#guess");
button.onclick = exerciseEight;
<body>
<div class="container container-fluid">
<p><strong>Exercise Eight:</strong> Guess a Number between 1 and 10.</p>
<form>
<div class="form-group">
<label for="number">Choose Number:</label>
<input id="number" value="" type="text" name="number" />
</form>
<!-- Result will go here -->
<p id="result"></p>
</div>
<button class="btn btn-dark" id="guess" type="submit">SUBMIT</button>
</body>
Today I am going to use JavaScript to do a validation of the registration page, but after an afternoon of verification, the function can be called. When the test pop-up window is added at the beginning of the function, the pop-up window pops up correctly, but the verification function in the function is always unresponsive. Ask for the forum's amnesty, where is the problem, thank you! ! !
I added a test popup statement to the script and it succeeded. But other functions don't respond.
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册界面</title>
<link rel="stylesheet" type="text/css" href="css/register.css">
<script type="text/javascript">
window.alert("test");
function checkRegisterINfo(form) {
/*判断姓名格式是否正确*/
var RegisterNameCheck = document.getElementById("nameId").value;
if (RegisterNameCheck = "") {
window.alert("姓名不能为空！");
return false;
} else {
var rightName = /[\u4E00-\u9FA5]{2,16}/;
if (rigntName.test(RegisterNameCheck) == true) {} else {
window.alert("您输入的姓名不正确！");
return false;
}
}
/*判断密码是否规范*/
var RegisterPwdCheck = document.getElementById("pwdId").value;
var rightPwd = /^(\w){6,20}$/;
if (rightPwd.test(RegisterPwdCheck) == false) {
window.alert("密码只能输入6-20个字母、数字、下划线");
return false;
}
/*判断密保问题格式是否正确*/
var RegisterQuestionCheck = document.getElementById("questionId").value;
var rightQuestion = /[\u4E00-\u9FA5]{1,16}/;
if (!rightQuestion.test(RegisterQuestionCheck)) {
window.alert("密保问题支持1-16位汉字！");
return false;
}
/*判断密保答案格式是否正确*/
var RegisterAnswerCheck = document.getElementById("answerId").value;
var rightAnswer = /[\u4E00-\u9FA5]{1,50}/;
if (!rightAnswer.test(RegisterAnswerCheck)) {
window.alert("密保答案支持1-50位汉字！");
return false;
}
}
</script>
</head>
<body>
<div class="main">
<div class="title">
<span>用户注册</span>
</div>
<form name="registerForm" method="post" action="" onsubmit="return checkRegisterINfo(registerForm)">
<!--输入框-->
<div class="input-content">
<div>
<input type="text" autocomplete="off" id="nameId" placeholder="用户名" name="Registerusername" required/>
</div>
<div style="margin-top: 16px">
<input type="password" autocomplete="off" id="pwdId" placeholder="登录密码" name="Registerpassword" required maxlength="32" />
</div>
<div style="margin-top: 16px">
<input type="text" autocomplete="off" id="questionId" placeholder="密保问题" name="Registerquestion" required maxlength="32" />
</div>
<div style="margin-top: 16px">
<input type="text" autocomplete="off" id="answerId" placeholder="密保答案" name="Registeranswer" required maxlength="32" />
</div>
</div>
<!--登入按钮-->
<div style="margin-top: 105px">
<button type="submit" class="enter-btn">登录</button>
</div>
<div class="foor">
<div class="left"><span>忘记密码</span></div>
<div class="right"><span>用户登录</span></div>
</div>
</form>
</div>
</body>
</html>
<html>
<head>
<title>
Form
</title>
</head>
<body>
<script type="text/javascript">
function calculate (form)
{
cel = fah * 0.5555 - 32;
document.getElementById("finish").innerHTML = cel;
}
</script>
<form name="myform" action="" method="get"> Turn Fahrenheit to Celsius! <br>
<input type="number" name="fah">
<input type="button" name="button" value="calculate" onClick="calculate(this.form)">
<button type="reset" value="Reset">Reset</button>
</form>
<p id="finish">°C</p>
</body>
</html>
Edit1: Moved the inner.HTML into the Function
So the reset button is the only thing that works. Is it possible to calculate the math this way?
You asked a question on how to create a pizza form a while ago and you deleted it soon as it was down voted a few times.
The point to note here is, it is okay if a few people dislike your question. You've joined StackExchange not to gain points but to learn a few things. Your question could be helpful to a lot of others out there in this world. So here it is the answer to your pizza question
<html>
<body>
<p>A pizza is 13 dollars with no toppings.</p>
<form action="form_action.asp">
<input type="checkbox" name="pizza" value="Pepperoni" id="pep">Pepperoni + 5$<br>
<input type="checkbox" name="pizza" value="Cheese" id="che">Cheese + 4$<br>
<br>
<input type="button" onclick="myFunction()" value="Send order">
<input type="button" onclick="cost()" value="Get cost">
<br><br>
<input type="text" id="order" size="50">
</form>
<script>
function myFunction() {
var pizza = document.forms[0];
var txt = "";
var i;
for (i = 0; i < pizza.length; i++) {
if (pizza[i].checked) {
txt = txt + pizza[i].value + " ";
}
}
document.getElementById("order").value = "You ordered a pizza with: " + txt;
}
function cost() {
var pep = 5;
var che = 4;
var pizza = 13;
var total = 0;
if (document.getElementById("pep").checked === true) {
total += pep;
}
if (document.getElementById("che").checked === true) {
total += che;
}
document.getElementById("order").value = "The cost is : " + total;
}
</script>
</body>
</html>
Thanks. I hope this helps you.
Adeno Fixed it by declaring what fah was. you can also see your errors with f12.
https://stackoverflow.com/users/965051/adeneo
<html>
<head>
<title>
Form
</title>
</head>
<body>
<script type="text/javascript">
function calculate(form) {
var cel = (document.getElementById("fah").value -32) * 5 / 9;
document.getElementById("finish").innerHTML = cel;
}
</script>
<form name="myform" action="" method="get"> Turn Fahrenheit to Celsius!
<br>
<input type="number" name="fah" id="fah">
<input type="button" name="button" value="calculate" onClick="calculate(this.form)">
<button type="reset" value="Reset">Reset</button>
</form>
<p id="finish">°C</p>
</body>
You never get the value from the input type = "number"
Try this
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
function calculate()
{
var fah = document.getElementById('fah').value;
var cel = parseFloat(fah * 0.5555 - 32);
document.getElementById("finish").innerHTML = cel;
}
</script>
</head>
<body>
<form>
Turn Fahrenheit to Celsius! <br>
<input type="text" name="fah" id="fah">
<input type="button" name="button" value="calculate" onClick="calculate()">
<button type="reset" value="Reset">Reset</button>
</form>
<p id="finish">°C</p>
</body>
</html>
Couple things: You need to set the innerhtml from within the function because the variable is in the function. Or you could have declared the variable outside the function first like var fah = "" then the function. But since you declared it in the function only the function can see it. So i moved the innerhtml set into the function.
Also, javascript likes to use id's not name = "fah" You can call an element by name but id is easier.
i rounded it to integer. you would get 9 decimals your way.
Lastly, innerhtml set clears all the html so you would lose the °C the way you had it.
<html>
<head>
<title>
Form
</title>
</head>
<body>
<script type="text/javascript">
function calculate (form)
{
var fah = this.fah.value;
cel = Math.round((fah-32) / 1.8);
document.getElementById("finish").innerHTML = cel+"°C";
}
</script>
<form name="myform" action="" method="get"> Turn Fahrenheit to Celsius! <br>
<input type="number" name="fah" id = "fah">
<input type="button" name="button" value="calculate" onClick="calculate(this.form)">
<button type="reset" value="Reset">Reset</button>
</form>
<p id="finish"></p>
</body>
</html>
I'm trying to make a slogan game where the user inputs the company's name that uses the slogan. The games in early development and if missing a but my current code does not work.
<html land="en">
<head>
<title>Whats that ???</title>
<script>
function checkAnswer()
{
var answer = document.getElementById("answerInput");
var theAnswer = answer.value;
document.getElementById("correct/incorrent").innerHTML += theanswer;
}
</script>
</head>
<body>
<div id="game-container">
<div id="slogan">
<p>Das Auto</p>
</div>
<div id="answer">
<p>Answer<p>
<input id="answerInput" type="text">
<input type="button" value="Check" onClick="checkAnswer">
</div>
<div id="correct/incorrent">
Hello
</div>
</div>
Tnx Adam
Fixed syntax errors:
theanswer != theAnswer, missing camel case letter "A"
need to invoke function by () rather than just stating its reference checkAnswer
<html land="en">
<head>
<title>Whats that ???</title>
<script>
function checkAnswer() {
var answer = document.getElementById("answerInput");
var theAnswer = answer.value;
document.getElementById("correct/incorrent").innerHTML += theAnswer;
}
</script>
</head>
<body>
<div id="game-container">
<div id="slogan">
<p>Das Auto</p>
</div>
<div id="answer">
<p>Answer<p>
<input id="answerInput" type="text">
<input type="button" value="Check" onclick="checkAnswer()">
</div>
<div id="correct/incorrent">
Hello
</div>
</div>
</body>
</html>
The onclick event executes any javascript between the quotes. You were just referencing a function, not calling it.
onclick="checkAnswer()"
<html land="en">
<head>
<title>Whats that ???</title>
</head>
<body>
<div id="game-container">
<div id="slogan">
<p>Das Auto</p>
</div>
<div id="answer">
<p>Answer<p>
<input id="answerInput" type="text">
<input type="button" value="Check">
</div>
<div id="correct/incorrent">
Hello
</div>
</div>
<script>
var btn = document.getElementById("answerInput");
var ans = document.getElementById("correct/incorrent");
btn.onClick = function (){
var answer = document.getElementById("answerInput");
var theAnswer = answer.value;
ans.innerHTML += theAnswer;
}
</script>
</body>
</html>
Here is the sample code for my project. It contains two forms on a single page.
The first form contains username and a textbox, when I enter the username and click the login button the user's name should be displayed and the logout form should be displayed.
How do I ensure that the user will remain logged in once the browser window is closed?
Code
<!DOCTYPE html>
<html>
<title>Login Page</title>
<head>
<script>
function set(x)
{
document.getElementById(x).value="";
}
</script>
<script>
function showDiv(e)
{
var divs = document.getElementsByTagName('div');
if (e==1)
{
for(i=0;i<divs.length;i++)
{
if (divs[i].id=="hidevar1")divs[i].style.visibility="visible";
else if (divs[i].id=="hidevar2")divs[i].style.visibility="hidden";
}
}
else {
for(i=0;i<divs.length;i++)
{
if (divs[i].id=="hidevar1")divs[i].style.visibility="hidden";
else if (divs[i].id=="hidevar2") {
divs[i].style.visibility="visible";
}
}
}
}
function put()
{
var x = document.getElementById("fname").value;
currentTime=new Date();
if(currentTime.getHours()<12)
var y = "Good Morning ";
else if(currentTime.getHours()<17)
var y = "Good Afternoon ";
else
var y = "Good Evening ";
document.getElementById("devin").innerHTML = "Hello " + x + " " + y;
}
</script>
<script>
</script>
<script>
function search()
{
var dic = document.getElementById("url").value;
var str="http://www.google.co.in/#hl=en&q=";
var www=str+dic;
window.open(www);
}
</script>
</head>
<body>
<div id="devin">
</div>
<div id="hidevar1" style="visibility: visible;">
<form name="frm1" method="post" >//Login form
User Name : <input type="text" id="fname" value="Enter name here" onfocus="set(this.id)" >
</form>
<input type="button" value="Login" onClick="showDiv(2);put();">
</div>
<div id="hidevar2" style="visibility: hidden;">
<form name="frm2">//logout form
<script>
</script><br/>
<input type="submit" value="logout">
<br>
<br>
</form>
</div>
<br><br>
<input type="text" name="url1" id="url" />
<input type="submit" value="google"onclick="search();" />
</body>
</html>
If you plan to use spring, spring-security provides remember me services which would let you be logged in across browsers or sessions.
Other option is to use Apache shiro if you find spring-security too complex for your application.