We Keep Coding

Local Storage giving me undefined

I have been creating a form where after I have input my values and submit, I want to show the data on another page
Here is my form:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../css/checkout.css">
<p id="Header">Checkout page</p>
<div class="row">
<div class="col-75">
<div class="containeer">
{{!-- When fom submitted, transport to here --}}
<form id="form" action="receipt" style="checkout.css">
<div class="row">
<div class="col-50">
<h3>Billing Address</h3>
{{!-- Name --}}
<label for="name"><i class="fa fa-user"></i> Full Name*</label>
<input class="form-control" type="text" placeholder="Example: Chia Kai Jun" id="name" required />
<label for="email"><i class="fa fa-envelope"></i> Email*</label>
<input class="form-control" type="email" id="email" placeholder="Example: john#example.com" required />
<label for="adr"><i class="fa fa-address-card-o"></i> Address (Street, Block, Unit Number)*</label>
<input class="form-control" type="text" id="adr" name="address" placeholder="Example: Ang Mo Kio Street 69, Blk106P, #07-212" required />
<div class="row">
<div class="col-50">
<label for="zip">Zip*</label>
<input class="form-control"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
{{!-- Javascript code needed here to prevent using text --}}
pattern="\d*" maxlength="6" type="number" id="zip" name="zip" placeholder="Example: 123456" required />
</div>
</div>
</div>
<div class="col-50">
<h3>Payment</h3>
{{!-- Available credit cards to use with image --}}
<label for="fname">Accepted Cards</label>
<div class="icon-container">
<i class="fa fa-cc-visa" style="color:navy;"></i>
<i class="fa fa-cc-mastercard" style="color:red;"></i>
</div>
<label for="cname">Name on Card*</label>
<input class="form-control" type="text" id="cname" name="cardname" required />
<label for="ccnum">Credit card number*</label>
<input class="form-control" type="text" maxlength="19" id="ccnum" name="cardnumber" placeholder="Example: 1111-2222-3333-4444"required />
<div class="row">
<div class="col-50">
<label for="expyear">Exp Month and Year*</label>
<input class="form-control" type="month" id="expyear" name="expyear" required />
</div>
<div class="col-50">
<label for="cvv">CVV*</label>
<input class="form-control" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
type="password" id="cvv" name="cvv" pattern="\d*" minlength="3" maxlength="3" required />
</div>
</div>
</div>
</div>
{{!-- Will link to thank you for purchase, but now link to base for testing --}}
<button type="submit" class="btn btn-primary" onclick="submitForm()">Submit</button><span id="hi">* - Must be filled in</span>
</div>
</div>
<div class="col-25">
<div class="container">
<h4>Cart <span class="price" style="color:black"><i class="fa fa-shopping-cart"></i></span></h4>
{{!-- Will be currently empty if nothing and have items if something there --}}
<p id="item">Thinkpad Laptop - $100</p>
<img class="card-img-top p-5" src="/images/laptop.png" id="laptopimage">
<hr>
<p id="price" value="$100">Total: $100 <span class="price" style="color:black"></span></p>
{{!-- Will display nothing if there are no items and will compute total cost if there are items --}}
</div>
</div>
</div>
</form>
<script>
function submitForm(){
let name = document.forms["form"]["name"].value;
let email = document.forms["form"]["email"].value;
let address = document.forms["form"]["address"].value;
let zip = document.forms["form"]["zip"].value;
let test = document.forms["form"]["test"].value;
if (name == "") and (email == "") and (address == "") and (zip == "") and (test == ""){
return false;
}
else if(typeof(localStorage) != "undefined"){
localStorage.name = document.getElementById("name").value;
localStorage.email = document.getElementById("email").value;
localStorage.adr = document.getElementById("adr").value;
localStorage.zip = document.getElementById("zip").value;
localStorage.test = document.getElementById("test").value;
}
document.getElementById("form").submit();
}
</script>
Here is where I show the data input:
.yeet{
font-size: 25px;
line-height: 200%;
padding: 40px;
}
.intro{
text-align: center;
}
</style>
<div class="intro">
<h1>Thank you for your purchase!</h1>
<h2>Please check that your checkout details are correct</h2>
</div>
<body onload="setData()">
<div class="yeet">
Name: <span id="name"></span><br>
Email: <span id="email"></span><br>
Address: <span id="adr"></span><br>
Zip: <span id="zip"></span><br>
Item: <span id="cvv"></span><br>
</div>
<script>
function setData(){
if(typeof(localStorage) != "undefined"){
document.getElementById("name").innerHTML = localStorage.name;
document.getElementById("email").innerHTML = localStorage.email;
document.getElementById("adr").innerHTML = localStorage.adr;
document.getElementById("zip").innerHTML = localStorage.zip;
document.getElementById("cvv").innerHTML = localStorage.cvv;
}
}
</script>
</body>
The values I want to show after the input is currently Name, Email, Address, ZIP and CVV. My CVV is giving me undefined when my other values are correct. I am not sure why

