Form Clear/Submit Javascript - javascript

So I have a HTML form, I need to clear the form inputs when a key is pressed and default content gets deleted as well. If reset is clicked, the form resets to its default "Enter ect" and you have to input something again. Also, if submit is clicked without one of the fields entered, it should display an error saying one of my fields are empty, how would I do that using JS?
I tried using JS to clear the default form but all of them get deleted at once rather than the one that gets clicked on.
HTML:
<!doctype html>
<html lang="en">
<head>
<title> Forms </title>
<style>
span {
padding-left: 10px;
display: block;
float: left;
width: 20%;
}
button { margin-left: 10px; }
body {
width: 80%; margin: auto; font-family: sans-serif;
border: 1px solid black;
}
</style>
<meta charset="utf-8">
<script src="prototype.js"></script>
<script src="formsubmit.js"></script>
</head>
<body>
<h1> Task 2: Keyboard Events and Form Submit </h1>
<p> <span>Name:</span> <input id="input1" value="Enter Name" name="Name"></p>
<p> <span>Id:</span> <input id="input2" value="Enter ID" name="ID"></p>
<p> <span>Email:</span> <input id="input3" value="Enter Email" name="Email"></p>
<p>
<button id="submitButton" type="button"> Submit </button>
<input type="reset" value="Reset">
</p>
<p style="color:red" id="ErrorMessage"> </p>
</form>
</body>
</html>
JS:
window.onload=function(){
document.getElementById('input1').value = "";
document.getElementById('input2').value = "";
document.getElementById('input3').value = "";
}

<!doctype html>
<html lang="en">
<head>
<title> Forms </title>
<script>
//window.onload = Reset();
function reset(){
document.getElementById('input1').value = "";
document.getElementById('input2').value = "";
document.getElementById('input3').value = "";
document.getElementById('ErrorMessage').innerHTML = "";
}
function submit(){
var inp1 = document.getElementById('input1').value;
var inp2 = document.getElementById('input2').value;
var inp3 = document.getElementById('input3').value;
if(inp1 == "" || inp2 == "" || inp3 == "")
{
document.getElementById('ErrorMessage').innerHTML = "Please enter all fields";
}
else{
//do your code here
document.getElementById('ErrorMessage').innerHTML = "";
}
}
</script>
<style>
span {
padding-left: 10px;
display: block;
float: left;
width: 20%;
}
button { margin-left: 10px; }
body {
width: 80%; margin: auto; font-family: sans-serif;
border: 1px solid black;
}
</style>
<meta charset="utf-8">
<script src="prototype.js"></script>
<script src="formsubmit.js"></script>
</head>
<body>
<h1> Task 2: Keyboard Events and Form Submit </h1>
<p> <span>Name:</span> <input id="input1" value="" placeholder="Enter Name" name="Name"></p>
<p> <span>Id:</span> <input id="input2" value=""
placeholder="Enter ID" name="ID"></p>
<p> <span>Email:</span> <input id="input3" value="" placeholder="Enter Email" name="Email"></p>
<p>
<button id="submitButton" type="button" onclick="submit()"> Submit </button>
<button id="resetButton" type="button" onclick="reset()"> Reset </button>
</p>
<p style="color:red" id="ErrorMessage"> </p>
</body>
</html>

Related

Why output element is not displayed?

