I have a form like this:
<form id="form1" method="post" action="">
<input maxlength="75" size="90" type="text" id="textfield2"/>
</form>
How to show an alert box message when i finish typing?
Thanks
edit
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
$(document).ready(function() {
var course_data;
$.get('math.xml', function(data) {
course_data = data;
var that = $('#courses');
$('course', course_data).each(function() {
$('<option>').text($(this).attr('title')).appendTo(that);
});
}, 'xml');
$('#courses').change(function() {
var val = $(this).val();
var that = $('#times').empty();
$('course', course_data).filter(function() {
return val == $(this).attr('title');
})
.find("lesson").each(function() {
$("#lesson").val($(this).text());
});
});
});
</script>
<script type="text/javascript">
function keyPressed(event, input) {
if (event.keyCode == 8) {
return true;
}
var char = event.which ? event.which : event.keyCode;
char = String.fromCharCode(char);
var exerc = ["aaaa aaaa aaaa aaaa","bbbb bbbb bbbb bbbb"];
for (i=0;i<exerc.length;i++){
var option=document.getElementById("courses").selectedIndex;
}
return (exerc[option - 1].charAt(input.value.length) == char);
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<input type="text" maxlength="70" size="90" id="lesson"/>
</form>
<form name="form2" method="post" action="">
<input maxlength="59" size="90" type="text" onkeypress="return keyPressed(event, this);"/>
</form>
<form name="form1">drop1
<select style="width:100px" id='courses'>
<option selected="selected">choose...</option>
</select>
</form>
</body>
</html>
xml:
<courses>
<course title="chap 1">
<lesson>aaaa aaaa aaaa aaaa</lesson>
</course>
<course title="chap 2">
<lesson>bbbb bbbb bbbb bbbb</lesson>
</course>
</courses>
I have two input fields and i use a keypress function to enter only specific chars in the second input. I can enter until the chars from the first field finished. So, when i finished typing i want to appear an alert message like:
alert(ok finish!);
it is possible?
With JQuery you could do this:
$('#textfield2').bind('blur',function() {
alert('I guess i finished typing cause I left the field!?');
});
Related
How to disable/remove only first space on Multiple input field?
In this example how to use multiple input fields. DEMO HERE
$(function() {
$('body').on('keydown', '#test', function(e) {
console.log(this.value);
if (e.which === 32 && e.target.selectionStart === 0) {
return false;
}
});
});
<!doctype html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<label>Name</label>
<input type="text" id="test">
<label>Mobile</label>
<input type="text" id="test1">
<label>Comments</label>
<input type="text" id="test2">
</body>
</html>
I guess you should be using keycode
Check this https://jsfiddle.net/qn09n676//
e.keyCode === 32
I wrote a code when I click on the submit button The text will appear just for less than 1 second how can I make it forever?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form action="#" method="post" onSubmit="return validcheck()">
<input type="text" id="firstname" name="firstname">
<input type="submit">
<div id="error1"></div>
</form>
<script>
function validcheck() {
var checkingg = document.getElementById('firstname').value;
if (checkingg == null || checkingg == "") {
document.getElementById('error1').innerHTML = 'please write something here';
} else {
document.getElementById('name-error').innerHTML = '';
}
}
</script>
</body>
</html>
Just return false from your method:
function validcheck() {
var checkingg = document.getElementById('firstname').value;
if (checkingg == null || checkingg == "") {
document.getElementById('error1').innerHTML = 'please write something here';
} else {
document.getElementById('name-error').innerHTML = '';
}
return false;
}
You are missing return statement
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form action="#" method="post" onSubmit="return validcheck()">
<input type="text" id="firstname" name="firstname">
<input type="submit">
<div id="error1"></div>
</form>
<script>
function validcheck() {
var checkingg = document.getElementById('firstname').value;
if (checkingg == null || checkingg == "") {
document.getElementById('error1').innerHTML = 'please write something here';
} else {
document.getElementById('name-error').innerHTML = '';
}
return false;
}
</script>
</body>
</html>
You can give action as below.
<form action="javascript:void(0)" method="post" onSubmit="return validcheck()">
I am working on forwarding data from the current page to the same next page i.e. whenever the page is loaded again, the code checks if there is any such storage, if it is then it loads the values in text box. I am not able to get it to work Below is the code -
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function values()
{
if(localStorage.getItem(pranav))
{
document.getElementById(FName).innerText= sessionStorage.getItem(pranav);
document.getElementById(OName).innerText= sessionStorage.getItem(k);
}
else
{
sessionStorage.setItem("pranav", "P");
sessionStorage.setItem("k", "P");
return;
}
}
</script>
</head>
<body>
<form name="myform" action="Idea.html" onload="values(this.form)">
<label>Please Enter Your Full Name = </label><input type="text" name="FName" id="FName" />
<label>Please Enter Your Current Organization</label><input type="text" name="OName" id="OName" />
<input type="submit" value="Submit" onclick="values(this.form)" />
</form>
</body>
</html>
Kindly help me as to why this is not working?
You haven't declared the pranav and k variables you used. Also when you are assigning a value to an input field you should use the .value property instead of .innerText.
Also you might consider splitting your code in 2 functions:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function loadValues() {
var data = localStorage.getItem('data');
if(data) {
data = JSON.parse(data);
document.getElementById('FName').value = data.firstName;
document.getElementById('OName').value = data.lastName;
}
}
function saveValues() {
var data = {
firstName: document.getElementById('FName').value,
lastName: document.getElementById('OName').value
};
localStorage.setItem('data', JSON.stringify(data));
}
</script>
</head>
<body onload="loadValues()">
<form name="myform" action="Idea.html" onsubmit="saveValues()">
<label>Please Enter Your Full Name = </label>
<input type="text" name="FName" id="FName" />
<label>Please Enter Your Current Organization</label>
<input type="text" name="OName" id="OName" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
I am trying to validate a simple form with JavaScript but cannot get the script to validate. When the Submit button is pressed there is no validation being run. If one of the boxes is left blank, the error message does not pop up to notify the user. However I am not seeing anything out of place. I am wondering if it isthe submit button is not working? Can anyone lend a hand?
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LASTNAME: Warner Form Validation</title>
<script type="text/javascript">
function btnSubmit_onclick() {
var myForm = document.formContact;
if(myForm.txtAge.value == "" || myForm.txtName.value == "") {
alert.("Please complete all of the fields.");
if(myForm.txtName.vale == ""){
myForm.txtName.focus();
} else {
myForm.txtAge.focus();
} else{
alert("Thank you for completing the form"+myForm.txtName.value);
}
}
function txtAge_onblur() {
var txtAge = document.formContact.txtAge;
if(isNaN(txtAge.value) == true) {
alert("Please Enter a Valid Age");
txtAge.select();
}
function txtName_onchange(); {
window.status = "Hi" + document.form1.txtName.value;
docment.getElementById('greeting').innerHTML = "Hi" + document.frm1.txtName.value;
}
</script>
</head>
<body>
<form action="" id="formContact" method="post" onsubmit="return validate();" name="formContact">
<p>Name:<br />
<input type="text" name="theName"><span class="err" id="nameErr"></span>
</p>
<p>Age:<br />
<input type="text" name="theAge"><span class="err" id="ageErr"></span>
</p>
<p>
<p>How may we contact you?<br>
<input type="radio" name="contact" value="email">Email<br>
<input type="radio" name="contact" value="no contact">No Contact<br>
</p>
<p><input type="button" value="Submit" name="btnSubmit" onclick="btnSubmit_onclick></p>
</form>
<span id="results"></span>
</body>
</html>
Your code had SO many typo's. This works.
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LASTNAME: Warner Form Validation</title>
<script type="text/javascript">
function btnSubmit_onclick() {
var myForm = document.formContact;
if(myForm.txtAge.value == "" || myForm.txtName.value == "") {
alert("Please complete all of the fields.");
if(myForm.txtName.vale == ""){
myForm.txtName.focus();
} else {
myForm.txtAge.focus();
}
} else{
alert("Thank you for completing the form"+myForm.txtName.value);
}
}
function txtAge_onblur() {
var txtAge = document.formContact.txtAge;
if(isNaN(txtAge.value) == true) {
alert("Please Enter a Valid Age");
txtAge.select();
}
function txtName_onchange() {
window.status = "Hi" + document.form1.txtName.value;
docment.getElementById('greeting').innerHTML = "Hi" + document.frm1.txtName.value;
}
}
</script>
</head>
<body>
<form action="" id="formContact" method="post" onsubmit="return validate();" name="formContact">
<p>Name:<br />
<input type="text" name="txtName"><span class="err" id="nameErr"></span>
</p>
<p>Age:<br />
<input type="text" name="txtAge"><span class="err" id="ageErr"></span>
</p>
<p>
<p>How may we contact you?<br>
<input type="radio" name="contact" value="email">Email<br>
<input type="radio" name="contact" value="no contact">No Contact<br>
</p>
<p><input type="button" value="Submit" name="btnSubmit" onclick="btnSubmit_onclick()"></p>
</form>
<span id="results"></span>
</body>
</html>
However be noted that you haven't used txtAge_onBlur or txtName_onChange functions anywhere. Also I suggest to add a numerical check to age field.
onclick="btnSubmit_onclick></p>
to
onclick="btnSubmit_onclick();"></p>
and
function btnSubmit_onclck() {
to
function btnSubmit_onclick() {
You have onsubmit="return validate();" yet I don't see validate() anywhere in your script.
Then in your script you have btnSubmit_onclck(), yet in your HTML you have onclick="btnSubmit_onclick.
So it's missing an i and in the HTML you are missing the closing ".
You also need to check the missing closing } on txtAge_onblur and btnSubmit_onclick
This is works fine when the form does not have any value. But, Once i entered the value on the textbox, it still alert the same messages i.e it is omitting 'You must enter value' for both cases,see at the if else statement. what is the mistake on the below code?
<!doctype html>
<html>
<head>
<title>A Basic Example</title>
</head>
<body>
<p>A Basic Form Example</p>
<form action="#">
<p>Name <em>(Required)</em>: <input id="textbox1" name="textname" type="text" /></p>
<p><input id="submitbutton1" type="submit" /></p>
<script type="text/javascript">
var item = document.getElementById("textbox1").value.length;
var item1 = document.forms[0].textname;
function formValid() {
if (item == 0) {
alert("You must enter value");
}
else {
alert(item1);
}
}
var formEl = document.getElementById("submitbutton1");
formEl.addEventListener("click", formValid());
</script>
</form>
</body>
</html>
You are fetching the length of the value when the page loads instead of when the the function runs.
Move
var item = document.getElementById("textbox1").value.length
inside the function.
Use this syntax in addEventListener formEl.addEventListener("click", formValid,false);
Also replace var item inside the function formValid().
Here is the fiddle
try this
<!doctype html>
<html>
<head>
<title>A Basic Example</title>
</head>
<body>
<p>A Basic Form Example</p>
<form action="#">
<p>Name <em>(Required)</em>: <input id="textbox1" name="textname" type="text" /></p>
<p><input id="submitbutton1" type="submit" /></p>
<script type="text/javascript">
var item1 = document.forms[0].textname;
var formEl = document.getElementById("submitbutton1");
function init() {
formEl.addEventListener("click", formValid());
}
function formValid() {
var item = document.getElementById("textbox1").value.length;
if (item == 0) {
alert("You must enter value");
}
else if {
alert(item1);
}
}
</script>
</form>
</body>
</html>