To set and get data from localStorage -
localStorage.setItem('variable_name', 'value');
localStorage.getItem('variable_name');

Please try to do this code.
<script>
function setData(){
if(typeof(Storage) !== "undefined"){
document.getElementById("name").innerHTML = localStorage.name;
document.getElementById("email").innerHTML = localStorage.email;
document.getElementById("adr").innerHTML = localStorage.adr;
document.getElementById("zip").innerHTML = localStorage.zip;
document.getElementById("cvv").innerHTML = localStorage.cvv;
}
}
</script>
why we are checking this condition, some browser does not support Web Storage
if(typeof(Storage) !== "undefined")

I found out my problem, my </form was placed wrongly. Sorry and thanks to everyone that helped!

How can I use javascript to enable a "create account" button once all fields have correct input?

What I am trying to accomplish and have been unable to figure out after reading from different sources all day is, how do I get the disabled attribute from a button to go away once all of the fields have input? At this point in time it doesn't really matter what is in the fields as long as they have something. I have worked on a addEventListener which I tried doing a if(validateForm()) createBtn.removeAttribute('disabled');
const form = document.getElementById('createForm')
// Selecting all text elements
const createBtn = document.getElementById('createBtn');
/*
methods to validate user input
*/
// validate that all fields have input
function validateForm() {
// get values from input
const studentIdValue = studentID.value.trim();
const emailValue = email.value.trim();
const usernameValue = username.value.trim();
const firstnameValue = firstname.value.trim();
const lastnameValue = lastname.value.trim();
const passwordValue = password.value.trim();
const password2Value = password_confirm.value.trim();
if(studentIdValue !== "" && emailValue !== "" && usernameValue !== "" && firstnameValue !== '' && lastnameValue !== '' && passwordValue !== '' && password2Value !== ''){
if(validateEmail(emailValue)) {
createBtn.disabled = false;
}
} else {
createBtn.disabled = true;
}
}
<html>
<head>
<script src="https://github.com/claudewill1/Project/blob/main/validate.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="row justify-content-between p-1">
<div class="col-12 col-md-6 nopadding">
<form action="" id="createform" method="post">
<div class="form-group">
<h2 class="form-title">Create a New Account</h2>
</div>
<!-- form-group -->
<!-- added ids to divs for input control to be able to access elements with script -->
<div class="form-group">
<div class="input-group">
<input class="form-control rounded-0" placeholder="Student ID" autofocus type="text" name="studentid" id="studentId" value="">
</div>
<!-- input-group -->
</div>
<!-- form-group -->
<div class="form-group">
<div class="input-group" id="email_div">
<input class="form-control rounded-0" placeholder="Email" autofocus type="text" name="email" value="">
</div>
<!-- input-group -->
</div>
<!-- form-group -->
<div class="form-group">
<div class="input-group" id="username_div">
<input class="form-control rounded-0" placeholder="Username" autofocus type="text" name="username" value="">
</div>
<!-- input-group -->
</div>
<!-- form-group -->
<div class="form-group">
<div class="input-group" id="firstname_div">
<input class="form-control rounded-0" placeholder="First name" autofocus type="text" name="firstname" value="">
</div>
<!-- input-group -->
</div>
<!-- form-group -->
<div class="form-group">
<div class="input-group" id="lastname_div">
<input class="form-control rounded-0" placeholder="Last name" autofocus type="text" name="lastname" value="">
</div>
<!-- input-group -->
</div>
<!-- form-group -->
<div class="form-group">
<div class="input-group">
<input class="form-control rounded-0" placeholder="Password" autofocus type="password" name="phash1" id="pass1_div" value="">
<div class="input-group-append">
<button class="btn btn-gold" type="button" id="show1" onclick="toggleInputType1()">
SHOW
</button>
</div>
</div>
<!-- input-group -->
</div>
<!-- form-group -->
<div class="form-group">
<div class="input-group">
<input class="form-control rounded-0" placeholder="Retype Password" autofocus type="password" name="phash2" id="pass2_div" value="">
<div class="input-group-append">
<button class="btn btn-gold" type="button" id="show2" onclick="toggleInputType2()">
SHOW
</button>
</div>
</div>
<!-- input-group -->
</div>
<!-- form-group -->
<div class="form-group pt-3">
<div class="input-group">
<!-- changed id for create button to "createBtn" -->
<button class="form-control rounded-0 btn-blue" type="button" id="createBtn" disabled onclick="btn_create()">
Create Account
</button>
</div>
<!-- input-group -->
<div class="input-group">
<button class="form-control rounded-0 btn-gold" type="button" id="submit" onclick="btn_home()">
Home
</button>
</div>
<!-- input-group -->
</div>
<!-- form-group -->
</form>
</div>
<!-- col-md -->
<div class="col nopadding">
<img class="side" src="./img/hero-image.jpg" alt="Hero Image">
</div>
<!-- col-6 -->
</div>
<!-- row -->
</div>
<!-- container -->
</body>
</html>
Can anyone point out what I might be doing wrong?
Also, please don't close my post as other have done in the past if I asked the question wrong, I am new for the most part to stackoverflow and I am posting based off the rules I see for posting. I made sure to only If needed I can edit this.

