Skip to main content

JAVA-SCRIPT FORM HANDLING

(22)addition of two number using form using JavaScript :

n1<input type = "number" id = "n1" value=15 />
n2<input type = "number" id = "n2" value=20 />

<p>Sum?</p>

<button onclick="sum()">Try it</button>
<p id="demo2">Result?? </p>


<script type="text/javascript">
 function sum()
{
    var fn, ln;
    fn = parseInt(document.getElementById("n1").value);
    ln = parseInt(document.getElementById("n2").value);
    result =  (fn+ln);
    document.getElementById("demo2").innerHTML = result;
}
</script>


Another example for addition  using name  of  field  using  parseInt() function :

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script language="Javascript">
function showResult()
{
a = document.Order.Mortgage.value;
b = document.Order.Debt.value;
c = document.Order.Income.value;
d = document.Order.Years.value;
Total = document.Order.Total.value = parseInt(a) + parseInt(b) + parseInt(c)+parseInt(d);
}
</script>
</head>
<body>
<pre>
<form name="Order" action="" method="POST" enctype="text/plain"><br>
<font color=000099 size="4">Mortgage</font>   <input type=text name="Mortgage"   size="20"><br>
<font color=000099 size="4">Debt</font>   <input type=text name="Debt"   size="20"><br>
<font color=000099 size="4">Income</font>     <input type=text name="Income" size="20"><br>
<font color=000099 size="4">Years</font>      <input type=text name="Years"   size="20"><br>
<font color=000099 size="4">Total</font>      <big>$</big><INPUT maxLength="8" size="7" name="Total"><br>
<INPUT name="Submit"  type="button" class="style2" onclick="javascript:showResult();" value="Submit">
</form>
</pre>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------
Same  example for addition  using name  of  field  using  parseFloat() function :

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script language="Javascript">
function showResult()
{
a = document.Order.Mortgage.value;
b = document.Order.Debt.value;
c = document.Order.Income.value;
d = document.Order.Years.value;
Total = document.Order.Total.value = parseFloat(a) + parseFloat(b) + parseFloat(c)+parseFloat(d);
}
</script>
</head>
<body>
<pre>
<form name="Order" action="" method="POST" enctype="text/plain"><br>
<font color=000099 size="4">Mortgage</font> <input type=text name="Mortgage"   size="20"><br>
<font color=000099 size="4">Debt</font><input type=text name="Debt"   size="20"><br>
<font color=000099 size="4">Income</font> <input type=text name="Income" size="20"><br>
<font color=000099 size="4">Years</font><input type=text name="Years"   size="20"><br>
<font color=000099 size="4">Total</font><big>$</big><INPUT maxLength="8" size="7" name="Total"><br>
<INPUT name="Submit"  type="button" class="style2" onclick="javascript:showResult();" value="Submit">
</form>
</pre>
</body>
</html>

--------------------------------------------------------------------------------------------------------------------------
another exmaple for simple calculator using else-if:

<form name=myform>
n1<input type = "number"  name= "n1" value=15 />
n2<input type = "number"  name= "n2" value=20 />

<select  name=cal>
<option value=1>Add</option>
<option value=2>sub</option>
<option value=3>Division</option>
<option value=4>Multiplication</option>
</select>



<button onclick="sum()">Try it</button>
</form>


<script type="text/javascript">

function sum()
{

var  n1=parseInt(document.myform.n1.value);
var  n2=parseInt(document.myform.n2.value);

if(document.myform.cal.value=="1")
{

alert(parseInt(n1+n2));

}


else if(document.myform.cal.value=="2")

{

 alert(parseInt(n1-n2));


}

else if(document.myform.cal.value=="3")

{

 alert(parseInt(n1/n2));

}


else if(document.myform.cal.value=="4")

{

 alert(parseInt(n1*n2));

}

else 

{

alert('no cal');

}

 }


</script>

--------------------------------------------------------------------------------------------------------------------------
another exmaple for simple calculator using switch :
========================================================================
<form name=myform>
n1<input type = "number"  name= "n1" value=15 />
n2<input type = "number"  name= "n2" value=20 />

<select  name=cal>
<option value=1>Add</option>
<option value=2>sub</option>
<option value=3>Division</option>
<option value=4>Multiplication</option>
</select>



<button onclick="sum()">Try it</button>
</form>


<script type="text/javascript">

function sum()
{

var  n1=parseInt(document.myform.n1.value);
var  n2=parseInt(document.myform.n2.value);
   var cal=parseInt(document.myform.cal.value);
   switch(cal)
   {
  
   case  1:

alert(parseInt(n1+n2));
break;
case 2:

alert(parseInt(n1-n2));

break;


case 3:

 alert(parseInt(n1/n2));

break;


case 4:

 alert(parseInt(n1*n2));

break;

default:



alert('no cal');

break;

 }

 }


</script>


