Add or Remove Input fields Dynamically Using JQuery - HTML

Add or Remove Input fields Dynamically Using JQuery - HTML

add/remove multiple input fields in html forms

if you are looking to add and remove duplicate input fields, here’s another jQuery example below to do the task for you. This jQuery snippet adds duplicate input fields dynamically and stops when it reaches maximum.

Code:

---

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

---

<script>
$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID
    
    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><input type="file" name="mytext[]"/><a href="#" class="remove_field">X</a></div>'); //add input box
        }
    });
    
    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});
</script>

---

<div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
    <div><input type="file" name="mytext[]"></div>

</div>

---

---

Simple Count Down using Java-script - - HTML,CSS

Simple counter in java script 

Time Counter

-------------------------------------------

HTML Code:

<div class="counter">
<h4>Time Counter</h4>

<p id="demo"></p></div>

JavaScript Code:

<script type="text/javascript">
var dely=15;
var i = 0, howManyTimes = 16;
function f() {
if(dely>9){document.getElementById("demo").innerHTML=("00:"+dely--);}
else{document.getElementById("demo").innerHTML=("00:0"+dely--);}
i++;
    if( i < howManyTimes ){
        setTimeout( f, 1000 );
    }else{}
}
f();

</script>

CSS Code:

Pop-up Login Form using Java-Script and CSS.

Simple Pop-up Login Form On Mouse Over using Java-Script CSS and HTML. Programming Seekerz :)

Download Full Code From This Link

---

HTML:
<div class="btn" onmouseover="fun()">

<h1> Take Mouse Over Me And the Pop-Up Appers</h1></div>

<div class="pic" id="pic1">
<input type="button" onclick="yoyo()" value="X" class="cn"/>

<form class="myform" action="abc.html" method="post">
<input type="text" class="items" placeholder="User Name"/>
<input type="Password" class="items" placeholder="Password"/>
<input type="submit" class="btn1" value="LOG-IN"/>
</form>


</div>

---

CSS:

<style>
.cn{color:red;background-color:white;border:2px solid;border-radius:50px;float:right;}

.btn{color: red;font-size: 22px;border:1px solid;text-align:center;}

.pic{width: 25%;height: 27%;display:none;bottom:40%;right:40%;position:fixed;
box-shadow: 3px -3px 59px 42px rgba(46,54,43,0.40);
}

.myform{
  margin: auto;
  padding: 0px;
  height: 100%;
  width: 100%;
  background: hotpink;
  }
.items{
  border: 5px solid;
  border-radius: 10px;
  font-size: 18px;
  width: 80%;
  padding: 10px;
  margin: 10px;
}
.btn1{
  background: skyblue;
  border: 5px solid black;
  border-radius: 20px;
  padding: 10px;
  float:right;
  margin: 2%;
  color: black;
  font-size:14px;
  font-weight: bold;
  }


</style>

---

Ajax-Call : Password verification using ajax

Password verification using JavaScript-Ajax and HTML PHP.
To use this you have to include jQuery or use some jquery CDN and then create two file one for html code and other is for php and add the following code in and run on local host any one like xamp, wamp or some online server

---

Download Code

First for this we need an HTML file: say index.html

 paste following code in it:

---

<div>
<h1>The real password is admin</h1>

<input name="pass" type="password" id="pass"  placeholder="Enter any password">

<input type="button"  value="Check" onclick="check()">

</div>

---

Then the Java-Script code for this including Ajax is:

---

<script type="text/javascript">

function check(){
  var data = 'password='+document.getElementById('pass').value;
   obj={
    type:'post',
    data:data,
    url:'pass.php',
    success:function(msg){ alert(msg);      }
    };
   jQuery.ajax(obj);
 
 }
</script>

---

And the PHP code is. the php file name is pass.php:

---

<?php

extract($_REQUEST);

if($password==="admin"){

  

 echo "password matched";

  

}else{

 echo "password not matched";

  

}

?>

---

Stylish Search bar example using jQuery

Stylish Search bar example using jQuery html and CSS it use jQueary online CDN for including jquery and use simple hide and show functions.

Download Code