i am writing a simple app that displays how many characters
the user can add inside a text area without exceeding an upper limit.
The problem is that the output tag does not display result.
<!doctype html>
<html lang="el">
<head>
<title>Count Characters</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
label{
font-size: 44.5px;
position: relative;
left: 5%;
font-family: "Times New Roman", Times, serif;
}
</style>
</head>
<body>
<form name="myForm">
<label for id="mytext"> CountLetters </label> <br>
<textarea id="mytext" name="aboutMe" rows="4" cols="50" maxlength="500" placeholder="write here yout text"></textarea>
<br>
<output id="charsleft"></output>
<br>
<br>
</form>
<script>
const textinput = document.querySelector("#mytext");
textinput.addEventListener("input",(e)=>{
charsleft.value=`You can Add ${textinput.maxLength-chars.value.length} characters`
});
</script>
</body>
</html>
Please note that this is invalid HTML markup:
<label for id="mytext">
You need to remove the id attribute, because the for attribute references the id of the labelable element that the <label> is associated to.
Elements that can be associated with a <label> element include <button>, <input> (except for type="hidden"), <meter>, <output>, <progress>, <select> and <textarea>.
What you had was essentially an empty for attribute and a duplicate element id. Every id attribute on a webpage should be unique; there can be no duplicates. Your querySelector call was grabbing your <label> instead of your <textarea>.
Corrective measures
Now, you can simplify this.
Use the event parameter's target property to access the event element
Do not display the message, if the input is cleared
document.querySelector('#mytext')
.addEventListener('input', ({ target: { maxLength, value: { length } } }) => {
charsleft.value = length > 0
? `You can add ${maxLength - length} characters`
: '';
});
label {
font-size: 44.5px;
position: relative;
left: 5%;
font-family: "Times New Roman", Times, serif;
}
<form name="myForm">
<label for="mytext">Count Letters</label>
<br>
<textarea id="mytext" name="aboutMe"
rows="4" cols="50" maxlength="500"
placeholder="write here yout text"></textarea>
<br>
<output id="charsleft"></output>
<br>
<button type="reset">Reset</button>
</form>
Does changing the for attribute as I assume it was a typo to use for id, and chars to mytext fix your problem? Though it is better to explicitly define the variables used.
const textinput = document.querySelector("#mytext");
textinput.addEventListener("input", (e) => {
charsleft.value = `You can Add ${mytext.maxLength-mytext.value.length} characters`
});
label {
font-size: 44.5px;
position: relative;
left: 5%;
font-family: "Times New Roman", Times, serif;
}
<form name="myForm">
<label for="mytext"> CountLetters </label> <br>
<textarea id="mytext" name="aboutMe" rows="4" cols="50" maxlength="500" placeholder="write here yout text"></textarea>
<br>
<output id="charsleft"></output>
<br>
<br>
</form>
This code work perfectly
<!doctype html>
<html lang="el">
<head>
<title>Count Characters</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
label {
font-size: 44.5px;
position: relative;
left: 5%;
font-family: "Times New Roman", Times, serif;
}
</style>
</head>
<body>
<form name="myForm">
<label for="mytext"> CountLetters </label> <br> <!-- for id="mytext" => for="mytext" -->
<textarea id="mytext" name="aboutMe" rows="4" cols="50" maxlength="500" placeholder="write here yout text"></textarea>
<br>
<output id="charsleft"></output>
<br>
<br>
</form>
<script>
const textinput = document.querySelector("#mytext");
const charsleft = document.querySelector("#charsleft");
textinput.addEventListener("input", (e) => {
const maxLength = Number(e.target.getAttribute('maxlength'));
const value = e.target.value;
charsleft.innerHTML = `You can Add ${maxLength-value.length} characters`
});
</script>
</body>
</html>

How to add error Handling to check if the inputs are numbers in a separate function

