I have created a tip calculator. After you put in the amount and hit enter text pops up telling you how much you owe if you pay 20%. I figured out how to clear the numbers in the <input> but I can't figure out the JS so that the text clears as well.
This is a link to my file.
https://codepen.io/wrraybin/pen/WVdvLN
<!DOCTYPE html>
<html>
<head>
<title>Tip Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">
<link rel="stylesheet" href='tip-calc.css'>
</head>
<body>
<div>
<h1>Tip Calculator</h1>
<form id='tip-calc'>
<input id='enter-num' type='number' placeholder='Bill Total' name='tipTotal' >
<div id='buttons'>
<button id='butt-one'>Tip</button>
<input id='butt-two' type="reset" value="Reset" name='resetButton'>
</div>
</form>
</div>
<div id='final-amount'>
</div>
</body>
<script src="tip-calc.js"></script>
</html>
document.querySelector('#tip-calc').addEventListener('submit', function(e){
e.preventDefault()
document.querySelector('#final-amount').innerHTML = ''
const billTotal = document.createElement('h2')
const tip = Math.floor( e.target.elements.tipTotal.value * 0.2)
billTotal.textContent = `You should leave $${tip} if tipping 20%.`
document.querySelector('#final-amount').appendChild(billTotal)
})
Add this code to file tip-calc.js
document.querySelector('#butt-two').onclick =
() => document.querySelector('#final-amount').innerHTML = '';
document.querySelector('#tip-calc').addEventListener('submit', function(e) {
e.preventDefault()
document.querySelector('#final-amount').innerHTML = ''
const billTotal = document.createElement('h2')
const tip = Math.floor(e.target.elements.tipTotal.value * 0.2)
billTotal.textContent = `You should leave $${tip} if tipping 20%.`
document.querySelector('#final-amount').appendChild(billTotal)
})
document.querySelector('#butt-two').onclick =
() => document.querySelector('#final-amount').innerHTML = '';
<div>
<h1>Tip Calculator</h1>
<form id='tip-calc'>
<input id='enter-num' type='number' placeholder='Bill Total' name='tipTotal'>
<div id='buttons'>
<button id='butt-one'>Tip</button>
<input id='butt-two' type="reset" value="Reset" name='resetButton'>
</div>
</form>
</div>
<div id='final-amount'>
</div>
Add an event listener on the reset button and on click reset the Html in the final-amount div
document.querySelector('#butt-two').addEventListener('click', function(e){
document.querySelector('#final-amount').innerHTML = ''
})
Related
this is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CV Information</title>
<link rel="stylesheet" href="StyleSheet1.css" />
</head>
<body>
<header><b>CV Information</b></header>
<!--<script src="Script1.js"></script>-->
<div class="mydiv">
<form action="CV_Viewer.html">
<fieldset id="field">
<div class="scrollable" id="scroll">
<header>Languages</header><br />
<label for="mLan">Your Mothertoungue:</label>
<input type="text" id="mLan" placeholder="Primary Language.." name="name" pattern="[A-Za-z ]{3,}" required><br><br>
<input type="button" id="plus" onclick="addTextBox()" class="plus" value="+ other languages..." name="plus" />
</div>
<div style="position: static">
<input type="submit" onclick="webstorage()" class="hov" style="margin-top:30px" value="Next">
</div>
</fieldset>
</form>
</div>
<footer>
Copyright©2022 Rami Joulani
</footer>
<script>
let b = 1;
let q=0;
const array = [];
function addTextBox() {
b++;
const textBox = document.createElement("INPUT");
textBox.setAttribute("type", "text");
textBox.setAttribute("placeholder", "Any Other Language...");
textBox.setAttribute("pattern", "[A-Za-z ]{3,}");
textBox.setAttribute("style", "margin-top:35px;");
textBox.setAttribute("id",q);
const div = document.getElementById("scroll");
div.appendChild(textBox);
var plus = document.getElementById("plus");
div.insertBefore(textBox, plus);
array[q] = textBox.value;
console.log(array[q]);
q++;
return fieldSet();
}
function fieldSet() {
const radio1 = document.createElement("input");
radio1.setAttribute("type", "radio");
radio1.setAttribute("id", "rad1");
radio1.setAttribute("name", "connected");
const div = document.getElementById("scroll");
var plus = document.getElementById("plus");
div.appendChild(radio1);
div.insertBefore(radio1, plus);
const begg = document.createElement("label");
begg.setAttribute("for", "rad1");
const begginer = document.createTextNode("Begginer");
begg.appendChild(begginer);
div.appendChild(begg);
div.insertBefore(begg, plus);
const radio2 = document.createElement("input");
radio2.setAttribute("type", "radio");
radio2.setAttribute("id", "rad2");
radio2.setAttribute("name", "connected")
div.appendChild(radio2);
div.insertBefore(radio2, plus);
const inter = document.createElement("label");
inter.setAttribute("for", "rad2");
const intermadiate = document.createTextNode("Intermadiate");
inter.appendChild(intermadiate);
div.appendChild(inter);
div.insertBefore(inter, plus);
const radio3 = document.createElement("input");
radio3.setAttribute("type", "radio");
radio3.setAttribute("id", "rad3");
radio3.setAttribute("name", "connected")
div.appendChild(radio3);
div.insertBefore(radio3, plus);
const flu = document.createElement("label");
flu.setAttribute("for", "rad3");
const fluent = document.createTextNode("Fluent");
flu.appendChild(fluent);
div.appendChild(flu);
div.insertBefore(flu, plus);
plus.setAttribute("style", "margin-top:20px;")
if(b==4) {
plus.hidden=true;
}
}
function webstorage() {
localStorage.setItem("mothTong", document.getElementById("mLan").value);
}
</script>
</body>
</html>
I changed it multiple times when I tried to solve it
how can I save textBox value and the radio button values separately though they are created with the same attribute
it might be simple but I just couldn't figure it out.
Don't point out to some missing stuff but if you please tell me how is it possible to do it depending on the general form of the code.
I have looked line by line and I can not seem to see the issue, it said that somewhere the click event is not clicking anything because its value is null. I need a new set of eyes on this who can maybe spot the issue.
In short, I can click the add task button but for some reason, the edit button is not working. I know why the delete button is not working and that is due to the fact there is not code for it to return yet.
I also put the HTML head in so you can see my js file is there with a defer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-do App</title>
<script src="js/main.js" defer></script>
<script src="js/dateTime.js" defer></script>
<link rel="stylesheet" href="css/main.css" />
</head>
<main>
<section class="task-list">
<h2>Tasks</h2>
<div id="tasks">
<!--<button class = "sort">Sort</button>
<div class="task">
<div class="content">
<input
type="text"
class="text"
value="A new task"
readonly>
</div>
<div class="actions">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</div>
</div> -->
</div>
</section>
</main>
/************************************
* creates an object of elements needed *
************************************/
const elements = {
form: document.querySelector("#new-task-form"),
input: document.querySelector("#new-task-input"),
list: document.querySelector("#tasks"),
cal: document.querySelector("#calendar")
}
/****************************
* Generates an ID for task *
****************************/
const createId = () => `${Math.floor(Math.random() * 10000)}-${new Date().getTime()}`
/**********************************************
* function that creates the HTML elements *
**********************************************/
const createTask = () => {
const id = createId()
const task = elements.input.value;
const date = elements.cal.value;
if(!task && !date) return alert("Please fill in task and select date");
if(!task) return alert("Please fill in task");
if(!date) return alert("Please select date");
const tasks = document.createElement("div");
tasks.innerHTML = `
<button class = "sort">Sort</button>
<div class="task" date-id = "${id}">
<div class="content">
<input type ="checkbox" class="tick">
<input type ="text" class = "text" id = "text" readonly>${task}
<label class = "due-date" for ="text">${date}</label>
<input type ="date" class = "date" id = "date">
</div>
<div class = "actions">
<button class="edit" data-id="${id}">Edit</button>
<button class="delete" data-id="${id}">Delete</button>
</div>
</div>
`
elements.list.appendChild(tasks)
return tasks
}
/**************************************************************
* Event that listens for the submit, edit and delete button *
**************************************************************/
elements.list.addEventListener('click',event => {
const {target} = event;
const {id} = target.dataset
const task = id ? document.querySelector('[data-id="${id}"]'):null;
const type = {
edit: event.target.classList.contains('edit'),
delete: event.target.classList.contains('delete')
}
const isFromSaveLabel = target.innerText.toLowerCase() === 'save'
if(task && type.edit && isFromSaveLabel){
const text = task.querySelector('text')
target.innerText = 'Edit'
text.addAttribute('readonly')
return
};
if(task && type.edit){
const text = task.querySelector('text')
target.innerText = 'save'
text.removeAttribute('readonly')
text.focus()
return
};
if(task && type.delete){
return
}
});
const submitHandler = (event) =>{
event.preventDefault();
createTask();
}
elements.form.addEventListener("submit", submitHandler);
I keep getting an error message that:
check is not a function at area question 1
and
check is not a function at HTMLInputElement.onclick
and I think this is the reason that the check() function is not running. I've looked at so many other solutions to this problem but none of them are really helpful for my issue. Any help would be greatly appreciated!
var number1;
var number2;
var response;
var calcanswer;
var score = 0;
window.onload = areaquestion1;
score.innerHTML = "SCORE: " + score;
function areaquestion1() {
var imageBlock = document.createElement("img");
imageBlock.setAttribute("id", "img");
imageBlock.setAttribute("src", "Images/2_1.png");
imageBlock.setAttribute("width", "700");
imageBlock.setAttribute("height", "400");
imageBlock.setAttribute("alt", "2_1");
document.getElementById('img').appendChild(imageBlock); // this appends it to the bottom of the page
number1 = 2
number2 = 1
calcanswer = (number1*number2);
var question = document.getElementById("question");
question.innerHTML = "What is the area of this lego brick?";
document.getElementById("check").check();
}
function areaquestion2() {
var imageBlock = document.createElement("img");
imageBlock.setAttribute("id", "img");
imageBlock.setAttribute("src", "Images/4_2.png");
imageBlock.setAttribute("alt", "4_2");
document.body.appendChild(imageBlock); // this appends it to the bottom of the page
number1 = 4
number2 = 2
calcanswer = (number1*number2);
var question = document.getElementById("question");
question.innerHTML = "What is the area of this lego brick?";
document.getElementById("solve").check();
}
function check() {
var statusDiv = document.getElementById("status");
response=document.getElementById("answer").value;
if(response != calcanswer)
statusDiv.innerHTML="Incorrect";
else
if (response==calcanswer)
{
statusDiv.innerHTML="Very good!";
score ++;
document.getElementById("score").textContent = score
document.getElementById("answer").value = "";
}
}
<!DOCTYPE html>
<html>
<title>Lego Area Play</title>
<head>
<link rel="stylesheet" href="CSS/gridtest.css">
<script src="JavaScript/Play.js"></script>
</head>
<body onload="areaquestion1();">
<div class="header">
<h1>LEGO AREA</h1>
<p>Calculating <b>area</b> with Emmet.</p>
<div id="scorelabel"><label>SCORE:</label></div>
<div id="score" class="score"></div>
</div>
<form>
<div class="row">
<div class="column" style="background-color:#aaa;">
<div id="question"></div>
<div id="img"></div>
<div id="status"></div>
</div>
<div class="column" style="background-color:#bbb;">
<div id ="prompt"></div>
<label>Area = </label>
<input type="text" id="answer" placeholder="Answer"/>
<label>Units<sup>2</sup></label>
</div>
<div class="column" style="background-color:#ccc;">
<input id="check" type="button" value="CHECK!" onclick="check()" />
<div class="practice"> <img src="Images/legoBlue2.png" id="practicebtn" alt="lego button for practice page" width=350px height=140px></div>
<div class="menu"> <img src="Images/menured.png" id="menubtn" alt = "lego button for menu page" width=350px height=140px></div>
</div>
</div>
</form>
</body>
</html>
As Cannicide pointed out, your second error occurs when the arequestion1() is called on load, on the line document.getElementById("check").check();
You added the check method to onclick, but that did not add a new property to the button.
Your first error is a little more complicated. This is the simplest recreation of your error I tried creating.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
function f(){
console.log("f run")
}
</script>
<!-- id same as function name -->
<input id="f" type="button" value = "B1" onclick="f()" />
<!-- button inside a form -->
<form>
<input type="button" value = "B2" onclick="f()" />
</form>
<!-- button inside a form with random id -->
<form>
<input id="somethingelse" type="button" value = "B3" onclick="f()" />
</form>
<!-- button inside a form, equal id and method name -->
<form>
<input id="f" type="button" value = "B4" onclick="f()" />
</form>
</body>
</html>
There are 4 buttons, each with small difference in its environment. Notice how only the button that is inside a form and has the same id name and the onclick method name throws you an error.
To this error I unfortunately have no clue to why and how does this happen.
If someone here knows what is going on here, please explain!
cheers :)
I'm working on a tax calculator using HTML and Javascript. It needs to accept two user inputs ("Total owed" and "Your payment") and calculate what percentage "Your payment" is of "Total owed". Then they should be displayed within the "answerParagraph" tag. What is the best way to do this?
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="getPercentage">
<div id="total">
Total owed:
<input id="totalInput" type="text">
</div>
<div id="payment">
Your payment:
<input id="paymentInput" type="text">
</div>
<button onclick="handlers.getPercentage()">Get percentage</button>
</div>
<div>
<p id="answerParagraph">
</p>
</div>
<script>
var taxes = {
getPercentage: function(total, payment) {
var percentage = (Math.floor((payment / total) * 100));
},
}
var handlers = {
getPercentage: function() {
var totalInput = document.getElementById('totalInput');
var paymentInput = document.getElementById('paymentInput');
var answer = taxes.getPercentage(totalInput.value, paymentInput.value);
}
}
</script>
</body>
</html>
You have to return the answer from taxes.getPercentage function
getPercentage: function (total, payment) {
var percentage = (Math.floor((payment / total) * 100));
return percentage;
}
And display in your answerParagraph. So, in handlers.getPercentage :
...
var answer = taxes.getPercentage(totalInput.value, paymentInput.value);
answerParagraph.innerHTML = answer;
the following modified code should work
var taxes = {
getPercentage: function(total, payment) {
var percentage = (Math.floor((payment / total) * 100));
return percentage
},
}
var handlers = {
getPercentage: function() {
var totalInput = document.getElementById('totalInput');
var paymentInput = document.getElementById('paymentInput');
var answer = taxes.getPercentage(totalInput.value, paymentInput.value);
document.getElementById('answerParagraph').innerHTML = answer
}
}
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="getPercentage">
<div id="total">
Total owed:
<input id="totalInput" type="text">
</div>
<div id="payment">
Your payment:
<input id="paymentInput" type="text">
</div>
<button onclick="handlers.getPercentage()">Get percentage</button>
</div>
<div>
<p id="answerParagraph">
</p>
</div>
<script>
</script>
</body>
</html>
You can leave out the button if you trigger the calcpercentage() function by the keyup-event on either of the two input fields:
// define shorthand notation byId(id):
const byId=id=>document.getElementById(id);
// delegated event binding: affects INPUT elements only
byId('getPercentage').addEventListener('keyup',function(ev){
if(ev.target.tagName!='INPUT') return false;
byId('answerParagraph').innerHTML=
(byId('paymentInput').value*100 /
byId('totalInput').value).toFixed(2)+"%";
});
// trigger event manually ...
byId('totalInput').dispatchEvent(new Event('keyup',{bubbles:true}));
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="getPercentage">
<div id="total">
Total owed:
<input id="totalInput" type="text" value="1000">
</div>
<div id="payment">
Your payment:
<input id="paymentInput" type="text" value="25">
</div>
</div>
<div>
<p id="answerParagraph">
</p>
</div>
<script>
</script>
</body>
</html>
I have two buttons in my form for calling two JavaScript functions. The first button works good in its onclick event calling the payroll() function successfully but the second button is of type submit and it never calls the send() function on form submission. I don't know why this issue occurs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html >
<head>
<title>hr page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript"
src="/static/js/sijax/sijax.js"></script>
<script type="text/javascript">
{{ g.sijax.get_js()|safe }}</script>
<link rel="stylesheet" href="{{url_for('static', filename='styles/signupcss.css')}}">
<script type="text/javascript" >
function payroll() {
var basic=document.forms["salary"]["bsalary"].value;
var empid=document.forms["salary"]["empid"].value;
var ta,hra,da,pf,netsalary,grosssalary;
if (empid == ""||basic == "") {
alert("Employee ID and Salary details must be filled out");
return false;
}
if(isNaN(basic))
{alert("Salary must be in Numbers");
return false;
}
hra=basic*40/100;
da=basic*15/100;
pf=basic*12/100;
basic=parseInt(basic);
hra=parseInt(hra);
da=parseInt(da);
grosssalary=basic + hra + da;
ta=basic*6.2/100;
netsalary=grosssalary-ta;
document.getElementById("hra").innerHTML=hra;
document.getElementById("ta").innerHTML=ta;
document.getElementById("da").innerHTML=da;
document.getElementById("netsalary").innerHTML=netsalary;
document.getElementById("pf").innerHTML=pf;
document.getElementById("grosssalary").innerHTML=grosssalary;
window.alert("HI"+grosssalary);
return true;
}
function send()
{
var id = document.forms['salary']['empid'].value;
var basic = document.forms['salary']['bsalary'].value;
var hra = document.forms['salary']['hra'].value;
var da = document.forms['salary']['da'].value;
var ta = document.forms['salary']['ta'].value;
var pf = document.forms['salary']['pf'].value;
var gross_sal = document.forms['salary']['grosssalary'].value;
window.alert("HI"+gross_sal);
var net_sal = document.forms['salary']['netsalary'].value;
Sijax.request('send',[id, basic, hra, ta, da, pf, gross_sal, net_sal]);
}
</script>
</head>
<body style="font-family:Lato">
<div style="padding-left:5%;padding-top:0.2%;height:1%;width:100%;background-color:#11557c">
<h2>Welcome to HR Department</h2><br>
</div>
<div style="margin-left:15%" >
<h2>Name</h2>
<form id="salary" name="salary" style="margin-top: 2%" method="post" onsubmit="return send()" >
<label id = "empid">Employee ID</label><br>
<input type = "text" name = "empid" placeholder = "Employee ID" /><br><br>
<label id = "bsalary">Basic Salary</label><br>
<input type = "text" name = "bsalary" placeholder = "Basic salary" /><br><br>
<input type="button" value="Calculate" onclick="return payroll()"><br><br>
<label for ="hra">House Rent Allowance(HRA)</label>
<p id="hra" name="hra"></p><br>
<label for ="ta">Travel Allowance(TA)</label>
<p id="ta" name="ta"></p><br>
<label for ="da"> Dearness Allowance(DA)</label>
<p id="da" name="da"></p><br>
<label for ="netsalary">Net Salary</label>
<p id="netsalary" name="netsalary"></p><br>
<label for ="pf">Provident Fund(PF)</label>
<p id="pf" name ="pf"></p><br>
<label for ="grosssalary">Gross Salary</label>
<p id="grosssalary" name="grosssalary"></p><br><br>
<input type="submit" value="Upload Salary">
</form>
</div>
</body>
</html>
You can't act with <p> elements like as a form-elements. You may create a respective <input type="hidden"> elements and fill them in payroll(), or get values by .innerHtml on paragraphs.
P.S. You have actually a TypeError exception, calling undeclared form elements like document.forms['salary']['grosssalary'] and so on.
okay, quick fix, since you are using python flask library Sijax for ajax and therefore jQuery, you can alter your javascript send function like this:
function send(e){
e.preventDefault(); //it is as good as returning
//false from the function in all cases
var id = document.forms['salary']['empid'].value;
...
}
and change your onsubmit handler declaration like this:
<form id="salary" name="salary" style="margin-top: 2%" method="post"
onsubmit="return send(event)" >
please note that when you stop the event chain propagation, you will have to do a manual submission of the form.
So, you can modify your send function to do .preventDefault based on your custom criterias, otherwise, let the form submit
Your code actually works, if you're running this code as a snippet here in stack overflow, Form submission is actually blocked by default. Try running your code in codepen. I tried it and it's actually working.
http://codepen.io/jhonix22/pen/VPZagb
Check this out. It is nowhere close to a perfect solution but I think it helps. You can not access the paragraphs as if you would the form input elements. Im not entirely sure what Sijax thing is. I believe it is just a normal AJAX HTTP thing with some sort of CSRF security filters.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>hr page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript"
src="/static/js/sijax/sijax.js"></script>
<script type="text/javascript">
{
{
g.sijax.get_js() | safe
}
}</script>
<link rel="stylesheet" href="{{url_for('static', filename='styles/signupcss.css')}}">
<script type="text/javascript">
function payroll() {
var basic = document.forms["salary"]["bsalary"].value;
var empid = document.forms["salary"]["empid"].value;
var ta, hra, da, pf, netsalary, grosssalary;
if (empid == "" || basic == "") {
alert("Employee ID and Salary details must be filled out");
return false;
}
if (isNaN(basic)) {
alert("Salary must be in Numbers");
return false;
}
hra = basic * 40 / 100;
da = basic * 15 / 100;
pf = basic * 12 / 100;
basic = parseInt(basic);
hra = parseInt(hra);
da = parseInt(da);
grosssalary = basic + hra + da;
ta = basic * 6.2 / 100;
netsalary = grosssalary - ta;
document.getElementById("hra").innerHTML = hra;
document.getElementById("ta").innerHTML = ta;
document.getElementById("da").innerHTML = da;
document.getElementById("netsalary").innerHTML = netsalary;
document.getElementById("pf").innerHTML = pf;
document.getElementById("grosssalary").innerHTML = grosssalary;
window.alert("HI" + grosssalary);
return true;
}
function send() {
var id = document.forms['salary']['empid'].value;
var basic = document.forms['salary']['bsalary'].value;
var hra = document.getElementById('hra').innerHTML;
var da = document.getElementById('da').innerHTML;
var ta = document.getElementById('ta').innerHTML;
var pf = document.getElementById('pf').innerHTML;
var gross_sal = document.getElementById('grosssalary').innerHTML;
window.alert("HI" + gross_sal);
var net_sal = document.getElementById('netsalary').innerHTML;
// I think you are missing something here.
Sijax.request('send', [id, basic, hra, ta, da, pf, gross_sal, net_sal]);
}
</script>
</head>
<body style="font-family:Lato">
<div style="padding-left:5%;padding-top:0.2%;height:1%;width:100%;background-color:#11557c">
<h2>Welcome to HR Department</h2><br>
</div>
<div style="margin-left:15%">
<h2>Name</h2>
<form id="salary" name="salary" style="margin-top: 2%" method="post" onsubmit="return false">
<label id="empid">Employee ID</label><br>
<input type="text" name="empid" placeholder="Employee ID"/><br><br>
<label id="bsalary">Basic Salary</label><br>
<input type="text" name="bsalary" placeholder="Basic salary"/><br><br>
<input type="button" value="Calculate" onclick="return payroll()"><br><br>
<label for="hra">House Rent Allowance(HRA)</label><br>
<p id="hra" readonly name="hra"></p>
<label for="ta">Travel Allowance(TA)</label><br>
<p id="ta" readonly name="ta"></p>
<label for="da"> Dearness Allowance(DA)</label><br>
<p id="da" readonly name="da"></p>
<label for="netsalary">Net Salary</label><br>
<p id="netsalary" readonly name="netsalary"></p>
<label for="pf">Provident Fund(PF)</label><br>
<p id="pf" readonly name="pf"></p>
<label for="grosssalary">Gross Salary</label><br>
<p id="grosssalary" readonly name="grosssalary"></p><br>
<input type="button" onclick="send()" value="Upload Salary">
</form>
</div>
</body>
</html>