Hello again everyone
i am working on this
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Form</title>
<script type="text/javascript">
</script>
</head>
<body>
<h2>**Form**</h2>
<form name=form method="post" action="javascript" subject=RSVP" enctype="text/plain" >
<input type=text name="first" size="20"> First Name<BR>
<input type=text name="last" size="20"> Last Name<BR>
<input type="text" name="email" size="20"> E-Mail<BR><BR>
<input type="submit" value="Submit">
<input type="reset" value="Clear Form"><br>
</form>
</body>
</html>
I am getting really confused here.. I need to have a onsubmit form handler and a create validation script. Ok now if I am right the validation script is the the function that needs to be placed right? sorry i know some of you guys might think this is easy but I am still learning. Now I have examples in my book of it but they only due one at a time. Is there a way you can do a onsubmit of all or does it have to be one at a time? thanks
ok I have this one i am working on..
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Form</title>
<script type="text/javascript">
<!--
function validate_form()
{
valid = true;
if ( document.contact_form.contact_first.value == "" )
{
alert ( "Please fill in the 'Your Name' box." );
valid = false;
}
return valid;
}
//-->
</script>
</head>
<body>
<h2>**Form**</h2>
<form name="contact_form" method="post" action="javascript" onSubmit="return validate_form();">
<input type=text name="contact_first" size="20"> First Name<BR>
<input type=text name="contact_last" size="20"> Last Name<BR>
<input type="text" name="contact_email" size="20"> E-Mail<BR><BR>
<input type="submit" value="Submit">
<input type="reset" value="Clear Form"><br>
</form>
</body>
</html>
now Can i just copy the function for the other two or how do i do the one for the email?
I've added an example here of how to do it:
http://jsfiddle.net/tomgrohl/JMkAP/
I added an onsubmit handler to the form:
<form method="post" action="javascript" enctype="text/plain" onsubmit="return valForm(this);">
And added this at the top of the page, a simple validation function:
<script type="text/javascript">
function valForm( form ){
var firstVal, lastVal, emailVal, error = '';
firstVal= form.first.value;
lastVal= form.last.value;
emailVal= form.email.value;
//OR
//firstVal= document.getElementById('first').value;
//lastVal= document.getElementById('last').value;
//emailVal= document.getElementById('email').value;
if( firstVal.length == 0){
error += 'First name is required\n';
}
if( lastVal.length == 0){
error += 'Last name is required\n';
}
if( emailVal.length == 0){
error += 'Email is required\n';
}
if( error ){
alert( error );
return false;
}
return true;
}
</script>
OnSubmit is invoked once for the form.
You can validate all the form fields in one onSubmit function, during one call to that function.
function myOnSubmitHandler(theForm) {
if (theForm.data1.value == "") {
alert("This field is empty.");
return false; // suppress form submission
} else {
return true; // A-OK, form will be submitted
}
}
in HTML:
<form method="POST" ACTION="SomethingOnServer.php"
onSubmit="return myOnSubmitHandler(this);">
I need to have a onsubmit form handler
You said it; <form onsubmit="return myValidate(this);" .... >
myValidate is your validation function that returns true|false indicating whether or not you want the form to be submitted to its handler script (which your also missing).
might I suggest you use jQuery and jQuery validate to validate your form no need to re-invent the wheel
be sure to check out validator's demo
Related
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<style>
#myloc,#mypass{
color: red;
}
</style>
<script>
function validateform(){
var username=document.login.username.value;
var password=document.login.password.value;
if (username==null || username==""){
var data="username should not be blank.";
document.getElementById("myloc").innerHTML=data;
return false;
}else if(password.length<6){
var p="Password must be at least 6 characters long.";
document.getElementById("mypass").innerHTML=p;
return false;
}
}
</script>
<body>
<form action="/loginusingservlet/LoginSES" onsubmit="return validateform()" method="post" name="login">
<table>
<tr>
<td>username</td><td> <input type="text" name="username"></td></tr>
<tr><td></td><td><div id="myloc"></div></td>
</tr><tr><td>password</td><td> <input type="text" name="password"></td></tr>
<tr><td></td><td><div id="mypass"></div></td></tr>
<tr><td></td><td><input type="submit" value="submit"></td></tr>
</table>
</form>
</body>
</html>
this program works great...when i click submit buttons it displays messages like "username should not be blank " or "password atleast 6".after getting message..if i click on a textbox i want the message disappear untill i click "submit" button.
Here you go. New function in script (it checks argument and removes text from specific element:
function removeWarning(type)
{
(type == 1) ? document.getElementById('myloc').innerHTML = "" : document.getElementById('mypass').innerHTML = "";
}
And add onClick event in inputs.
<input type="text" name="username" onClick="removeWarning(1)">
<input type="text" name="password" onClick="removeWarning(2)">
To me it is working but it was a quick solution, it is possible to improve a little.
I want to create a simple form, just like at the supermarket system, when checkout at the counter, they just scan the barcode on the item, and the quantity of the item is added automatically.
The problem is, i dont know which event(onkeyup,onkeypress, etc..) to use on the textfield.
This is my simple code.
<!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>
$(document).ready(function() {
$("#acc_no").on('input', function() {
var a = document.getElementById("acc_no").value;
var b = document.getElementById("qty_dead").value;
if(b == '')
{
qty = 0;
}
else
{
var qty = parseInt(b);
qty +=1
}
document.getElementById("qty_dead").value = qty;
document.form1.acc_no.select();
})
});
</script>
</head>
<body onLoad="document.form1.acc_no.select()">
<form action="deduct_stage_two_submit.php" method="post" name="form1" id="form1">
Accession No:<br />
<input name="acc_no" type="text" id="acc_no" onkeypress="calc()" autocomplete="off"/><br />
Dead Quantity:<br />
<input name="qty_dead" type="text" id="qty_dead" onkeypress="calc()" />
<br />
Date:<br />
<input name="date_dead" type="text" id="date_dead"/><br />
Batch Date Out Stage 1:<br />
<input name="date_out" type="text" id="date_out"/><br />
<input name="submit" type="submit" value="save">
</form>
</body>
</html>
i am new to the object oriented javascript :)
i have written this code to validate the first name of a registration form, but it is not working
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OOForm</title>
<meta name="author" content="engy" />
<!-- Date: 2015-02-20 -->
<script>
var Form = {
fname:{
minLength : 1,
maxLength : 15,
},
validateLength:function(formEl,type){
if(formEl.value.length>type.maxLength||formEl.value.length<type.minLength){
document.getElementById("firstNameSpan").innerHTML = "<font color='red'>Invalid User Name</font>";
return false;
}
else{
document.getElementById("firstNameSpan").innerHTML = "";
return true;
}
},
};
function checkForm(){
var ourForm = document.getElementById("ourForm");
var inputs = ourForm.getElementsByTagName("input");
if(Form.validateLength(inputs[0],Form.fname)){
document.getElementById("mySubmit").disabled = false;
return true;
}
document.getElementById("mySubmit").disabled = true;
return false;
}
</script>
</head>
<body>
<form id="ourForm">
<label>First Name</label>
<input type="text"/>
<span id="firstNameSpan"> </span>
<br/>
<input type="submit" value="submit" id="mySubmit" onclick="return checkForm()">
</form>
</body>
</html>
i don't know what is the problem with the code, but when i enter the firstname with invalid value and then press submit, it do nothing but clearing the text field
and the "invalid" span do not appear
I think it's because you need to do onsubmit on form element instead of onclick and you need to return false in onsubmit so browser won't try to send your form.
I have the following form:
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Choose</title>
<script type="javascript/text">
function ischecked(){
var check = document.getElementsByTagName( 'input' );
for( var i = 0; i < check.length; i++ ){
if( check[ i ].type == 'radio' && check[ i ].checked ){
return true;
}
}
return false;
}
</script>
</head>
<body>
<form method="post" enctype="application/x-www-form-urlencoded" onsubmit="ischecked();">
<h1>Choose</h1>
<p><input type="radio" name="choose" value="psychology"><font size="5" color="#0033CC">Instant Psychology</font><br>
<br>
<input type="radio" name="choose" value="geography"><font size="5" color="#CC0000">Instant Geography</font><br>
<br>
<input type="radio" name="choose" value="gastronomy"><font size="5" color="#660033">Instant Gastronomy</font><br>
<br>
<input type="submit" name="Submit" value="Go"></p>
</form>
</body><link rel="stylesheet" type="text/css" href="data:text/css,"></html>
I wanted to make sure one of the radio buttons have been checked before submitting the form. However, it does not work, and the form is submitted anyways. What am I doing wrong here?
You need to return the result of your function from the inline event handler.
You have to check against the value returned in your validation function directly in the attribute value. That is, in your HTML form declaration
<form method="post" enctype="application/x-www-form-urlencoded" onsubmit="ischecked();">
you should write:
onsubmit="return ischecked();"
instead of:
onsubmit="ischecked();"
I have a header message that is brought in from another file (message.txt), and I'm making a text box that you can edit. (I will add the part where it makes it permanent later on.)
It is changing to nothing.
(E: "This is the header!" to "")
This is the code..
<script type="text/javascript">
function change(text)
{
//document.forms["f1"].elements["ta"].value="Hi!";
//document.f1.ta.value="Hi!";
document.getElementById("msg").innerHTML='<h2 class="hmsg">'+text+'</h2>';
}
function getText()
{
return document.getElementById("ta").value;
}
function all()
{
change(getText())
}
</script>
<form name="f1">
<input type="text" value="Enter your message here!" id="ta"/>
<input type="button" value=" " onclick='all()'/>
</form>
Perhaps you can clarify what is not working as you expect. I expanded your code into a working example:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Test</title>
</head>
<body>
<script type="text/javascript">
function change(text)
{
document.getElementById("msg").innerHTML='<h2 class="hmsg">'+text+'</h2>';
}
function getText()
{
return document.getElementById("ta").value;
}
function all()
{
change(getText())
}
</script>
<form action="#">
<div id="msg">
</div>
<div>
<input type="text" value="Enter your message here!" id="ta"/>
<input type="button" value=" " onclick='all()'/>
</div>
</form>
</body>
</html>
Changing the content of the <div> with id msg works here.