I have made a console using html,css,javascript
the input does not appears on enter press
the send button should b pressed
how to make it go on enter press
the code is given here please help
/* code goes below*/
<!DOCTYPE html>
<html>
<head>
<title>Konsole</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
</head>
<body>
<style>
body{
monospace
}
body{
color:#52cc29;
background-color:black;
font-family:monospace;
}
div.textarea > textarea{
height:80vh;
width:95%;
font-family:monospace;
font-size:20px;
font-weight:bold;
color:#52cc29;
background-color:black;
border:5px solid white;
}
input.command{
height:30px;
width:70%;
background-color:black;
border:3px solid white;
color:#52cc29;
font-size:15px;
text-align:left;
padding-left:4px;
font-family:monospace;
font-weight:bold;
}
h3{
font-family:monospace;
font-size:20px;
font-weight:bold;
}
input.send{
background-color:black;
color:#52cc29;
font-family:monospace;
font-weight:bold;
height:35px;
width:60px;
font-size:20px;
}
</style>
<script>
function chat(){
var time = new Date();
var hours = time.getHours();
var min = time.getMinutes();
var sec = time.getSeconds;
var write = document.getElementById("area2").value;
var read = document.getElementById("area1").value;
var newRead = "you at " +" "+hours+"h:"+min+"m"+" : " + write + "\n" + read;
document.getElementById("area1").value = newRead;
switch(write){
case "#echo.off" : document.getElementById("area1").value = "echo is off";
break;
}
}
</script>
<center>
<h3>Console</h3>
<form id="form1" >
<div class="textarea">
<textarea autocapitalize="off" spellcheck="false"
autocorrect="off" autocomplete="off" id="area1" readonly ></textarea>
</div>
</form>
<form id="form2">
<div class="input">
<input autocapitalize="off" spellcheck="false" autocorrect="off" autocomplete="off" class="command" id="area2" placeholder="type command here"></input>
<input class="send" type="button" id="button" value="send" onclick="chat();">
</div>
</form>
</center>
</body>
</html>
Try this:
<script>
window.addEventListener("keypress",handleKey);
function handleKey(e){
if(e.keyCode == 13){
chat();
}
}
</script>
Related
I want to have two forms on the same page, one for userregistration, and one for editing a comanys name. This is how I have gotten so far...
test001.js:
$(document).ready(function() {
$(function() {
$("#dialog").dialog({
autoOpen: false
});
$("#button").on("click", function() {
$("#dialog").dialog("open");
});
});
// Validating Form Fields.....
$("#submit").click(function(e) {
var email = $("#email").val();
var comnpanyname = $("#companyname").val();
var lastname = $("#lastname").val();
var password = $("#password").val();
var emailReg = /^(([^<>()\[\]\.,;:\s#\"]+(\.[^<>()\[\]\.,;:\s#\"]+)*)|(\".+\"))#(([^<>()[\]\.,;:\s#\"]+\.)+[^<>()[\]\.,;:\s#\"]{2,})$/i;
if (firstname === '' || lastname === '' || password === '' || email === '') {
alert("Please fill all fields!");
e.preventDefault();
} else if (!(email).match(emailReg)) {
alert("Invalid Email!");
e.preventDefault();
} else {
alert("Form Submitted Successfully.");
}
});
});
test001.css
#import "http://fonts.googleapis.com/css?family=Droid+Serif";
/* Above line is used for online google font */
h2 {
text-align:center;
font-size:24px
}
hr {
margin-bottom:30px
}
p {
color:#000;
font-size:16px;
font-weight:700
}
#button,#button2 {
border:1px solid #0c799e;
width:250px;
padding:10px;
font-size:16px;
font-weight:700;
color:#fff;
border-radius:3px;
background:linear-gradient(to bottom,#59d0f8 5%,#49c0e8 100%);
cursor:pointer
}
#button:hover,#button2:hover {
background:linear-gradient(to bottom,#49c0e8 5%,#59d0f8 100%)
}
input[type=text] {
margin-top:5px;
margin-bottom:20px;
width:96%;
border-radius:5px;
border:0;
padding:5px 0
}
#firstname,#lastname,#email,#password,#company {
padding-left:10px
}
input[type=submit] {
width:30%;
border:1px solid #59b4d4;
background:#0078a3;
color:#eee;
padding:3px 0;
border-radius:5px;
margin-left:33%;
cursor:pointer
}
input[type=submit]:hover {
border:1px solid #666;
background:#555;
color:#fff
}
.ui-dialog .ui-dialog-content {
padding:2em
}
/* 960x610 */
div.container {
width:500px;
height:300px;
margin:50px auto;
font-family:'Droid Serif',serif;
position:relative
}
div.container2 {
width:960px;
height:610px;
margin:50px auto;
font-family:'Droid Serif',serif;
position:relative
}
div.main {
width:320px;
margin-top:35px;
float:left;
padding:10px 55px 25px;
background-color:rgba(204,204,191,0.51);
border:15px solid #fff;
box-shadow:0 0 10px;
border-radius:2px;
font-size:13px;
text-align:center
}
div.main2 {
width:320px;
margin-top:35px;
float:left;
padding:10px 55px 25px;
background-color:rgba(204,204,191,0.51);
border:15px solid #fff;
box-shadow:0 0 10px;
border-radius:2px;
font-size:13px;
text-align:center
}
<!DOCTYPE html>
<html>
<head>
<title>jQuery Dialog Form Example</title>
<link href="http://enersen.no/development/eds/css/test001.css" rel="stylesheet">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://enersen.no/development/eds/js/user.js" type="text/javascript"></script>
<!-- script src="http://enersen.no/development/eds/js/company.js" type="text/javascript"></script -->
</head>
<body>
<div class="container">
<div class="main">
<div id="dialog" title="Dialog Form">
<form action="" method="post">
<label>First name:</label>
<input id="firstname" name="firstname" type="text">
<label>Last name:</label>
<input id="lastname" name="lastname" type="text">
<label>Email:</label>
<input id="email" name="email" type="text">
<label>Password:</label>
<input id="password" name="password" type="password">
<input id="submit" type="submit" value="Submit">
</form>
</div>
<h2>jQuery Dialog Form Example</h2>
<p>Click below button to see jQuery dialog form.</p>
<input id="button" type="button" value="Open Dialog Form">
</div>
</div>
<div class="container2">
<div class="main2">
<div id="dialog2" title="Dialog Form 2">
<form action="" method="post">
<label>New comany name:</label>
<input id="company" name="company" type="text">
<input id="submit" type="submit" value="Submit">
</form>
</div>
<h2>jQuery Dialog Form Example</h2>
<p>Click below button to see jQuery dialog form.</p>
<input id="button2" type="button" value="Open Company Dialog Form">
</div>
</div>
</body>
</html>
I expect the form that I activate to be the one evaluated. Now it is the form for adress-/login-info that gets evaluated. I guess I need some code snipplet that lets med deal with the forms as different documents in Javascript?
You have more than one submit button with the id submit - simply change them to be unique - where you use an id attribute, they should always be unique for the page.
For example, use userRegistrationSubmit for one and then change this:
$("#submit").click(function(e) {
to
$("#userRegistrationSubmit").click(function(e) {
You could call the other companyNameChangeSubmit.
Thanks, Jamiec, you pointed me in the rigth direction and I solved it :-) Here's the result:
$(document).ready(function() {
$(function() {
$("#userDialog").dialog({
autoOpen: false
});
$("#companyDialog").dialog({
autoOpen: false
});
$("#userButton").on("click", function() {
$("#userDialog").dialog("open");
});
$("#companyButton").on("click", function() {
$("#companyDialog").dialog("open");
});
});
// Validating Form Fields.....
$("#userSubmit").click(function(e) {
var email = $("#email").val();
var comnpanyname = $("#companyname").val();
var lastname = $("#lastname").val();
var password = $("#password").val();
var emailReg = /^(([^<>()\[\]\.,;:\s#\"]+(\.[^<>()\[\]\.,;:\s#\"]+)*)|(\".+\"))#(([^<>()[\]\.,;:\s#\"]+\.)+[^<>()[\]\.,;:\s#\"]{2,})$/i;
if (firstname === '' || lastname === '' || password === '' || email === '') {
alert("Please fill all fields!");
e.preventDefault();
} else if (!(email).match(emailReg)) {
alert("Invalid Email!");
e.preventDefault();
} else {
alert("Form Submitted Successfully.");
}
});
});
I want to show a tooltip on ma text input when it's not valid
function check() {
var ok = true;
regLast = /^[a-zA-Z]{2,20}$/;
if (!regLast.test(document.getElementById("lastName").value)) {
ok = false;
}
return ok;
}
<div class="form-group">
<label for="lastName">Last name:</label>
<input type="text" class="form-control" id="lastName" placeholder="Put your last name" name="lastName" />
</div>
and I know how to put, a text in a div under, a input by document.getElementById("wronglastnamediv").innerHTML = "Put valid last name"
But I don't know how to put a tooltip on these text area when it's not valid..
You should edit the below code accordingly, also link the jquery 1.7 or above-
<script>
$('#lastName').on('keyup', function () {
$('.text-error').remove();
var ok=true;
regLast = /^[a-zA-Z]{2,20}$/;
if (!regLast.test(document.getElementById("lastName").value))
{
ok=false;
$(this).parent('.form-group').append("<span class='text-error'>Please enter a valida string.</span>");
}
return ok;
});
</script>
//CSS add your own CSS for tooltip style etc
<style type="text/css">
.form-group{
position:relative;
}
.text-error{
position:absolute;
right:0;
top:0px;
background:red;
color:white;
border-radius:5px;
padding:5px 3px;
}
</style>
Hopefully the code will work for you.
Pure Javascript
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.form-control{
position:relative;
width: 100%;
float: left;
}
.text-error{
position:absolute;
right:0;
top:0px;
background:red;
color:white;
border-radius:5px;
padding:5px 3px;
display: none;
}
.display_block{
display: block;
}
</style>
</head>
<body>
<div class="form-group">
<label for ="lastName">Last name:</label>
<input type = "text" class = "form-control" id = "lastName" onkeyup="check()" placeholder = "Put your last name" name = "lastName" />
<span class="text-error" id="error_lastname"></span>
</div>
<script type="text/javascript">
function check () {
var div = document.getElementById("error_lastname");
div.setAttribute('class', 'text-error');
var ok=true;
regLast = /^[a-zA-Z]{2,20}$/;
if (!regLast.test(document.getElementById("lastName").value))
{
ok=false;
div.setAttribute('class', 'text-error display_block');
div.innerHTML = "Please enter a valid string.";
console.log("XXXX");
}
return ok;
}
</script>
</body>
</html>
You can add tooltip for the input field like this. Use setAttribute('title', 'some tooltip') to set the tooltip and removeAttribute('title') to remove the tooltip from the input field.
I have added input-event listener to the input field that performs validation of the input value each time you type a character and based on the result of the validation it either adds or removes the tooltip.
If you type just one character and hover over the input field, you should see the tooltip. If you type a second character it disappears (note that you need to move mouse cursor outside of the input field and then back to actually see the tooltip).
function check() {
var ok = true;
const regLast = /^[a-zA-Z]{2,20}$/;
if (!regLast.test(document.getElementById("lastName").value)) {
ok = false;
}
return ok;
}
const inp = document.querySelector('input');
inp.addEventListener('input', event => {
if (!check(inp.value)) {
inp.setAttribute('title', 'incorrect value');
} else {
inp.removeAttribute('title');
}
});
<div class="form-group">
<label for ="lastName">Last name:</label>
<input type = "text" class = "form-control" id = "lastName" placeholder = "Put your last name" name = "lastName" />
</div>
If you need something more sophisticated and more 'visible' then you can use css combined with data attributes. The logic is the same as with the previous code. Based on the result of validation you either add a data attribute to the input field or remove it.
function check() {
var ok = true;
const regLast = /^[a-zA-Z]{2,20}$/;
if (!regLast.test(document.getElementById("lastName").value)) {
ok = false;
}
return ok;
}
const inp = document.querySelector('input');
inp.addEventListener('input', event => {
if (!check(inp.value)) {
inp.parentElement.dataset.tip = 'incorrect input value';
} else {
delete inp.parentElement.dataset.tip;
}
});
[data-tip] {
position:relative;
}
[data-tip]:before {
content:'';
display:none;
content:'';
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #1a1a1a;
position:absolute;
top:30px;
left:35px;
z-index:8;
font-size:0;
line-height:0;
width:0;
height:0;
}
[data-tip]:after {
display:none;
content:attr(data-tip);
position:absolute;
top:35px;
left:0px;
padding:5px 8px;
background:#1a1a1a;
color:#fff;
z-index:9;
font-size: 0.75em;
height:18px;
line-height:18px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
white-space:nowrap;
word-wrap:normal;
}
[data-tip]:hover:before,
[data-tip]:hover:after {
display:block;
}
<div class="form-group" >
<label for ="lastName">Last name:</label>
<input type = "text" class = "form-control" id = "lastName" placeholder = "Put your last name" name = "lastName" />
</div>
To add the tooltip on form submit instead of hover, you can use submit-event listener and execute the same code as before but you need to add event.preventDefault(); as well to prevent the form from submitting if the validation fails (and you need to change the css slightly).
When you click submit button now, you should see the tooltip if the input value is incorrect.
function check() {
var ok = true;
const regLast = /^[a-zA-Z]{2,20}$/;
if (!regLast.test(document.getElementById("lastName").value)) {
ok = false;
}
return ok;
}
const inp = document.querySelector('input');
const form = document.querySelector('form');
form.addEventListener('submit', event => {
if (!check(inp.value)) {
event.preventDefault();
inp.parentElement.dataset.tip = 'incorrect input value';
} else {
delete inp.parentElement.dataset.tip;
}
});
[data-tip] {
position:relative;
}
[data-tip]:before {
content:'';
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #1a1a1a;
position:absolute;
top:30px;
left:35px;
z-index:8;
font-size:0;
line-height:0;
width:0;
height:0;
}
[data-tip]:after {
content:attr(data-tip);
position:absolute;
top:35px;
left:0px;
padding:5px 8px;
background:#1a1a1a;
color:#fff;
z-index:9;
font-size: 0.75em;
height:18px;
line-height:18px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
white-space:nowrap;
word-wrap:normal;
}
[data-tip]:hover:before,
[data-tip]:hover:after {
display:block;
}
<form>
<div class="form-group" >
<label for ="lastName">Last name:</label>
<input type = "text" class = "form-control" id = "lastName" placeholder = "Put your last name" name = "lastName" />
</div>
<input type="submit" value="submit" />
</form>
You can simply use the HTML5 Form Validation (If you don't want a custom tooltip).
See the code snippet below:
<form>
<p>
<label for="firstName">First name: </label>
<input type="text" id="firstName" placeholder="Put your first name" pattern="[a-zA-Z]{2,20}" required />
</p>
<p>
<label for="lastName">Last name: </label>
<input type="text" id="lastName" placeholder="Put your last name" pattern="[a-zA-Z]{2,20}" required />
</p>
<input type="submit" Value="Submit" />
</form>
Also you can use setCustomValidity function when oninvalid event occurs to to change the default message of the required field.
Example:
<form>
<p>
<label for="firstName">First name: </label>
<input type="text" id="firstName" placeholder="Put your first name" pattern="[a-zA-Z]{2,20}" oninvalid="this.setCustomValidity('Please enter a valid Name')" required />
</p>
<p>
<label for="lastName">Last name: </label>
<input type="text" id="lastName" placeholder="Put your last name" pattern="[a-zA-Z]{2,20}" required />
</p>
<input type="submit" Value="Submit" />
</form>
I am trying to build a form that will calculate average pay. Very simply the calculation needs to be x/y = z. I would like it to autocomplete and not need to submit a form. This is what I have so far, I got close but I am going to insert the code onto a Weebly website and it could not read it. Any help would be massively appreciated!
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate(output1)
{
var result = (input1/input2);
document.getElementById("output1").value = result;
}
</script>
<style type="text/css">
body { font-family:Cambria; font-size:18px; line-height:28px; margin:0; padding:0;}
.container
input { border:1px solid #eee; }
.container p label { width:180px; float:left; }
p { clear:both; }
</style>
</head>
<body>
<form name="day calculator" method="post" action="">
<div class="container">
<p><font color="black"><b><label>Weekly Pay : </label></b><input type="number" name="input1" value=""/></p>
<p><font color="black"><b><label>Days Worked : </label></b><input type="number" name="input2" value="" onBlur="calculate(this.value);"/></p>
<p><font color="red"><b><label>Average Pay : </label><input type="number" name="output1" id="output1"></b></p>
</div>
</form>
</body>
</html>
OK. There are a number of issues here.
First, your javascript is referring to the HTML element, not it's value.
you need to add ids to the inputs and ensure that you convert the values to numbers.
This might help:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate()
{
var input1Val = Number(document.getElementById("input1").value);
var input2Val = Number(document.getElementById("input2").value);
var result = (input1Val/input2Val);
document.getElementById("output1").value = result;
}
</script>
<style type="text/css">
body { font-family:Cambria; font-size:18px; line-height:28px; margin:0; padding:0;}
.container
input { border:1px solid #eee; }
.container p label { width:180px; float:left; }
p { clear:both; }
</style>
</head>
<body>
<form name="day calculator" method="post" action="">
<div class="container">
<p><font color="black"><b><label>Weekly Pay : </label></b><input type="number" id="input1" name="input1" value=""/></p>
<p><font color="black"><b><label>Days Worked : </label></b><input type="number" id="input2" name="input2" value=""/></p>
<p><font color="red"><b><label>Average Pay : </label><input type="number" name="output1" id="output1"></b></p>
<input type="button" value="Go!" onclick="calculate()">
</div>
</form>
</body>
</html>
Following code will work. You have to watch out the difference to understand the problem in your code.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate(input2)
{
var input1 = document.getElementById("input1").value;
var result = (input1/input2);
document.getElementById("output1").value = result;
}
</script>
<style type="text/css">
body { font-family:Cambria; font-size:18px; line-height:28px; margin:0; padding:0;}
.container
input { border:1px solid #eee; }
.container p label { width:180px; float:left; }
p { clear:both; }
</style>
</head>
<body>
<form name="day calculator" method="post" action="">
<div class="container">
<p><font color="black"><b><label>Weekly Pay : </label></b><input type="number" id="input1" name="input1" value=""/></p>
<p><font color="black"><b><label>Days Worked : </label></b><input type="number" name="input2" value="" onBlur="calculate(this.value);"/></p>
<p><font color="red"><b><label>Average Pay : </label><input type="number" name="output1" id="output1"></b></p>
</div>
</form>
</body>
</html>
I have started learning javascript prior to work experience with a website coding business. I have coded this, but when i run the .html file, i get a blank web page. I do not know what i have done wrong. Here is the code:
<html>
<body>
<form>
<p><b>CALCULATOR</b></p>
<p><b>Enter a number to continue:</b></p>
<p><input type="text" name="calcbox1"/></p>
<p><b>Enter the function (+, -, *, /):</b></p>
<p><input type="text" name="calcbox2"/></p>
<p><b>Enter another number:</b></p>
<p><input type="text" name="calcbox3"/></p>
<p><input type="button" onclick="check(this.form)" value="Calculate!"/></p>
<p><input type="reset" value="Reset"></p>
<p><b>Answer:</b></p>
<p><input type="text" name="calcbox4"/></p>
</form>
<script>
function check(form) {
var input4 = 0;
if( form.calcbox2.value == "+" ) {
input4 = form.calcbox1.value + form.calcbox3.value;
}
if( input2 == "-" ) {
input4 = form.calcbox1.value - form.calcbox3.value;
}
if( input2 == "*" ) {
input4 = form.calcbox1.value * form.calcbox3.value;
}
if( input2 == "/" ) {
input4 = form.calcbox1.value / form.calcbox3.value;
}
}
document.all.calcbox4.value = input4;
</script>
<script>
document.write(input4);
</script>
</body>
</html>
Thanks in advance for anyone who can help :)
You could assign first the values of the inputs, convert it to number with an unary + and perfor a check for the operator. The assign it with document.getElementById('calcbox4') to the value property of the input.
The reason for a blank page is the last document.write(input4);, which rewites the page.
document.all.calcbox4.value works only for old Internet Explorer. It is not a standard to assign a value.
function check(form) {
var input1 = +form.calcbox1.value,
operator = form.calcbox2.value,
input3 = +form.calcbox3.value,
output = 0;
if (operator == "+") {
output = input1 + input3;
}
if (operator == "-") {
output = input1 - input3;
}
if (operator == "*") {
output = input1 * input3;
}
if (operator == "/") {
output = input1 / input3;
}
document.getElementById('calcbox4').value = output;
}
<form>
<p><b>CALCULATOR</b></p>
<p><b>Enter a number to continue:</b></p>
<p><input type="text" name="calcbox1" /></p>
<p><b>Enter the function (+, -, *, /):</b></p>
<p><input type="text" name="calcbox2" /></p>
<p><b>Enter another number:</b></p>
<p><input type="text" name="calcbox3" /></p>
<p><input type="button" onclick="check(this.form)" value="Calculate!" /></p>
<p><input type="reset" value="Reset"></p>
<p><b>Answer:</b></p>
<p><input type="text" id="calcbox4" /></p>
</form>
You can use simple switch case and in your case you are not converting the text into integer you have to convert text to int using parseint
function check(form) {
var input4 = 0;
//first input value
var input1 = parseInt(form.calcbox1.value);
//thrid input value
var input3 = parseInt(form.calcbox3.value);
switch(form.calcbox2.value)
{
case "+":
input4 = input1 + input3;
break;
case "-":
input4 = input1 - input3;
break;
case "*":
input4 = input1 * input3;
break;
case "/":
input4 = input1 / input3;
break;
}
document.all.calcbox4.value = input4;
}
<html>
<body>
<form>
<p><b>CALCULATOR</b></p>
<p><b>Enter a number to continue:</b></p>
<p><input type="text" name="calcbox1"/></p>
<p><b>Enter the function (+, -, *, /):</b></p>
<p><input type="text" name="calcbox2"/></p>
<p><b>Enter another number:</b></p>
<p><input type="text" name="calcbox3"/></p>
<p><input type="button" onclick="check(this.form)" value="Calculate!"/></p>
<p><input type="reset" value="Reset"></p>
<p><b>Answer:</b></p>
<p><input type="text" name="calcbox4"/></p>
</form>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function clearFields(val)
{
document.getElementById("expression").value=val;
}
function v(val)
{
document.getElementById("expression").value+=val;
}
function eva(e)
{
try
{
clearFields(eval(document.getElementById("expression").value))
}
catch(e)
{
clearFields('Error')
}
}
validate = function(evt)
{
// Check if the keys are numbers and arithmetic operator.
// For a cross-browser solution, use the "which" property together with keyCode.
if ([8, 13,35,46,37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 35, 36,96, 97, 98,99,100,101,102,103,104,105,106,107,109,110,111].indexOf(evt.keyCode || evt.which) == -1)
{
evt.returnValue = false;// Stopping non-numeric keystrokes from reaching an edit field.
if(evt.preventDefault){evt.preventDefault();} // For event cancellation. It tells the user agent that if the event goes unhandled, its default action should not be taken as it normally would be.
}
}
function checkKey(event)
{
if(event.keyCode==13) // Check for ENTER key
eva();
else if(event.keyCode==17) // Check for Ctrl key
clearFields("");
else
validate(event);
}
</script>
</head>
<body>
<div align="center">
</br></br></br></br></br>
<input type="text" id="expression" style="height:50px; width:215px;" onkeydown = "checkKey(event)" />
<p>
<input type="button" value=" / " style="height:50px; width:50px; cursor:pointer; font-weight:bold; background-color: #4CAF50; color:white; border: none; " onclick='v("/")'>
<input type="button" value=" C " style="height:50px; width:160px; background-color: #4CAF50; font-weight:bold; color:white; border: none; " onclick='clearFields("")'>
</p>
<p>
<input type="button" value=" 7 " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none; " onclick='v("7")'>
<input type="button" value=" 8 " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("8")'>
<input type="button" value=" 9 " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("9")'>
<input type="button" value=" * " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("*")'>
</p>
<p>
<input type="button" value=" 4 " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("4")'>
<input type="button" value=" 5 " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("5")'>
<input type="button" value=" 6 " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("6")'>
<input type="button" value=" - " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("-")'>
</p>
<p>
<input type="button" value=" 1 " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("1")'>
<input type="button" value=" 2 " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("2")'>
<input type="button" value=" 3 " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("3")'>
<input type="button" value=" + " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("+")'>
</p>
<p>
<input type="button" value=" 0 " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("0")'>
<input type="button" value=" . " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v(".")'>
<input type="button" id= "calc" style="height:50px; width:105px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" value=" = " onclick='eva()'>
</p>
<p align="center">Ctrl to Clear Field</p>
</div>
</body>
</html>
I'm trying to replace these two text nodes with each other. It suppose to be like a correction verification. What its suppose to do is to see if the input is correct after you focus on another input.
This is the html
<body>
<form action="" method="post" name="myform">
<fieldset>
<legend>Lab Group Form</legend>
<label for="first_name">First Name:</label>
<br/>
<input id="first_name" type="text" name="first_name_text" value="" onblur="validatefirst()" />
<br/><br/>
</fieldset>
</form>
<div class="one" id="one"/>
<div class="two" id="two"/>
</body>
function validatefirst() {
if (document.myform.first_name.value.length > 0) {
var one = document.createTextNode("Correct");
var one_container = document.getElementById("one");
} else {
var two = document.createTextNode("Incorrect.");
var two_container = document.getElementById("two");
two_container.appendChild(two);
}
}
this is the css file:
.one {
color:#000;
position:absolute;
top:400px;
}
.two{
color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
position: absolute;
top:400px;
}
So if you can help me out that will be great. Please no jquery. Thank you
I'm not sure quite what you're trying to accomplish with the function-within-a-function. The following does something, not sure if it's what you want or not:
<html>
<head>
<style>
.one {
color:#000;
position:absolute;
top:200px;
}
.two{
color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
position: absolute;
top:200px;
}
</style>
</head>
<body>
<form action="" method="post" name="myform">
<fieldset>
<legend>Lab Group Form</legend>
<label for="first_name">First Name:</label>
<br/>
<input id="first_name" type="text" name="first_name_text" onchange="validatefirst()" />
<br/><br/>
</fieldset>
</form>
<div class="one" id="one"/>
<div class="two" id="two"/>
</body>
<script>
function validatefirst() {
if (document.getElementById("first_name").value.length > 0) {
var one = document.createTextNode("Correct");
var one_container = document.getElementById("one");
one_container.appendChild(one);
} else {
var two = document.createTextNode("Incorrect.");
var two_container = document.getElementById("two");
two_container.appendChild(two);
}
}
</script>
</body>
</html>