You can create contact form using HTML, CSS and JavaScript. Click Here to Live check
Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts
CSS, javascript
<!--DOCTYPE html-->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
.open-button {
background-color: #555;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
opacity: 0.8;
position: fixed;
bottom: 23px;
right: 28px;
width: 280px;
}
.form-popup {
display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #f1f1f1;
z-index: 9;
}
.form-container {
max-width: 300px;
padding: 10px;
background-color: white;
}
.form-container input[type=text], .form-container input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
}
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
background-color: #ddd;
outline: none;
}
.form-container .btn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
margin-bottom:10px;
opacity: 0.8;
}
.form-container .cancel {
background-color: red;
}
.form-container .btn:hover, .open-button:hover {
opacity: 1;
}
</style>
<script>
function openForm() {
document.getElementById("myForm").style.display = "block";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
}
</script>
</head>
<body>
<button class="open-button" onclick="openForm()">Enquery Now</button>
<div class="form-popup" id="myForm">
<form action="#" class="form-container">
<input type="text" placeholder="Enter Email" name="email" required>
<input type="password" placeholder="Enter Password" name="psw" required>
<textarea cols="36" rows="4" placeholder="Enter Message" name="psw" required></textarea>
<button type="submit" class="btn">Submit Here</button>
<button type="button" class="btn cancel" onclick="closeForm()">Close</button>
</form>
</div>
</body>
</html>
January 20, 2019
Bootstrap, javascript
<!--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/3.3.7/css/bootstrap.min.css">
</head>
<body>
<br><br>
<script>
var flag=true;
function fcomment(){
var data="<div class='col-sm-offset-4 col-sm-4'><form action='#'><div class='panel panel-default'><div class='panel-body'><div class='form-group'><input type='email' class='form-control' id='email' placeholder='Enter email' name='email'></div><div class='form-group'><input type='password' class='form-control' id='pwd' placeholder='Enter password' name='pwd'></div><div class='form-group'><textarea class='form-control' rows='5' id='comment'></textarea></div><button type='submit' class='btn btn-success btn btn-block'>POST COMMENT</button></form></div></div></div>";
document.getElementById('fid').innerHTML=data;
if(flag){
document.getElementById("fid").innerHTML=data;
flag=false;
}else{
document.getElementById("fid").innerHTML="";
flag=true;
}
}
</script>
<div class="container">
<div class="col-sm-offset-1 col-sm-12">
<input type="button" onclick="fcomment()" class="btn btn-primary" value="comment Here">
</div>
</div>
<div id="fid"></div>
</body>
</html>
January 01, 2019
javascript
<!--DOCTYPE html-->
<html lang="en">
<head>
<title>Validation Form using Javascript</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.error{
color: red;
font-weight: 600;
}
</style>
<!-- =============== -->
<script>
function validationn(){
if(document.forms["frm"]["email"].value==""){
document.forms["frm"]["email"].focus();
document.getElementById("eml").innerHTML="* Enter your Email";
return false;
}else{
document.getElementById("eml").innerHTML="";
}
/*==========[password]==========*/
if(document.forms["frm"]["pass"].value==""){
document.forms["frm"]["pass"].focus();
document.getElementById("pw").innerHTML="* Enter your Password";
return false;
}else{
document.getElementById("pw").innerHTML="";
}
}
</script>
</head>
<body>
<br>
<div class="container">
<div class="row">
<div class=" col-sm-offset-4 col-sm-4">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading text-center"><strong>Login Form Validation</strong></div>
<div class="panel-body">
<form class="form-horizontal" action="#" name="frm" onsubmit="return validationn()">
<div class="form-group">
<div class="col-sm-12">
<input type="email" class="form-control" placeholder="Enter your Email" name="email">
<span id="eml" class="error"></span>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="password" class="form-control" placeholder="Enter your Password" name="pass">
<span id="pw" class="error"></span>
</div>
</div>
<div class="form-group">
<div class=" col-sm-12">
<button type="submit" class="btn btn-success btn-block">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
December 29, 2018
How to validation using java script
javascript
<!--DOCTYPE html-->
<html>
<head>
<title></title>
<script>
function validatee(){
// 1st Method
if(document.forms['frm']['nm'].value == ""){
alert( "Please provide your name!" );
document.forms['frm']['nm'].focus() ;
return false;
}
// 2nd Method
/* nmm=document.forms['frm']['nm'];
if(nmm.value== ""){
alert( "Please provide your name!" );
nmm.focus();
return false;
} */
if (num=document.forms['frm']['noss'].value==""){
document.getElementById("numl").innerHTML="Fill this field";
return false;
}else{
return true;
}
// Number Validation
/*var num=document.forms['frm']['noss'].value;
//document.getElementById("nameloc").innerHTML=" <img src='checked.gif'/>";
if (isNaN(num)){
document.getElementById("numl").innerHTML="Enter Numeric value only";
return false;
}else{
return true;
} */
}
</script>
</head>
<body>
<div class="fcss">
<form name="frm" onsubmit="return validatee()">
<table border="1">
<tr>
<td><input type="text" name="nm" placeholder="Name"></td>
</tr>
<tr>
<td><input type="text" name="noss" placeholder="Mobile"><span id="numl"></span></td>
</tr>
<tr>
<td><input type="submit"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
December 26, 2018
javascript
<html>
<title>Agyanadda cal</title>
<style>input[type="button"]{width:100%}</style>
<head>
<body>
<form name="cal">
<table border="1" align="center">
<tr>
<td colspan="4">
<input type="text" name="display" id="display" disabled>
</td>
</tr>
<tr>
<td><input type="button" name="one" value="1" onclick="cal.display.value += '1'"></td>
<td><input type="button" name="two" value="2" onclick="cal.display.value += '2'"></td>
<td><input type="button" name="three" value="3" onclick="cal.display.value += '3'"></td>
<td><input type="button" class="o perator" name="plus" value="+" onclick="cal.display.value += '+'"></td>
</tr>
<tr>
<td><input type="button" name="four" value="4" onclick="cal.display.value += '4'"></td>
<td><input type="button" name="five" value="5" onclick="cal.display.value += '5'"></td>
<td><input type="button" name="six" value="6" onclick="cal.display.value += '6'"></td>
<td><input type="button" class="operator" name="minus" value="-" onclick="cal.display.value += '-'"></td>
</tr>
<tr>
<td><input type="button" name="seven" value="7" onclick="cal.display.value += '7'"></td>
<td><input type="button" name="eight" value="8" onclick="cal.display.value += '8'"></td>
<td><input type="button" name="nine" value="9" onclick="cal.display.value += '9'"></td>
<td><input type="button" class="operator" name="times" value="x" onclick="cal.display.value += '*'"></td>
</tr>
<tr>
<td><input type="button" id="clear" name="clear" value="c" onclick="cal.display.value = ''"></td>
<td><input type="button" name="zero" value="0" onclick="cal.display.value += '0'"></td>
<td><input type="button" name="doit" value="=" onclick="cal.display.value = eval(cal.display.value)"></td>
<td><input type="button" class="operator" name="div" value="/" onclick="cal.display.value += '/'"></td>
</tr>
</table>
</form>
</body>
</head>
</html>
December 25, 2018
How to create Calculator by using JavaScript. It is so simple only you must have to know the little bit of DOM( Document Object Modal).
javascript
<!--DOCTYPE html-->
<html>
<head>
<title></title>
<script>
alert("1. Addition "+"\n"+"2.Subtraction");
var n1,n2,res;
var ch=parseInt(prompt("select your choice:"));
// string (parseInt()=>convert into number)
function inp(){
n1=parseInt(prompt("Enter 1st nos:"));
n2=parseInt(prompt("Enter 2nd nos:"));
}
switch(ch){
case 1:
inp(); //calling
res=n1+n2;
alert("ADDITION (N1+N2):"+res);
break;
case 2:
inp(); //calling
res=n1-n2;
alert("SUBTRACTION (N1-N2):"+res);
break;
default:
alert("Invalid");
}
</script>
<body>
</body>
</html>
December 24, 2018
How to create addition, subtraction by using function and switch statement.
javascript, Jquery
<!--DOCTYPE html-->
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
</script>
</head>
<body>
<br><br>
<pre id="copyy">Thanku for copy me </pre>
<button onclick="copyToClipboard('#copyy')">Click to copy ME</button>
<br/><br/><input type="text" placeholder="Paste here for test" />
</body>
</html>
December 15, 2018
javascript
====================================================================
ASCII key code of F5 is: 116.
====================================================================
<body onkeydown="return (event.keyCode != 116)">
<h1>
Click this page to set focus.
</h1>
</body>
====================================================================
<script type = "text/javascript">
window.onload = function () {
document.onkeydown = function (e) {
return (e.which || e.keyCode) != 116;
};
}
</script>
====================================================================
<script type="text/javascript">
$(function () {
$(document).keydown(function (e) {
return (e.which || e.keyCode) != 116;
});
});
</script>
December 08, 2018
javascript
Agyanadda
<!--DOCTYPE html-->
<html>
<head>
<title>Agyanadda</title>
</head>
<body>
<select onchange="javascript:Select(this)">
<option value="home">Home</option>
<option value="text">Contact</option>
</select>
<script type="text/javascript">
function Select(elm)
{
window.location = elm.value+".php";
}
</script>
</body>
</html>
December 04, 2018
javascript
<!--DOCTYPE html-->
<html>
<head>
<title></title>
<script type="text/javascript" src='myjs.js'></script>
</head>
<body>
<form name="myForm" action="" onsubmit="return validateForm()" method="post">
<table align="center" border="1">
<tr>
<td>NAME:</td>
<td><input type="text" name="fname"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="email" name="eml"></td>
</tr>
<tr>
<td>Mobile:</td>
<td><input type="number" name="mob"></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input type="radio" name="gen" value="male">Male
<input type="radio" name="gen" value="female">Female
<input type="radio" name="gen" value="other">Other
</td>
</tr>
<tr>
<td>Course:</td>
<td>
<input type="checkbox" value="BCA" >BCA
<input type="checkbox" value="MCA" >MCA
<input type="checkbox" value="PHD" >PHD
</td>
</tr>
<tr>
<td>Country</td>
<td>
<select name="country">
<option value="india">India</option>
<option value="pakistan">Pakistan</option>
</select>
</td>
</tr>
<tr>
<td>City</td>
<td>
<input type="text" name="city" list="city">
<datalist id="city">
<option value="india">India</option>
<option value="pakistan">Pakistan</option>
</datalist>
</td>
</tr>
<tr>
<td>Address</td>
<td>
<textarea cols="22" rows="4" name="address">
</textarea>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" ></td>
</tr>
</table>
</form>
</body>
</html>
<!--===========[myjs.js file]=================--->
function validateForm(){
var nm = document.forms["myForm"]["fname"].value;
var eml = document.forms["myForm"]["eml"].value;
var mob = document.forms["myForm"]["mob"].value;
var gen = document.forms["myForm"]["gen"].value;
var course = document.forms["myForm"]["chk"].value;
var country = document.forms["myForm"]["country"].value;
var city = document.forms["myForm"]["city"].value;
var addr = document.forms["myForm"]["address"].value;
/*-------[myultiple checkbox]----------------*/
var checkBoxes = document.getElementsByTagName('input');
// alert(checkBoxes.length);
var param = "Values of Checkboxes:"+"\n";
for (var i=0;i< checkBoxes.length;i++) {
if (checkBoxes[i].checked == true) {
param += checkBoxes[i].value + "\n";
}
}
alert(param);
}
Output
October 04, 2018
Output
javascript
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Play video Example</title>
</head>
<body>
<div style="margin:auto;width: 30%;text-align: center;">
<button type="button" onclick="playpause()">Play/Pause</button>
<button type="button" onclick="big()">Big</button>
<button type="button" onclick="small()">Small</button>
<button type="button" onclick="normal()">Normal</button><br>
<video width="400" id="myvideo">
<source src="video.mp4" type="video/mp4">
</video>
</div>
<Script>
var mv=document.getElementById("myvideo");
function playpause(){
if(mv.paused)
mv.play();
else{
mv.pause();
}
}
function big(){
mv.width=500;
mv.hight=500;
}
function small(){
mv.width=200;
mv.hight=200;
}
function normal(){
mv.width=400;
mv.hight=400;
}
</Script>
</body>
</html>
September 18, 2018
<html>
<head>
<title>JavaScript Play video Example</title>
</head>
<body>
<div style="margin:auto;width: 30%;text-align: center;">
<button type="button" onclick="playpause()">Play/Pause</button>
<button type="button" onclick="big()">Big</button>
<button type="button" onclick="small()">Small</button>
<button type="button" onclick="normal()">Normal</button><br>
<video width="400" id="myvideo">
<source src="video.mp4" type="video/mp4">
</video>
</div>
<Script>
var mv=document.getElementById("myvideo");
function playpause(){
if(mv.paused)
mv.play();
else{
mv.pause();
}
}
function big(){
mv.width=500;
mv.hight=500;
}
function small(){
mv.width=200;
mv.hight=200;
}
function normal(){
mv.width=400;
mv.hight=400;
}
</Script>
</body>
</html>
Subscribe to:
Posts (Atom)
