In my HTML I have two pages, 1 is a fitness log and the other is a page to add a new entry to the log. When the user adds a new entry it is saved to local storage and then when the fitness log is loaded, it reads the local storage and puts the information inside of a textbox. This works fine for 1 entry, but when I need to create a second different entry it overwrites the previous. This is because I assume the way I save the user input into local storage.
This is where I save the user input from a form:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Add New Log</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="CSS/New Log.css">
<script src="JavaScript/New Log.js"></script>
</head>
<body>
<script type = "text/JavaScript">
function save() {
// save values into localStorage
localStorage['Entry Name'] = document.getElementById('eName').value;
localStorage['Exercise'] = document.getElementById('exercise').value;
localStorage['Date'] = document.getElementById('date').value;
localStorage['Start Time'] = document.getElementById('sTime').value;
localStorage['End Time'] = document.getElementById('eTime').value;
localStorage['Calorise Lost'] = document.getElementById('cal').value;
alert("Log Entry Saved");
};
</script>
<h1> Add New Log </h1>
<form id="contact-form">
<label for="entryName">Log entry name:</label>
<input type="text" id = "eName" value="" placeholder="Run at the
park"/>
<label for="exerciseName">Name of exercise:</label>
<input type="name" id = "exercise" value="" placeholder="Jogging" />
<div id="line">
<label> ------------------------------ <span class="required">
</span></label>
</div>
<div id="detail">
<label for="Date">Date: </label>
<input type="date" id = "date" value="" />
<label for="startTime">Start Time: </label>
<input type="time" id = "sTime" value="" />
<label for="endTime">End Time: </label>
<input type="time" id = "eTime" value="" />
<label for="caloriseLost">Calories Lost: </label>
<input type="number" id = "cal" value="" />
</div>
</form>
<li> Add New Log</li>
</body>
</html>
This is where I read the local sotrage back to the user in the form of a textbox:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Health and Fitness</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="CSS/Log.css">
</head>
<body>
<script>
window.onload = function(){
var values = document.getElementById("Text1");
for (let [key, prop] of Object.entries(localStorage)) {
values.value += ` ${key} : ${prop}\n `;
};
}
</script>
<h1> Fitness Log </h1>
<p> Fitness Log keeps track of the exercise you complete and saves it to
your account.</p>
<div>
<ul>
<li> Add Log</li>
<li><a href="#"onclick
="window.localStorage.clear();window.location.reload();" > Delete All</a>
</li>
</ul>
</div>
<textarea id="Text1" cols="40" rows="6"></textarea>
<textarea id="Text2" cols="40" rows="6"></textarea>
</body>
</html>
This is the output from the above code:
The solution I am looking for is that a new entry into local storage is made and then if there is something inside the first text box, load the next entry into textbox 2.
FIRST PART Where you are creating the log.
First of all before initiating the function save() what you need is an array. So create one from scratch if no localstorage is present. If there is at least one record in the localstorage then put it into that array, like so :
if (localStorage.getItem('logs') === null) {
var currentLogs = [];
} else {
var currentLogs = JSON.parse(localStorage.getItem('logs'));
}
Note that this is just before save function
Now you can write your function. But this time instead of one object, you should push this object inside the array we just declared.
function save() {
var currentLog = {
log_id: localStorage.length + 1,
entry_name: document.getElementById('eName').value,
exercise: document.getElementById('exercise').value,
date: document.getElementById('date').value,
start_time: document.getElementById('sTime').value,
end_time: document.getElementById('eTime').value,
calorise_lost: document.getElementById('cal').value
};
currentLogs.push(currentLog)
// save values into localStorage
localStorage.setItem("logs", JSON.stringify(currentLogs));
alert("Log Entry Saved");
};
SECOND PART Where you are showing the logs.
In your HTML instead of creating each textarea tags Just create an empty div
<div id="logTextarea"></div>
Now we can access to that DIV and create <textarea> dynamically and put the data inside
window.onload = function(){
var logTextarea = document.getElementById("logTextarea");
var vals = JSON.parse(localStorage.getItem('logs'));
for (var i = 0; i < vals.length; i++) {
inputLog = document.createElement("textarea");
inputLog.id = "logID" + vals[i]['log_id'];
inputLog.rows = "6";
inputLog.value = "";
inputLog.value += "Entry Name : " + vals[i]['entry_name'] + "\n";
inputLog.value += "Excercise : " + vals[i]['exercise'] + "\n";
inputLog.value += "Date : " + vals[i]['date'] + "\n";
inputLog.value += "Start Time : " + vals[i]['start_time'] + "\n";
inputLog.value += "End Time : " + vals[i]['end_time'] + "\n";
inputLog.value += "Calorise Lost" + vals[i]['calorise_lost'];
logTextarea.appendChild(inputLog);
}
}
It runs exactly as asked, on my computer. If you have questions about it, don't hesitate to ask. Hope this works.
Related
This is the html code user input form:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="marginauto" align="middle">
<style>
.marginauto {
margin: 10px auto 20px;
display: block;
}
</style>
<h1>
<img class="marginauto" align="middle" src="https://drive.google.com/uc?export=view&id=********" alt="*****">
Fabrication Time Record
</h1 >
<h2 class="marginauto" align="middle">
Information
</h2>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br>
<label for="jnum">Job number:</label><br>
<input type="text" id="jnum" name="jnum"><br>
<h2>
Operation
</h2>
<input type="radio" id="cut" name="operation" value="cut">
<label for="cut">Cut</label><br>
<input type="radio" id="drill" name="operation" value="drill">
<label for="drill">Drill</label><br>
<input type="radio" id="fitup" name="operation" value="fitUp">
<label for="fitup">Fit Up</label><br>
<input type="radio" id="weld" name="operation" value="weld">
<label for="weld">Weld</label><br>
<h2>
Comments
</h2>
<input type="text" id="comment"><br>
<br>
<button id="clockin">Clock in</button>
</div>
<script type="text/javascript">
document.getElementById("clockin").addEventListener("click",addLine);
function addLine(){
var firstName = document.getElementById("fname");
var lastName = document.getElementById("lname");
var operation = document.getElementByName("operation");
var entry = {
entry.fn = firstName.value;
entry.ln = lastName.value;
entry.op = operation.value;
}
google.script.run.addEntry(entry);
firstName.value = "";
lastName.value = "";
}
</script>
</body>
</html>
This is the script that takes user inputs from the html and (ideally) transfers them to a google spreadsheet:
function doGet(e){
Logger.log(e);
var html = HtmlService.createHtmlOutputFromFile("userForm");
html.setTitle("Record Time")
return(html)
}
function addEntry(entry){
Logger.log("Someone clicked the button");
var ssid = "1E81*****************QBmW1o4Q";
var ss = SpreadsheetApp.openById(ssid);
SpreadsheetApp.setActiveSpreadsheet(ss);
var database = ss.getSheetByName("Database");
SpreadsheetApp.setActiveSheet(database);
database.appendRow = ([entry]);
}
When I click the button, nothing happens. I am sure that I am calling the correct spreadsheet because I can read and write from the doGet() function, but there seems to be a problem with the addLine() function that I cannot find.
Any help is greatly appreciated, I am very new to web app development.
What I want is for the button to transfer the data from some text input fields to a google spreadsheet. I used multiple different button syntaxes but cannot nothing happens.
You are passing an object to addEntry you should pass an array.
Change
var entry = {
entry.fn = firstName.value;
entry.ln = lastName.value;
entry.op = operation.value;
};
To
var entry = [
firstName.value,
lastName.value,
operation.value
];
Also you have a typo in your client script. Change
var operation = document.getElementByName("operation");
To
var operation = document.getElementsByName("operation");
However getElementsByName returns a node list so to find the checked radio button you need to add this to your client script.
let operations = document.getElementsByName("operation");
let operation = null;
for( let i=0; i<operations.length; i++ ) {
if( operations[i].checked ) {
operation = operations[i];
break;
}
}
I'm trying to use the information that I obtain through a form via a submit button, do a little processing, and print it out onto the web page, preventing it from being submitted to a web server by including (return false).
Here is the code to the page:
<html>
<head>
<title>SmithSellsStuff</title>
</head>
<body>
I'm too cheap to buy something nice
<script>
var myData = {
price: "4.25",
taxRate: "0.07",
shipRate: "0.02"
};
myData.calculateTotal = function() {
myData.name = document.getElementById("name");
myData.date = document.getElementById("date");
myData.numItems = document.getElementById("number of items");
var itemTotal = myData.numItems * myData.price;
var taxTotal = (myData.numItems * myData.price) * myData.taxRate;
var shipTotal = (myData.numItems * myData.price) * myData.shipRate;
document.writeln(itemTotal);
document.writeln(taxTotal);
document.writeln(shipTotal);
};
</script>
<form>
</p>
<label>Name: <input type="text" name="name" id="name" tabindex="1"/> </label>
</p>
<label>Delivery Date: <input type="date" name="date" id="date" tabindex="2"/></label>
</p>
<label>Number of items: <input type="number" name="number of items" id="number of items" tabindex="3"/></label>
</p>
<input type="submit" onclick="calculateTotal(); return false;"/>
</form>
</body>
</html>
On the first page, I have a simple form with a field for name, date, number of items total, and a submit button. One error I'm getting is in the onclick tag. It says '_kof_1' is defined but never used. I don't think it is allowing my calculateTotal function to call.
It's because the function was not declared in the global scope, but rather as a property of myData.
myData.calculateTotal = function() {
To solve this, simply change the call to:
<input type="submit" onclick="myData.calculateTotal(); return false;"/>
Furthermore, since you want to get the name, date, and number of items from the text fields, you have to get the .value property to get the contents of the input fields, like so:
myData.name = document.getElementById("name").value;
myData.date = document.getElementById("date").value;
myData.numItems = parseInt(document.getElementById("number of items").value);
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
I'm too cheap to buy something nice
<script>
function calculateTotal()
{
alert("hai");
var price="4.25";
var taxRate="0.07";
var shipRate="0.02";
var name = document.getElementById("name");
var date = document.getElementById("date");
var numItems = document.getElementById("number_of_items").value;
alert(numItems);
var itemTotal = numItems * price;
var taxTotal = (numItems * price) * taxRate;
var shipTotal = (numItems * price) * shipRate;
document.writeln("Total Items:"+itemTotal+"\tTax :"+taxTotal+"\tshipTotal:"+shipTotal);
}
</script>
<form>
<p>
<label>Name: <input type="text" name="name" id="name" tabindex="1"/> </label>
</p>
<label>Delivery Date: <input type="date" name="date" id="date" tabindex="2"/></label>
<p>
<label>Number of items: <input type="number" name="number_of_items" id="number_of_items" tabindex="10"/></label>
</p>
<input type="submit" onclick="calculateTotal()"/>
</form>
</body>
</html>
alert is just for to know method is calling or not, Hope this will help you
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>
how would I remove a list item from my to do list onclick! And how would i set up a counter to add and display how many tasks i have and how many left once one is deleted.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Task 1</title>
<link rel="stylesheet" href="styles.css" type="text/css">
<script src="script.js"></script>
</head>
<body>
<div id="container">
<h1>My To Do List</h1>
<input type="text" id="input_field" name="input_field" placeholder="Enter New Task" required>
<button type="button" id="add" onclick="addtask()" > Add Task</button>
</div>
<ul id="todo_list"></ul>
</body>
</html>
JavaScript
function addtask() {
var input = document.getElementById('input_field').value;
if (input == "") {
window.alert("You must enter a value in the New Task field.");
}
else {
var noteList = document.getElementById('todo_list');
noteList.innerHTML += "<li>" + input + "<button id='delete'>clear</button></li>";
}
}
Add an onclick event to clear button and call the function clearItem() that deletes the item.
For your second question,
And how would i set up a counter to add and display how many tasks i
have and how many left once one is deleted.
Add a variable total_added that increment when the user adds an item, and another variable remaining that decrement when the user clears an item.
var total_added = 0; //initialize the var to zero
var remaining = 0; //initialize the var to zero
function addtask() {
var input = document.getElementById('input_field').value;
if (input == "") {
window.alert("You must enter a value in the New Task field.");
}
else {
var noteList = document.getElementById('todo_list');
noteList.innerHTML += "<li>" + input + "<button id='delete' onclick='clearItem()'>clear</button></li>";
total_added++;
remaining++; //increment total_added and remaining when user adds an item
document.getElementById('total_added').innerHTML = "Total number of tasks added = " + total_added;
document.getElementById('remaining').innerHTML = "Number of tasks remaining = " + remaining;
}
}
function clearItem() {
event.currentTarget.parentElement.remove();
remaining--; //decrement remaining when user clears an item
document.getElementById('remaining').innerHTML = "Number of tasks remaining = " + remaining;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Task 1</title>
<link rel="stylesheet" href="styles.css" type="text/css">
<script src="script.js"></script>
</head>
<body>
<div id="container">
<h1>My To Do List</h1>
<input type="text" id="input_field" name="input_field" placeholder="Enter New Task" required>
<button type="button" id="add" onclick="addtask()" > Add Task</button>
</div>
<ul id="todo_list"></ul>
<p id="total_added">Total number of tasks added = 0</p>
<p id="remaining">Number of tasks remaining = 0</p>
</body>
</html>
I think counter of the list is unnecessary. You could always count childNode in your todo_list for the left todo list. But counter for deleted list is still useful.
var list_now = document.getElementById('todo_list').childNodes.length;
Add the removeTask() function in the onClick event of the delete button and add the removeTask function.
Like this :
JS :
function addtask() {
var input = document.getElementById('input_field').value;
if (input == "") {
window.alert("You must enter a value in the New Task field.");
} else {
var noteList = document.getElementById('todo_list');
noteList.innerHTML += "<li>" + input + "<button id='delete' onclick='removeTask()' >clear</button></li>";
countItems();
}
}
function removeTask() {
event.currentTarget.parentElement.remove();
countItems();
}
function countItems() {
var count = document.querySelectorAll("#todo_list > li").length;
document.getElementById("count").innerHTML = count + ' item(s)';
}
HTML :
<div id="container">
<h1 id="title">My To Do List</h1>
<p id="count"></p>
<input type="text" id="input_field" name="input_field" placeholder="Enter New Task" required>
<button type="button" id="add" onclick="addtask()"> Add Task</button>
</div>
<ul id="todo_list"></ul>
CodePen
I know I am probably doing this in the least elegant way possible but I'm still a beginner. I want to generate a user form where people input variables. On the click of a button those variables appear in the proper place in a paragraph (Ex.. name, Date). I put together some pieces from code that copies text from one box to another... now I want to create a paragraph below where the variables populate in the middle of the relevant sentence.
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<title>textBoxes.html</title>
<script type = "text/javascript">
function sayHi(){
// THIS is WHERE input VARIABLES are set, followed by the OUTPUT
//this defines the First Week of Sickness Paid Start Date
var BPCName = document.getElementById("BPCName");
var OUTBPC = document.getElementById("OUTBPC");
var name = BPCName.value;
OUTBPC.value = " " +name+ ""
//This defines the last week of Sickness Benefits Paid
var LWPName = document.getElementById("LWPName");
var OUTLWP = document.getElementById("OUTLWP");
var name = LWPName.value;
OUTLWP.value = " " +name+ ""
//This defines Total Weeks of Sickness Benefits Paid
var TWSPName = document.getElementById("TWSPName");
var OUTTWSP = document.getElementById("OUTTWSP");
var name = TWSPName.value;
OUTTWSP.value = " " +name+ ""
// This Defines the Date the Medical Was received
var MEDRName = document.getElementById("MEDRName");
var OUTMEDR = document.getElementById("OUTMEDR");
var name = MEDRName.value;
OUTMEDR.value = " " +name+ ""
//This Defines the Medical Provider
var MEDPName = document.getElementById("MEDPName");
var OUTMEDP = document.getElementById("OUTMEDP");
var name = MEDPName.value;
OUTMEDP.value = " " +name+ ""
// THis Defines the Date of Incapacity indicated on the Medical
var INCName = document.getElementById("INCName");
var OUTINC = document.getElementById("OUTINC");
var name = INCName.value;
OUTINC.value = " " +name+ ""
} // end sayHi
</script>
<link rel = "stylesheet"
type = "text/css"
href = "textBoxes.css" />
</head>
<body>
<h1>Automatic</h1>
<form action = "">
<fieldset>
<label>Start Date: </label>
<input type = "text"
id = "BPCName" />
<input type = "button"
value = "click me"
onclick = "sayHi()"/>
<input type = "text"
id = "OUTBPC" />
</fieldset>
</form>
<form action = "">
<fieldset>
<label>Last Week of Benefits Paid: </label>
<input type = "text"
id = "LWPName" />
<input type = "button"
value = "click me"
onclick = "sayHi()"/>
<input type = "text"
id = "OUTLWP" />
</fieldset>
<form action = "">
<fieldset>
<label>Total Weeks of Sickness Benefits Paid: </label>
<input type = "text"
id = "TWSPName" />
<input type = "button"
value = "click me"
onclick = "sayHi()"/>
<input type = "text"
id = "OUTTWSP" />
<form action = "">
<fieldset>
<label>Date Medical Received: </label>
<input type = "text"
id = "MEDRName" />
<input type = "button"
value = "click me"
onclick = "sayHi()"/>
<input type = "text"
id = "OUTMEDR" />
<form action = "">
<fieldset>
<label>Name of Practitioner: </label>
<input type = "text"
id = "MEDPName" />
<input type = "button"
value = "click me"
onclick = "sayHi()"/>
<input type = "text"
id = "OUTMEDP" />
<form action = "">
<fieldset>
<label>Date of Incapacity Indicated on Medical: </label>
<input type = "text"
id = "INCName" />
<input type = "button"
value = "click me"
onclick = "sayHi()"/>
<input type = "text"
id = "OUTINC" />
<form action = "">
</fieldset>
</form>
<h2> Example Document</h2>
<p>The client was sent an EForm form requesting submission of original medical to confirm eligibility for benefits.
The client was paid XXXXX weeks of benefits during the period XXXX to XXXXX
The client submitted an original doctor’s note signed by XXXX dated XXX
Claimant notified in writing that claim is on order.
The medical addresses all weeks in which sickness benefits were paid.
</P>
</html>
Here's an example using jQuery and a regular expression:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Replace example</title>
</head>
<body>
<p id="text">Hello, my name is {{ name }}.</p>
<p>
<form>
<input type="text" id="name" value="Sally">
</form>
<button id="name-button">Replace</button>
</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Replace {{ name }} when the user clicks the button
$('#name-button').click(function() {
var currentText = $('#text').html();
var name = $('#name').val();
var newText = currentText.replace(/{{ name }}/, name)
$('#text').html(newText);
});
});
</script>
</body>
</html>
Here's a demo.
As answered by Joseph.. it is the way to do it in Jquery. But that suggested solution replaces one pattern at a time, which means you will have to click the button again to replace the other string with same pattern(if you have one).
Its like: (Using Joseph's code to demonstrate)
<!DOCTYPE html>
<html>
<head>
<title>Replace example</title>
</head>
<body>
<p id="text">Hello, my last name is {{ name }}. Also my father's last name is {{ name }}.</p> <!-- Don't mind the sentence -->
<p>
<form>
<input type="text" id="name" value="Sally">
</form>
<button id="name-button">Replace</button>
</p>
</body>
</html>
All you got to do is search them globally which can be done by passing global flag that is /g. So the Jquery becomes:
var newText = currentText.replace(/{{ name }}/g, name)
Everything is same as Joseph's just a little modified.