This works. I modified your validateForm() function a little and added another function that monitors the form for change.
function validateForm() {
"use strict";
//Check your HTML file. You'll need to add an id where there is none.
const studentIdValue = document.getElementById("studentid").value.trim();
const emailValue = document.getElementById("email").value.trim();
const usernameValue = document.getElementById("username").value.trim();
const firstnameValue = document.getElementById("firstname").value.trim();
const lastnameValue = document.getElementById("lastname").value.trim();
const passwordValue = document.getElementById("pass1_div").value.trim();
const password2Value = document.getElementById("pass2_div").value.trim();
if (studentIdValue !== "" && emailValue !== "" && usernameValue !== "" && firstnameValue !== "" && lastnameValue !== "" && passwordValue !== "" && password2Value !== "") {
document.getElementById("create-btn").removeAttribute("disabled");
}
}
//This function monitors the form for change.
function checkForm() {
"use strict";
const yourForm = document.getElementById("createform");
yourForm.addEventListener("change", function () {
validateForm();
});
}
checkForm();

You have to invoke validateForm() function on every input field update. You can do something like this with onkeyup event:
<input class="form-control rounded-0" placeholder="Student ID" autofocus type="text" name="studentid" id="studentId" value="" onkeyup="validateForm()">
That way once all the validation criteria are met your button should become active.
As an option you can definitely use event listeners outside of your html for each input field instead to trigger the validateForm().

Search Script with 2 criteria. Google API and Spreadsheet