========================================================================
-------------------------------------------------------------------------------------------------------------------------
From validation code in javascript :



<html>
<head>
<title>
Simple Client Side Validation
</title>
<script  type="text/javascript">

function  valid()
{

if(myform.name.value=="")
{

alert("enter your name");

return false;

document.myform.name.focus();
}


if(myform.contact.value=="")
{
alert("enter your contact");
return false;
document.myform.contact.focus();
}
if(isNaN(myform.contact.value))
{

alert("enter numeric value in contact");
return false;
document.myform.contact.focus();
}

if(myform.city.value=="")
{

alert("enter your city");

return false;

document.myform.city.focus();

}

if(myform.email.value=="")
{

alert("enter your email");

document.myform.email.focus();

return false;

}



if(myform.address.value=="")
{

alert("enter your address");

document.myform.address.focus();

return false;

}

var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; 
if(!myform.email.value.match(mailformat)) 

alert("You have entered an invalid email address!"); 
document.myform.email.focus(); 
return false; 


return true;
}

</script>

</head>
<body>
<form name="myform"  action="submit.php" method="post"  onsubmit="return(valid());" >
Name <input type="text" name="name"  >
contact<input type="text" name="contact">
city<input type=text   name="city">
email<input type=text name="email">
address<input type=text name="address"">
<input   type=submit     name=submit>
</form>
</body>
</html>
========================================================================
validation for check box:
<html>
<head>
<script LANGUAGE="JavaScript">
function ValidateForm(form){
ErrorText= "";
if ( ( feedback.hindi.checked == false ) && ( feedback.english.checked == false ) ) 
{
alert ( "Please choose your language: hindi or English" ); 
return false;
}
if (ErrorText= "") { form.submit() }
}
</script>
</head>
<body>
<form name="feedback" action="#" method=post>
Your Language: <input type="checkbox" name="hindi" value="Hindi"> HINDI
<input type="checkbox" name="english" value="English"> ENGLISH
<input type="submit" name="SubmitButton" value="Submit" onClick="ValidateForm(this.form)">
<input type="reset" value="Reset">
</form> 
</body>
</html>

==========================================================================
validation  for  radio  button:

<html>
<head>
<script LANGUAGE="JavaScript">
function ValidateForm(form){
ErrorText= "";
if ( ( feedback.gender[0].checked == false ) && ( feedback.gender[1].checked == false ) ) 
{
alert ( "Please choose your language: male  or Female" ); 
return false;
}
if (ErrorText= "") 
{ form.submit() }
}
</script>
</head>
<body>
<form name="feedback" action="#" method=post>
Your Gender: <input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female
<input type="submit" name="SubmitButton" value="Submit" onClick="ValidateForm(this.form)">
<input type="reset" value="Reset">
</form> 
</body>

</html>
====================================================================================================================================================
Validation  of error message  just below input  type:
<html>
<head>
<script>

function check_valid(str)
{
 var name=document.getElementById("username").value;
 if(name=="")
 {
 document.getElementById("lb1").innerHTML="enter your name";

 }

}

</script>
</head>
<form action="#" method="POST" name="form">

student user name:<input type="text" id=username  name="username" onblur="check_valid(this.value)">
<br>
<div id="lb1" style="color:red";></div>

<input id="ok" style="margin-left: 74px;" type="submit" name="submit" value="create account!!">
</form>
</body>
</html>


Comments

Popular posts from this blog

layout code example:-

<!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body>  <section>       <div class="container">         <header>           <h3  class="text-center">Services</h3>           <p class="text-center">Laudem latine pe

Jquery Sliding

jQuery Sliding Methods:-  With jQuery you can create a sliding effect on elements. jQuery has the following slide methods: slideDown() slideUp() slideToggle() (1)slideDown()  example:- <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){   $("#flip").click(function(){     $("#panel").slideDown("slow");   }); }); </script> <style> #panel, #flip {   padding: 5px;   text-align: center;   background-color: #e5eecc;   border: solid 1px #c3c3c3; } #panel {   padding: 50px;   display: none; } </style> </head> <body> <div id="flip">Click to slide down panel</div> <div id="panel">Hello world!</div> </body> </html> (2)sldeUP()  example:- <html> <head> <script src="https://ajax.

Juqery fade

jQuery Fading Methods :-  With jQuery you can fade an element in and out of visibility. jQuery has the following fade methods: fadeIn() fadeOut() fadeToggle() fadeTo() jQuery fadeIn() Method The jQuery fadeIn() method is used to fade in a hidden element. Syntax:- $(selector).fadeIn(speed,callback); <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){   $("button").click(function(){     $("#div1").fadeIn();     $("#div2").fadeIn("slow");     $("#div3").fadeIn(3000);   }); }); </script> </head> <body> <p>Demonstrate fadeIn() with different parameters.</p> <button>Click to fade in boxes</button><br><br> <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><