Test here:

---

HTML Code:

---

<div class="main">

<img src="logo.png" id="display" />

<div class="search_bar" id="search">

<div class="box"><input type="text" placeholder="Search..." ></div>

<div class="btn"><input type="image" src="logo.png" alt="submit"></div>

</div>

</div>

---

JQuery Code:

---

<script>

$(document).ready(function(){

$("#display").click(function(){

$(this).hide();

$("#search").show();

});

$("#search").click(function(){

$(this).hide();

$("#display").show();

});

});

</script>

---

CSS code:

---

<style>

body{background-color:#eee;}

#display{height: 50px;width: 50px;border: 1px solid blue;border-radius: 10px;box-shadow: 2px 2px 10px skyblue;cursor:pointer;}

#search{padding: 10px;display: none;}

#search .box{float: left;}

#search input{height: 50px;box-shadow: 2px 2px 10px blue;}

#search input[type=image]{height: 42px;background-color: skyblue;border: 4px;border-style: solid;border-color: black;border-left: 0px;}

#search input[type=text]{padding: 12px;border: 4px;border-style: solid;border-color: black;border-right: 0px;}

.main{width:30%;margin:10% auto ;height:10%;box-shadow: 2px 2px 10px skyblue;padding:20px;background-color:#aaa;}

</style>

View Details On Mouse Click Using Java-Script and HTML

If You Click on the element then it will show its description.

---

This is First Option

here
is some 
description

This is Second Option

here
is some 
description

This is Third Option

here
is some
 description

This is Fourth Option

here
is some
 description

This is Fifth Option

here
is some
 description

---

Download Complete Code From Here

---

HTML Code:

<body>

<div class="main">

<p class="option" onclick="foo(this)" id="1">This is First Option<img src="http://www.clipartbest.com/cliparts/dT6/xXE/dT6xXEpT9.png"></p>

<div class="dec" id="a1"><pre>here

is some 

description</pre></div>

</div>

<div class="main">

<p class="option" onclick="foo(this)" id="2">This is Second Option<img src="http://www.clipartbest.com/cliparts/dT6/xXE/dT6xXEpT9.png"></p>

<div class="dec" id="a2"><pre>here

is some 

description</pre></div>

</div>

<div class="main">

<p class="option" onclick="foo(this)" id="3">This is Third Option<img src="http://www.clipartbest.com/cliparts/dT6/xXE/dT6xXEpT9.png"></p>

<div class="dec" id="a3"><pre>here

is some

 description</pre></div>

</div>

<div class="main">

<p class="option" onclick="foo(this)" id="4">This is Fourth Option<img src="http://www.clipartbest.com/cliparts/dT6/xXE/dT6xXEpT9.png"></p>

<div class="dec" id="a4"><pre>here

is some

 description</pre></div>

</div>

<div class="main">

<p class="option" onclick="foo(this)" id="5">This is Fifth Option<img src="http://www.clipartbest.com/cliparts/dT6/xXE/dT6xXEpT9.png"></p>

<div class="dec" id="a5"><pre>here

is some

 description</pre></div>

</div>

<h1 style="text-align:center;text-shadow:10px 10px 10px red;">""Click on Option to View its Discription""<br><span style="color:blue">Develper:Usman Siddique</span></h1>

</body>

---

Java-Script Code:

<script>

function foo(getid){

var x = document.getElementById('a'+(getid.id));

if(x.style.display=="block")

{

x.style.display="none";}

else{x.style.display="block";}

}

</script>

---

CSS Code:

<style>

.main p img{height: 3%;float: left;width: 10%;}

body{background-color:wheat;}

.main{border: 2px solid;width: 20%;margin: auto;background-color:skyblue;box-shadow: 2px 2px 50px hotpink;padding: 10px;}

.option{border: 2px solid wheat;padding:5px;text-align:center;margin: 0px;cursor:pointer}

.dec{background-color: whitesmoke;padding: 5px;display: none; }

</style>

Show Details On Mouse Hover Using CSS HTML

This will show details of an option when the mouse pointer is on that specific option.

---

This is First Option

here
is some 
description

This is Second Option

here
is some 
description

This is Third Option

here
is some
 description

This is Fourth Option

here
is some
 description

This is Fifth Option

here
is some
 description

---

Download The Complete Code From here

The HTML Code is:
<body>
<div class="main">
<p class="option" onclick="foo()">This is First Option</p>
<div class="dec"><pre>here
is some
description</pre></div>
</div>

<div class="main">
<p class="option" onclick="foo()">This is Second Option</p>
<div class="dec"><pre>here
is some
description</pre></div>
</div>

<div class="main">
<p class="option" onclick="foo()">This is Third Option</p>
<div class="dec"><pre>here
is some
 description</pre></div>
</div>

<div class="main">
<p class="option" onclick="foo()">This is Fourth Option</p>
<div class="dec"><pre>here
is some
 description</pre></div>
</div>

<div class="main">
<p class="option" onclick="foo()">This is Fifth Option</p>
<div class="dec"><pre>here
is some
 description</pre></div>
</div>
<h1 style="text-align:center;text-shadow:10px 10px 10px red;">""Take Pointer on Option to View its Discription""<br><span style="color:blue">Develper:Usman Siddique</span></h1>


</body>

---

CSS Code:

<style>

body{background-color:wheat;}

.main{border: 2px solid;width: 20%;margin: auto;background-color:skyblue;box-shadow: 2px 2px 50px hotpink;padding: 10px;}

.option{border: 2px solid wheat;padding:5px;text-align:center;margin: 0px;cursor:pointer}

.dec{background-color: whitesmoke;padding: 5px;display: none; }

.option:hover + .dec{display: block;}

.dec:hover{display: block;}

</style>

---

Simple HTML Compiler using 7 lines code of Java-Script

Create Your own HTML compiler with just 7 lines of java-script Code

````"Download Full Code From Here"````

HTML form validation using Java-Script

<html>
<head>
<title>Form Validation using JavaScript</title>
</head>
<body>

<form name="form1" action="formvalidation.html" onsubmit="return validate()" method="post">
<input type="text" name="username">
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
function validate() {
    var x = document.forms["form1"]["username"].value;
    if (x == null || x == "") {
        alert("Name must be filled out");
        return false;
}
}
</script>
</body>
</html>

Calculator using Java script and HTML /CSS 3

Welcome Calculator by JavaScript






By. Usman Siddique

---

<html>
<head>
<title> Calculator </title>
<style>
form{background-color:green;
text-align:center;
width:300px;
height:409px;margin:0 auto;
border:2px solid yellow;
}
form input{background-color:red;
width:60px;
height:60px;
margin:5px 5px;
font-size:14pt;
border-radius:50px;}
</style>

</head>
<body>

---

<form name="f">
<i>Welcome Calculator by JavaScript</i>
<br/>

<input type="text" name="result"  id="result" style="width:280px;
height:40px;text-indent:10px;"  >
<br/>
<input type="text" name="display"  id="display"style="width:140px;
height:25px;background-color:darkgray;font-size:10pt;text-indent:10px;" >

<input type="button" onClick="Sign()" name="sign" value="+/-" style="margin:0px 1px;width:60px;
height:25px;font-size:10pt" >

<input type="button" onClick="Clear()" value="C"  style="margin:1px 1px;width:60px;
height:25px;font-size:10pt"/>
<br/>

<input type="button" onClick="num1Perform()" name="num1" value="1" >
<input type="button" onClick="num2Perform()" name="num2" value="2" >
<input type="button" onClick="num3Perform()" name="num3" value="3" >
<input type="button" onClick="Addition()" value="+" >
<br/>
<input type="button" onClick="num4Perform()" name="num4" value="4" >
<input type="button" onClick="num5Perform()" name="num5" value="5" >
<input type="button" onClick="num6Perform()" name="num6" value="6" >
<input type="button" onClick="SubStract()" value="-" />
<br/>
<input type="button" onClick="num7Perform()" name="num7" value="7" >
<input type="button" onClick="num8Perform()" name="num8" value="8" >
<input type="button" onClick="num9Perform()" name="num9" value="9" >
<input type="button" onClick="Muliply()" value="*" />
<br/>
<input type="button" onClick="num0Perform()" name="num0" value="0" >
<input type="button" onClick="Decimal()" name="decimal" value="." />
<input type="button" onClick="Equal()" value="=" />
<input type="button" onClick="Divison()" value="/" />
<br/>
By. Usman Siddique

</form>

---

<script type="text/JavaScript">
var firstNum;
    var secondNum;
    var total;
    var plusminus;
    var plusClick;
    var minusClick;
    var multiplyClick;
    var devideClick;
var decimalClick;
 

function Clear() {                                
        // Clear
        document.f.result.value="";
document.f.display.value="";

    }
function num0Perform() {                                
        // Zero
document.f.display.value +=" 0";
        document.f.result.value += document.f.num0.value;
    }
function num1Perform() {                                
        // NO1
document.f.display.value +=" 1";
        document.f.result.value += document.f.num1.value;
    }
function num2Perform() {                                
        // NO2
document.f.display.value +=" 2";
        document.f.result.value += document.f.num2.value;
    }
function num3Perform() {                                
        // NO3
document.f.display.value +=" 3";
        document.f.result.value += document.f.num3.value;
    }
function num4Perform() {                                
        // NO4
document.f.display.value +=" 4";
        document.f.result.value += document.f.num4.value;
    }
function num5Perform() {                                
        // NO5
document.f.display.value +=" 5";
        document.f.result.value += document.f.num5.value;
    }
function num6Perform() {                                
        // NO6
        document.f.display.value +=" 6";
document.f.result.value += document.f.num6.value;
    }
function num7Perform() {                                
        // NO7
document.f.display.value +=" 7";
        document.f.result.value += document.f.num7.value;
    }
function num8Perform() {                                
        // NO8
document.f.display.value +=" 8";
        document.f.result.value += document.f.num8.value;
    }
function num9Perform() {                                
        // NO9
document.f.display.value +=" 9";
        document.f.result.value += document.f.num9.value;
    }
function Sign(){
document.f.display.value="-"+(document.f.result.value);
document.f.result.value="-"+(document.f.result.value);
}
function Addition(){
firstNum = (parseFloat(document.f.result.value));
document.f.display.value=(document.f.result.value)+" +";
document.f.result.value="";
plusClick = 1;
decimalClick=0

}
function SubStract(){
firstNum = (parseFloat(document.f.result.value));
document.f.display.value=(document.f.result.value)+" -";
document.f.result.value="";
minusClick=1;
decimalClick=0
}
function Muliply(){
firstNum = (parseFloat(document.f.result.value));
document.f.display.value=(document.f.result.value)+" *";
document.f.result.value="";
multiplyClick=1;
decimalClick=0
}
function Divison(){
firstNum = (parseFloat(document.f.result.value));
document.f.display.value=(document.f.result.value)+" /";
document.f.result.value="";
devideClick=1;
decimalClick=0
}
function Decimal(){
document.f.display.value=(document.f.result.value)+".";
document.f.result.value=(document.f.result.value+".");
}

function Equal(){
secondNum = (parseFloat(document.f.result.value));
if (plusClick > 0) {
total = firstNum + secondNum;
document.f.result.value=total;
document.f.display.value=firstNum +" + "+secondNum+" = "+total;
firstNum = 0;
secondNum = 0;
plusClick = 0;
}


if(minusClick>0){
total = firstNum - secondNum;
document.f.result.value=total;
document.f.display.value=firstNum +" - "+ secondNum+" = "+total;
firstNum = 0;
secondNum = 0;
minusClick = 0;

}                                    
 if(multiplyClick>0){
total = firstNum * secondNum;
document.f.result.value=total;
document.f.display.value=firstNum +" * "+ secondNum+" = "+total;
firstNum = 0;
secondNum = 0;
multiplyClick = 0;

}

if(devideClick>0){
total = firstNum / secondNum;
document.f.result.value=total;
document.f.display.value=firstNum +" / "+ secondNum+" = "+total;
firstNum = 0;
secondNum = 0;
devideClick = 0;
}
}
</script>

</body>
</html>