I am looking to have the inputs only numbers and if its anything else then it will alert that you typed in a letter and it has to be in a different function. Also, it has to be in vanilla javascript and it is for a project and has to have 3 running functions that's why it has to be in a separate function.Thanks!
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<meta charset="utf-8">
<title>Tip Calc.</title>
<style>
html,body{
width:100%;
height:100%;
}
body{
margin:0px;
overflow-x:hidden;
background-color: #f9f8f4 !important
}
p{
font-size: 18px !important;
font-family: 'Raleway', sans-serif;
}
h1,h2,h3{
font-family: 'Raleway', sans-serif;
}
</style>
</head>
<body>
<div class="container">
<br>
<h1 class="text-center">Tip Calculator</h1>
<br><br>
<div class="row">
<div class="col-lg-6">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Total</label>
<input type="text" class="form-control" id="total" aria-describedby="emailHelp" placeholder="Enter Total Price">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Tip Percentage %</label>
<input type="text" class="form-control" id="percent" placeholder="Tip Percentage">
</div>
<button type="submit" class="btn btn-primary" id="btn">Submit</button>
</form>
</div>
<div class="col-lg-6">
<h2>Total Price:</h2><h3 id="totalprice"></h3>
</div>
</div>
</div>
<script>
window.addEventListener("DOMContentLoaded",init,false);
function init(){
document.getElementById("btn").addEventListener("click", getprice, false);
}//end init function
function getprice(e) {
e.preventDefault();
math();
// var totalpriceout = document.getElementById("totalprice").value = totalValue.toFixed(2);
}
function math(){
var numVal1 = Number(document.getElementById("total").value);
var numVal2 = Number(document.getElementById("percent").value) / 100;
var totalValue = numVal1 + (numVal1 * numVal2)
document.getElementById("totalprice").innerHTML = "$" + totalValue.toFixed(2);
}
</script>
</body>
</html>
The baseline of what you're looking for is parseFloat, i.e.
var foo = "abcdef"
var bar = "123456"
foo == parseFloat(foo)
->false
bar == parseFloat(bar)
->true
since this appears to be homework help I don't want to give too much away past that.
As stated here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat, parseFloat will return a floating point number parsed from the given value. If the value cannot be converted to a number, NaN is returned.
consider using Number.isNaN() in conjunction.
perhaps:
if (Number.isNaN(parseFloat(foo))) { //error handler } else { //regular action} –

i cant pass the variable in alert

on the button click of calculate ; i want to calculate all the cost.
i'm trying btn the alert is not working on the click.
i'm trying without the variable it is working.
but when i calculate all the values and pass it in the alert function .
it just doesn't display anything.
i have also used intParse() method to typecast..
Help Needed.
Much appreciated
function milkHandler() {
var tempMilk =document.orderForm.milk.value;
var milkTotal = tempMilk * 3.19;
console.log(milkTotal);
}
function eggHandler() {
var tempEgg =document.orderForm.eggs.value;
var eggTotal = tempEgg * 3.55;
console.log(eggTotal);
}
function breadHandler() {
var tempBread = document.orderForm.bread.value;
var breadTotal = tempBread * 3.49;
console.log(breadTotal);
}
function juiceHandler() {
var tempJuice =document.orderForm.juice.value;
var juiceTotal = tempJuice * 4.49;
console.log(juiceTotal);
}
function honeyHandler() {
var tempHoney = document.orderForm.honey.value;
var honeyTotal = tempHoney * 6.59;
console.log(honeyTotal);
}
function finish() {
var mainTotal = milkTotal+eggTotal+breadTotal+juiceTotal+honeyTotal;
alert(milkTotal);
}
<!DOCTYPE HTML>
<html>
<head>
<title>Shopping List</title>
<link href="css-pass/style.css" rel="stylesheet" type="text/css" media="all"/>
<!-- Custom Theme files -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Reset Password Form Responsive, Login form web template, Sign up Web Templates, Flat Web Templates, Login signup Responsive web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<!--google fonts-->
<!-- <link href='//fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'> -->
</head>
<style type="text/css">
.main-box
{
border: 0px solid;
height: 50px;
width: 100%;
}
.box-1
{
border: 0px solid;
height: 50px;
width: 20%;
float: left;
}
.box-2
{
border: 0px solid;
height: 50px;
width: 69%;
float: left;
}
.text
{
font-size: 20px;
color: #0086E7;
margin-top: 10px;
}
</style>
<body>
<!--element start here-->
<div class="elelment">
<h2>Grocery Order Form</h2>
<div class="element-main">
<h1>Type in the Quantities of each item you would like to purchase in the text box below</h1><br><br>
<form action="" method="post" name="orderForm" onsubmit="finish()">
<div class="main-box">
<div class="box-1">
<input type="number" name="milk" onChange = "milkHandler()" id="milk">
</div>
<div class="box-2">
<div class="text">Low Fat Milk [$3.19/Gallon]</div><br>
</div>
<div class="box-1">
<input type="number" name="eggs" onChange = "eggHandler()">
</div>
<div class="box-2">
<div class="text">Cage Free Organic Eggs [$3.55/Dozen]</div>
</div>
<div class="box-1">
<input type="number" name="bread" onChange = "breadHandler()">
</div>
<div class="box-2">
<div class="text">Whole White Bread [$3.49/Loaf]</div>
</div>
<div class="box-1">
<input type="number" name="juice" onChange = "juiceHandler()">
</div>
<div class="box-2">
<div class="text">Fresh Grape Juice [$4.49/Half Gallon]</div>
</div>
<div class="box-1">
<input type="number" name="honey" onChange = "honeyHandler()">
</div>
<div class="box-2">
<div class="text">Home Grown Honey [$6.59/Pint]</div>
</div>
</div>
<input type="submit" name="calculate" value="Calcuate" >
<input type="reset" name="calculate" value="Reset">
</form>
</div>
</div>
<div class="copy-right">
</div>
<!--element end here-->
</body>
<script src="script.js"></script>
</html>
You cannot use variables in one function and reuse them in another. You could use return. But a simpler way to do this is to put everything into one function.
function cal() {
var milk = document.getElementById('milk').value;
var butter = document.getElementById('butter').value;
var cheese = document.getElementById('cheese').value;
document.getElementById('result').innerHTML = milk*5 + butter*4 + cheese*3;
}
function res() {
document.getElementById('milk').value = 0;
document.getElementById('butter').value = 0;
document.getElementById('cheese').value = 0;
document.getElementById('result').innerHTML = "Value has been reset";
}
Milk: $5 <input type="number" id="milk" onchange="cal()" oninput="cal()"><br>
Butter: $4 <input type="number" id="butter" onchange="cal()" oninput="cal()"><br>
Cheese: $3 <input type="number" id="cheese" onchange="cal()" oninput="cal()"><br>
<button onclick="res()">Reset</button><br>
Total: <div id="result"></div>
The problem is all your variables are defined inside the functions causing them to cease existing when function ends.
You need to define these variables outside the functions.
var milkTotal = 0;
var eggTotal = 0;
var breadTotal = 0;
var juiceTotal = 0;
var honeyTotal = 0;
function milkHandler() {
var tempMilk =document.orderForm.milk.value;
milkTotal = tempMilk * 3.19;
console.log(milkTotal);
}
function eggHandler() {
var tempEgg =document.orderForm.eggs.value;
eggTotal = tempEgg * 3.55;
console.log(eggTotal);
}
function breadHandler() {
var tempBread = document.orderForm.bread.value;
breadTotal = tempBread * 3.49;
console.log(breadTotal);
}
function juiceHandler() {
var tempJuice =document.orderForm.juice.value;
juiceTotal = tempJuice * 4.49;
console.log(juiceTotal);
}
function honeyHandler() {
var tempHoney = document.orderForm.honey.value;
honeyTotal = tempHoney * 6.59;
console.log(honeyTotal);
}
function finish() {
var mainTotal = milkTotal+eggTotal+breadTotal+juiceTotal+honeyTotal;
alert(mainTotal);
}
<!DOCTYPE HTML>
<html>
<head>
<title>Shopping List</title>
<link href="css-pass/style.css" rel="stylesheet" type="text/css" media="all"/>
<!-- Custom Theme files -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Reset Password Form Responsive, Login form web template, Sign up Web Templates, Flat Web Templates, Login signup Responsive web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<!--google fonts-->
<!-- <link href='//fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'> -->
</head>
<style type="text/css">
.main-box
{
border: 0px solid;
height: 50px;
width: 100%;
}
.box-1
{
border: 0px solid;
height: 50px;
width: 20%;
float: left;
}
.box-2
{
border: 0px solid;
height: 50px;
width: 69%;
float: left;
}
.text
{
font-size: 20px;
color: #0086E7;
margin-top: 10px;
}
</style>
<body>
<!--element start here-->
<div class="elelment">
<h2>Grocery Order Form</h2>
<div class="element-main">
<h1>Type in the Quantities of each item you would like to purchase in the text box below</h1><br><br>
<form action="" method="post" name="orderForm" onsubmit="finish()">
<div class="main-box">
<div class="box-1">
<input type="number" name="milk" onChange = "milkHandler()" id="milk">
</div>
<div class="box-2">
<div class="text">Low Fat Milk [$3.19/Gallon]</div><br>
</div>
<div class="box-1">
<input type="number" name="eggs" onChange = "eggHandler()">
</div>
<div class="box-2">
<div class="text">Cage Free Organic Eggs [$3.55/Dozen]</div>
</div>
<div class="box-1">
<input type="number" name="bread" onChange = "breadHandler()">
</div>
<div class="box-2">
<div class="text">Whole White Bread [$3.49/Loaf]</div>
</div>
<div class="box-1">
<input type="number" name="juice" onChange = "juiceHandler()">
</div>
<div class="box-2">
<div class="text">Fresh Grape Juice [$4.49/Half Gallon]</div>
</div>
<div class="box-1">
<input type="number" name="honey" onChange = "honeyHandler()">
</div>
<div class="box-2">
<div class="text">Home Grown Honey [$6.59/Pint]</div>
</div>
</div>
<input type="submit" name="calculate" value="Calcuate" >
<input type="reset" name="calculate" value="Reset">
</form>
</div>
</div>
<div class="copy-right">
</div>
<!--element end here-->
</body>
<script src="script.js"></script>
</html>

How do I close the input if submit is clicked

So I've got a submit button with a class of search, when clicked and the value of the input with a class of searchBar is empty then searchBar display:block and doesn't submit the form. However i want to be able to close searchBar if the value is still empty but the submit (search) is clicked again.
$('#form').submit(function() {
if ($.trim($(".searchBar").val()) === "") {
$('.searchBar').css('display', 'block');
return false;
} else {
return true;
}
});
HTML:
<form id="form" action="">
<input value="" type="text" placeholder="Product name or ID" name="search" class="searchBar" />
<input type="submit" readonly="readonly" class="search" />
</form>
CSS:
#form .searchBar {
display: none;
}
If my understanding of question is correct, You can toggle the display of the searchbox to achieve what you need
$('.searchBar').css('display', 'block'); // instead of this
$('.searchBar').toggle(); // put this
Based on your code i have done something like this
$('#form').submit(function() {
if ($.trim($(".searchBar").val()) === "") {
$('.searchBar').show();
return false;
} else {
return true;
}
});
#form #search {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="form" action="" method="post">
<input value="" type="text" placeholder="Product name or ID" name="search" id="search" value="testValue" class="searchBar" />
<input type="submit" readonly="readonly" class="search" />
</form>
You can check this example if you like
<!DOCTYPE html>
<html lang="en">
<head>
<title>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/1.12.4/jquery.min.js"></script>
<style>
#form #search {
display: none;
}
</style>
</head>
<body>
<form id="form" action="" method="post">
<input value="" type="text" placeholder="Product name or ID" name="search" id="search" value="testValue" class="searchBar" />
<input type="submit" readonly="readonly" class="search" />
</form>
<script>
$('#form').submit(function() {
if ($.trim($(".searchBar").val()) === "") {
$('.searchBar').show();
return false;
} else {
return true;
}
});
</script>
</body>
</html>
If I've understand right you can try this piece of code:
var countClick=0;
$('#form').submit(function() {
countClick++;
if ($.trim($(".searchBar").val()) === "")
{
if(countClick==1)
{
$('.searchBar').css('display', 'block');
return false;
}
else
{
$('.searchBar').css('display', 'none');
return false;
}
}
else
{
return true;
}
});