I have a form with 5 fields connected to a Google Spreadsheet. When my user input data in the first 2 fields the 3 other fields update according to the data of the Spreadsheet.
My script is working perfectly with one criteria but I need second criteria in order to update the 3 other fields.
My HTML :
<!DOCTYPE HTML>
<HTML>
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<?!=include("page-css"); ?>
</head>
<body>
<div class="container">
<div class="row">
<div class="input-field col s12">
<input id="ds" type="text" class="validate">
<label for="ds">Contract Number</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="pn" type="text" class="validate">
<label for="pn">Number</label>
</div>
</div>
<h5> RESULTS </h5>
<div class="row">
<div class="input-field col s12">
<input disabled id="est" type="text" class="validate">
<label for="est" class="active">Validity date from</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input disabled id="est1" type="text" class="validate">
<label for="est1" class="active">Expiry Date</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input disabled id="est2" type="text" class="validate">
<label for="est2" class="active">Type</label>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<?!=include("page-js"); ?>
</body>
</html>
My script have to do : Search value of "est", "est1", "est2" for "ds" AND "pn"
The script is :
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems);
});
document.getElementById("ds").addEventListener("input",getEstimate)
function getEstimate(){
var contractNumber = document.getElementById("ds").value;
if(contractNumber.length === 8){
google.script.run.withSuccessHandler(upadteEstimate).getDateStart(contractNumber);
google.script.run.withSuccessHandler(upadteEstimate1).getDateExpiry(contractNumber);
google.script.run.withSuccessHandler(upadteEstimate2).getInsurancePlan(contractNumber);
}
}
function upadteEstimate(DateStart){
document.getElementById("est").value = DateStart;
M.updateTextFields();
}
function upadteEstimate1(DateExpiry){
document.getElementById("est1").value = DateExpiry;
M.updateTextFields();
}
function upadteEstimate2(InsurancePlan){
document.getElementById("est2").value = InsurancePlan;
M.updateTextFields();
}
</script>
I have tried a lot of things without success. If someone could give me some tips or advise, It will help a lot...
Thank you
J

JavaScript and HTML doesn't show me form validation

as soon as I started doing a site. I did what I did before I got to js.
I have a form and I want to validate it all, I wrote the code for a validation but it does not display my validation, there is no error in js console. So.
Here's the code for form;
<body>
<div class ="container">
<div class="card mx-auto" style="width: 30rem;">
<div class="card-header">Register</div>
<div class="card-body">
<form name="form_register" onsubmit="return false" autocomplate="off">
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" class="form-control" id="username" placeholder="Enter username">
<small id="user_error" class="form-text text-muted"></small>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
<small id="email_error" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="password1" placeholder="Password">
<small id="pass_error" class="form-text text-muted"></small>
</div>
<div class="form-group">
<label for="exampleInputPassword2">Re-enter Password</label>
<input type="password" class="form-control" id="password2" placeholder="Re-enter Password">
<small id="pass1_error" class="form-text text-muted"></small>
</div>
<div class="form-group">
<label for="exampleFormgender">Gender</label>
<select class="form-control" id="gender">
<option>Male</option>
<option>Female</option>
</select>
<small id="gender_error" class="form-text text-muted"></small>
</div>
<div class="form-group">
<label for="exampleFormgrade">Grade</label>
<select class="form-control" id="grade">
<option>Admin</option>
<option>User</option>
</select>
<small id="grade_error" class="form-text text-muted"></small>
</div>
<br/>
<button type="submit" name="submit" id="submit" class="btn btn-primary"><i class="fa fa-user"> </i>Register</button>
<span>Login</span>
</form>
</div>
</div>
</div>
<br/>
</body>
and here is the js code.
$(document).ready(function(){
$("#form_register").on("submit",function(){
var status = false;
var name = $("#username");
var email = $("#email");
var pass1 = $("#password1");
var pass2 = $("#password2");
var genderx= $("#gender");
var type = $("#grade");
// var n_patt = new RegExp(/^[A-Za-z]+$/);
var e_patt = new RegExp(/^[a-z_-0-9_-]+(\.[a-z0-9_-]+)*#[a-z0-9_-]+(\.[a-z0-9_-]+)*(\.[a-z]{2,4})$/);
if (name.val() == "" || name.val().length < 2){
name.addClass("border-danger");
$("user_error").html("<span class='text-danger'>Please enter the name</span>");
status = false;
}else{
name.removeClass("border-danger");
$("user_error").html("");
status = true;
}
})
})
I can not see where the problem is, I do not know. Maybe it's not good the HTML code written or js. I really do not know, I tried .. I still wrote and rewritten .. and nothing.
Also, in the head, I put the location for js (main.js) and links for bootstrap, ajax, jquery.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Register</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript"src="./js/main.js"></script>
</head>

In Jquery, when you use $("#form_register") it looks for the element on your HTML with the id "form_register" because you placed a #, it doesn't matter that your form has that name, it should also have an id with that name if you want to use like that.
<form id="form_register" onsubmit="return false" autocomplate="off">
Also your Regex has a mistake, you can test it in some webistes like regex101. I currently fixed the error on your Regex, but I don't know if it works as you expect it.
Here's the Regex:
^[a-z_0-9_-]+(\.[a-z0-9_-]+)*#[a-z0-9_-]+(\.[a-z0-9_-]+)*(\.[a-z]{2,4})$

Javascript in HTML forms, Accumulating Total Realtime

I have a bit of a problem with my HTML and JAVASCRIPT Combination.
I'm trying to create a page where I am able to add values by a certain parameter. It's it in this picture of how it would work.
The whole page:
Here's my code to this overall HTML Page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Naawan Receipt System</title>
<link rel="stylesheet" href="static/header-second-bar.css">
<link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>
</head>
<body>
<header class="header-two-bars">
<div class="header-first-bar">
<div class="header-limiter">
<h1>Municipality<span>Receipt</span></h1>
<nav>
FORM
LOGS
QUERY
USER
</nav>
Logout
</div>
</div>
<div class="header-second-bar">
<div class="header-limiter">
<h2>User: {{ user }}</h2>
<nav>
<i class="fa fa-comments-o"></i> Nature of Collection
<i class="fa fa-file-text"></i> Results
<i class="fa fa-group"></i> Participants
<i class="fa fa-cogs"></i> Settings
</nav>
</div>
</div>
</header>
<!-- CONTENT HERE. -->
<link rel="stylesheet" href="static/indextest.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="static/indextest.css">
<link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>
<div class="jumbotron jumbotron-sm">
<div class="container" id = "contact">
<div class="row">
<div class="col-sm-12 col-lg-12">
<h1 class="h1">
Accountable Form 51 <small>Made easier</small></h1>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12" style="display: inline-block;">
<div class="well well-sm">
<form>
<div class="row">
<div class="col-md-6" style="display: inline-block; ">
<div class="form-group">
<label for="name">
O.R Number</label>
<input type="text" class="form-control" id="name" placeholder="Enter O.R Number" required="required" />
</div>
<div class="form-group">
<label for="email">
Payor</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span>
</span>
<input type="text" class="form-control" name = "payor" id="payor" placeholder="Enter Full Name" required="required" /></div>
</div>
<div class="form-group">
<label for="subject">
Nature of Payment</label>
<div id="RadioGroup">
<br>
<input type="radio" name="paymentmethod" checked="checked" value="CASH"> Cash<br>
<input type="radio" name="paymentmethod" value="CHECK"> Check<br>
<div id="PaymentsCHECK" class="desc" style="display: none;">
<br>
Drawee Bank<input type="text" name="dbank">
Number<input type="text" name="dNum">
Date<input type="text" name="dDate">
</div>
<input type="radio" name="paymentmethod" value="MONEY"> Money Order<br>
<div id="PaymentsMONEY" class="desc" style="display: none;">
<br>
<input type="text" name="dbank">Money Order No.
</div>
</div>
</div> <!-- FORM GROUP END -->
<div class="form-group">
<label for="name">
Memo</label>
<textarea name="message" id="message" class="form-control" rows="5" cols="25" required="required"
placeholder="Message"></textarea>
</div>
</div><!-- FIRST COL6 END -->
</div><br><br><br><br><!-- ROW END -->
<div class="col-md-5" style="display: inline-block; ">
<div class="jumbotron">
<h2>Type in Nature of Collection...</h2>
<form>
<input class="form-control input-lg" id="form" list="languages" placeholder="Search" type="text" required>
<br>
<input class="form-control input-lg" id="amount" list="languages" placeholder="Amount" type="number" required>
<br>
<button onclick="addRow(); return false;">Add Item</button>
</form>
<datalist id="languages">
{% for row in rows %}
<option value = "{{row[0]}}">
{% endfor %}
</datalist>
</div> <!-- JUMBO END -->
<h6> <label>Date:<span></span>
</label> {{date}}</h6>
<h3><fieldset disabled>
<label>Total </label>
<input type = "text" name = "total" id="total"><br></p>
</fieldset></h3>
</div><!-- COL5 END -->
<!-- </div> --><!-- REMAIN OR NOT? DEPENDS ON DEBUG PROCESS LATER -->
<div class="col-md-6" style="display: inline-block;">
<div class="jumbotron">
<h2>Nature of Collection</h2>
</div>
<div>
<!-- ACCUMULATION TABLE STARTS -->
<table id="datatable" class="table table-striped table-bordered" cellspacing="0" width="100%">
<tr>
</tr>
<tbody>
</tbody>
</table>
<!-- </form> --> <!-- CHECK LATER -->
<datalist id="languages">
{% for row in rows %}
<option value={{row[0]}}></option>
{% endfor %}
</datalist>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-primary pull-right" id="btnContactUs">
Submit Form</button>
<br>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript">
/*EDIT HERE LATER*/
$(document).ready(function() {
$("input[name$='paymentmethod']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#Payments" + test).show();
});
});
</script>
<script type="text/javascript">
function deleteRow(o){
var p=o.parentNode.parentNode;
p.parentNode.removeChild(p);
}
function addRow()
{
var table = document.getElementById("datatable"),
newRow = table.insertRow(table.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
name = document.getElementById("form").value,
amount = document.getElementById("amount").value;
delete1 = delete1 = '<input type="button" class="btn btn-danger" class="glyphicon glyphicon-trash"id="delete" value="Delete" onclick="deleteRow(this)">';
cell1.innerHTML = name;
cell2.innerHTML = amount;
cell3.innerHTML = delete1;
}
</script>
<script type="text/javascript">
function findTotal(){
var arr = document.getElementsByName('qty');
var tot=0;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('total').value = tot;
}
</script>
</body>
</html>
So I am done in that part, this time I wanted to add the values of each amount added and display it real-time on the Total inputbox. So I put an id to the cell which the amounts will be generate in the javascript:
Before:
function addRow()
{
var table = document.getElementById("datatable"),
newRow = table.insertRow(table.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
name = document.getElementById("form").value,
amount = document.getElementById("amount").value;
delete1 = delete1 = '<input type="button" class="btn btn-danger" class="glyphicon glyphicon-trash"id="delete" value="Delete" onclick="deleteRow(this)">';
cell1.innerHTML = name;
cell2.innerHTML = amount;
cell3.innerHTML = delete1;
}
After:
function addRow()
{
var table = document.getElementById("datatable"),
newRow = table.insertRow(table.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
name = document.getElementById("form").value,
amount = document.getElementById("amount").value;
delete1 = delete1 = '<input type="button" class="btn btn-danger" class="glyphicon glyphicon-trash"id="delete" value="Delete" onclick="deleteRow(this)">';
cell1.innerHTML = name;
cell2.innerHTML = amount;
cell2.id = "qty
cell3.innerHTML = delete1;
}
"qty" here will match the ID's of all entry on cell 2 and will add it and will display it on the id total.
But when I do this the value box at the top side pops out an error:
It prompts me to enter a value on the unrelated boxes.
I also tried separating them by forms but it didn't work.
I tried this on the other forms I have and its working, I was just using a checkbox plus textbox, however on this page I am unable to do it. What should I do on this case?
A checklist just to be clear:
I generated ID's for each cell added
I used that ID to evaluate on a javascript script
The accumulated total was supposed to go to the ID "total" but it didn't happen.
I already tried separating the forms, but this time it only reloaded and the entries weren't added.
I have a separate button for saving all fields named "Submit Form"
Any input or ways how to do this in your opinion?

The reason you're getting this error is due to nested forms, which are not a constructed supported by browsers. Make sure you close your first form before starting the new one - then validation won't cross-contaminate.
To be clear, this has nothing to do with the way you're totalling your values (though that has some issues to be resolved on its own, e.g. you're accessing the value of your elements, while you've never set it - instead you want to be getting their innerHtml).