Autocomplete don't work when it get loaded via javascript

I have a upload-file-form in home.php. When a file is uploaded successfully the home.php loads the upload.php where I have a form there the user can write the information about the mp3 file, info like artist name and things like that. I want to implement the Autocomplete script by jQuery. But the autocomplete don't work when it get loaded through javascript code but it work when I visit the page upload.php. What can be the problem?
Home.php
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-6">
<script src="src/script.js" type="text/javascript" charset="iso-8859-6"></script>
</head>
<body style="margin-top:-60px;">
<form id="upload_form" enctype="multipart/form-data" method="post" action="upload.php">
<div>
<input class="ufile" type="file" name="ufile" id="ufile" accept="audio/*" onchange="loadFile(this)" />
<input type="button" class="button" id="upload_button" value="ارفع ملف صوتي" onclick="inputCheck()" />
</div>
</form>
<div style="padding:0px 10px 0px 10px;">
<div id="upload_response"></div>
</div>
</body>
</html>
Upload.php
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-6">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function () {
var availableTags = ["html", "php"];
$("#artistInput").autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<form name="saveForm" action="upload.php" method="post" onSubmit="return(infoCheck(this))">
<input class="uploadinput" style="width:430px;" name="artist" id="artistInput">
<input type="submit" class="button" style="color:white;margin-left:5px;width:160px;background:url(images/red_gradient.jpg)" value="حفظ" name="saveInfo" />
<input type="reset" class="button" style="color:black;width:168px;background:url(images/yellow_gradient.jpg)" value="إعادة تعيين">
</form>
</div>
</body>
</html>
Script.js
function uploadFinish(e) { // upload successfully finished
var oUploadResponse = document.getElementById('upload_response');
oUploadResponse.innerHTML = e.target.responseText;
oUploadResponse.style.display = 'block';
$("#upload").animate({
height: '765px'
}, 350);
$('#errormessage').slideUp('fast');
}
You're executing the script before the DOM element is ready.
You can do several different things to solve it, for example:
Load your script at the bottom of the page
Move your script inside document ready event, so the DOM element is available
$(document).ready(function() { -your script here- });
you can use ajax to use auto complete type plug-in..
<style>
label._tags {
padding:5px 10px;
margin:0px;
border:solid thin #ccc;
border-radius:3px;
display: inline-block;
}
label._tags span {
padding:2px 10px;
margin: 0px 10px;
color:#FFF;
border-radius:700px;
font-family:"calibri",verdana,serif;
background-color:teal;
}
</style>
<script type="text/javascript">
var request;
var tag=new Array();
function getXMLObject(){
if(window.XMLHttpRequest){
return(new XMLHttpRequest);
}else if(window.ActiveXObject){
return(new ActiveXObject("Microsoft.XMLHttp"));
}else{
return (null);
}
}
function getCategory(){
var address="Ajax_testing";
request=getXMLObject();
var data=document.getElementById("multitag").value;
var nwadd=address+"?text="+data;
request.onreadystatechange=showResultsubject;
request.open("GET",nwadd,true);
request.send();
}
function close()
{
var y=document.getElementById("p");
var myNode = document.getElementById("p");
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
y.setAttribute("style","dispaly:none;");
}
function removetag(id)
{
var y=document.getElementById("l");
var z=document.getElementById(id.substr(3));
tag.pop();
y.removeChild(z);
}
function gettag(id){
tag.push(id);
var f="";
for (var i=0;i<tag.length;i++)
{
var s="<label class='_tags' id='"+tag[i]+"'>"+tag[i]+"<span><a id='tag"+tag[i]+"' onclick='removetag(this.id)'>X</a></span> </label>";
f=f.concat(s);
}
document.getElementById("l").innerHTML=f;
}
<tr>
<td>Keyword :
</td>
<td><input type="text" id="multitag" name="multitag" onkeyup="getCategory()" onclick="close()">
<div id="l">
</div>
<div id="p" style="display: none;z-index:11;" >
</div>
</td>
</tr>

Categories

Resources