I have the following 3 inputs: Length, Width, Height.
Using javascript I need to compute the area of a cube, but before that I can't event get the fucntion to work when I press the button "CALCULEAZA". How can I make the "calculeaza" function work?
<div class="col-sm-4">
<div class="row">
<h3>Calculator de Folie</h3>
<form>
Lungime:<br>
<input type="text" name="firstname" id="lungime"><br>
Latime:<br>
<input type="text" name="lastname" id="latime"><br>
Inaltime:<br>
<input type="text" name="lastname" id="inaltime"><br>
<button id="submit" onclick="calculeaza()" style="margin- top:5%;">CALCULEAZA</button>
</form>
</div>
<div class="row container fluid">
<h1 id="value-zone"><span id="value">100</span>m2</h1>
</div>
</div>
<div class="col-sm-4">
<h3>Seminte Demetra CR</h3>
</div>
</div>
</div>
<script>
$(document).ready(function() {
document.getElementById('value-zone').hidden = true;
});
function calculeaza(){
var x = parseFloat(document.getElementById('lungime').value);
var y = x/2;
console.log("aaaaaa");
document.getElementById('value-zone').hidden = false;
}
</script>
I also know that using scripts in the same file is not ok, but I am going to modify it after I undertand how it works. It is my first JS 'thing' I do. Thank you in advance!
Use e.preventDefault() to not redirect on click of submit button. Otherwise the code is running fine.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4">
<div class="row">
<h3>Calculator de Folie</h3>
<form>
Lungime:<br>
<input type="text" name="firstname" id="lungime"><br>
Latime:<br>
<input type="text" name="lastname" id="latime"><br>
Inaltime:<br>
<input type="text" name="lastname" id="inaltime"><br>
<button id="submit" onclick="calculeaza()" style="margin- top:5%;">CALCULEAZA</button>
</form>
</div>
<div class="row container fluid">
<h1 id="value-zone"><span id="value">100</span>m2</h1>
</div>
</div>
<div class="col-sm-4">
<h3>Seminte Demetra CR</h3>
</div>
</div>
</div>
<script>
$(document).ready(function() {
document.getElementById('value-zone').hidden = true;
});
function calculeaza(){
var x = parseFloat(document.getElementById('lungime').value);
var y = x/2;
console.log("aaaaaa");
document.getElementById('value-zone').hidden = false;
}
$("#submit").click((e)=>{e.preventDefault()})
</script>
change your button to:
<button id="submit" type="button" onclick="calculeaza()" style="margin- top:5%;">CALCULEAZA
by default, the button is of type SUBMIT, which will submit the form. You can use javascript to disable the function or simply make a minor change to your button.
Perhaps something like this:
<div class="col-sm-4">
<div class="row">
<h3>Calculator de Folie</h3>
<div class="form-group">
<label class="col-form-label" for="length">length</label>
<input type="number" class="form-control" id="length">
</div>
<div class="form-group">
<label class="col-form-label" for="width">width</label>
<input type="number" class="form-control" id="width">
</div>
<div class="form-group">
<label class="col-form-label" for="height">height</label>
<input type="number" class="form-control" id="height">
</div>
<button onclick="calculeaza()" style="margin-top:5%;">CALCULEAZA</button>
</div>
<div class="row container fluid">
<h1 id="value-zone"><span id="value">100</span>m2</h1>
</div>
</div>
<script>
document.getElementById('value-zone').hidden = true;
// calculates the surface area of a cuboid and updates #value with the answer
function calculeaza() {
var l = parseFloat(document.getElementById('length').value);
var w = parseFloat(document.getElementById('width').value);
var h = parseFloat(document.getElementById('height').value);
if (!isNaN(l) && !isNaN(w) && !isNaN(h)) {
document.getElementById('value-zone').hidden = false;
document.getElementById('value').innerHTML = 2*(l*w + w*h + l*h);
}
}
</script>
Removed the <form> and used bootstrap's "form-groups" instead. No jquery needed for this since it seems you use document.getElementById anyways.
Related
I'm trying to select a form element in javascript using the querySelector but it won't work and sometime it returns the form element.
Here's my code:
JavaScript
const ele = document.querySelector('form');
console.log(ele);
ele.addEventListener('submit', function(e) {
console.log("in the eventlister function");
const pass = document.getElementsByClassName("P")[0].value;
const cpass = document.getElementsByClassName("CP")[0].value;
const messagePara =document.getElementById("generated_message");
if(pass != cpass){
e.preventDefault();
messagePara.textContent ="check your password!!";
messagePara.style.color= 'red';
return false;
}
else{
messagePara.textContent ="";
}
});
HTML
<form class="inputF">
<div class="inputD">
<label for="fname" >Full Name</label>
<input type="text" id="fname" required>
</div>
<div class="inputD">
<label for="uname">Username</label>
<input type="text" id="uname">
</div>
<div class="inputD">
<label>Email address</label>
<input type="email" id="Email" placeholder="example#gmail.com" required >
</div>
<div class="inputD">
<label for="phn">Phone Number</label>
<input type="number" id="phn">
</div>
<div class="inputD">
<label for="pass">Password</label>
<div class="pass">
<input type="password" class="P IptP" required>
<i class="fa fa-eye-slash show-hide"></i>
</div>
</div>
<div class="inputD">
<label for="cpass">Confirm Password</label>
<div class="pass">
<input type="password" class="CP IptP" required>
<i class="fa fa-eye-slash show-hide"></i>
</div>
</div>
<div>
<button id="save_btn" >Continue</button>
</div>
</form>
I tried adding class for the form and select the form using the ClassName but still the same problem occurred. How can I fix this problem ?
When manipulating the DOM with a <script> in the <header>, you'll want to wait until the document has loaded.
document.body.addEventListener('load',function(){
// Your DOM sensitive code here
});
otherwise, you might want to include your script after the form tag
<!DOCTYPE html>
<html>
<!-- Your header; moving your script from here -->
<body>
<!-- Your form here -->
<!-- Move script here-->
<script>
// DOM sensitive code here as the last element in the body
</script>
</body>
How can I get this search form and the Search Button to disappear from the page, since it will be replaced by a Thank you message?
<div class="row">
<div class="col">
<!-- ## SEARCH FORM ------------------------------------------------ -->
<form id="search-form" class="form-inline" onsubmit="handleFormSubmit(this)">
<div class="form-group mb-2">
<label for="searchtext">Enter your email</label>
</div>
<div class="form-group mx-sm-3 mb-2">
<input type="text" class="form-control" style='width:310px' id="searchtext" name="searchtext" placeholder="Search Text">
</div>
<button type="submit" class="btn btn-primary mb-2">Search</button>
</form>
<!-- ## SEARCH FORM ~ END ------------------------------------------- -->
</div>
</div>
I was trying something like:
//HANDLE FORM SUBMISSION
function handleFormSubmit(formObject) {
google.script.run.withSuccessHandler(createTable).processForm(formObject);
}
function saveData() {
var searchForm = document.getElementById('search-form')
var page = document.getElementById("page");
var table = document.getElementById("dtable");
//document.getElementById("search-form").reset();
page.innerHTML = "";
search-form... = ""//????
table.innerHTML = "<h4>Thank you!</h4>";
}
You have onsubmit="handleFormSubmit(this) so you better to add your <h4>Thank you!</h4> code inside of handleFormSubmit(), but anyway, you may do it like this:
<div class="row">
<div class="col">
<form id="search-form" class="form-inline" onsubmit="handleFormSubmit(this)">
<div class="form-group mb-2">
<label for="searchtext">Enter your email</label>
</div>
<div class="form-group mx-sm-3 mb-2">
<input type="text" class="form-control" style='width:310px' id="searchtext" name="searchtext" placeholder="Search Text">
</div>
<button type="submit" class="btn btn-primary mb-2" id="searchButton" onclick="saveData();">Search</button>
</form>
</div>
</div>
<script type="text/javascript">
function insertAfter(newNode, existingNode) {
existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
}
function saveData() {
var searchForm = document.getElementById('search-form');
var searchButton = document.getElementById("searchButton");
var thankYouDiv = document.createElement('div');
thankYouDiv.innerHTML = "<h4>Thank you!</h4>";
insertAfter(thankYouDiv, searchForm.lastElementChild);
}
</script>
var searchForm = document.getElementById('search-form');
var page = searchForm.parentElement;
// Set new result
page.innerHTML =
I'm using http://autonumeric.org/ or https://github.com/autoNumeric/autoNumeric/blob/master/README.md
How to fix
When I use JS function to calculate the sum total appear, but not as formatted AutoNumeric as I want it to be
When mouse hover the calculated field, it disappears
var taxRate = 0.10
function calculateAmount() {
var elemsAmount = document.getElementsByName("tAmount")
var total = 0
elemsAmount.forEach(function(e){
total += Number(e.value.replace(',',''))
})
document.getElementById("total").value = total
document.getElementById("tax").value = total*taxRate
document.getElementById("finalTotal").value = total+total*taxRate
}
document.getElementById("tableBox").addEventListener("change",calculateAmount)
new AutoNumeric.multiple('[contenteditable="true"]', 'dotDecimalCharCommaSeparator')
<script src="https://unpkg.com/autonumeric" type="text/javascript"></script>
<div id="tableBox">
<div name="tableRow">
<div class="col s3">
<div class="input-field">
<input type="text" name="tAmount" contenteditable="true">
<label>input</label>
</div>
</div>
</div> <!-- name tableRow -->
<div name="tableRow">
<div class="col s3">
<div class="input-field">
<input type="text" name="tAmount" contenteditable="true">
<label>input</label>
</div>
</div>
</div> <!-- name tableRow -->
</div> <!-- id tableBox -->
Auto JS Calculation fields
<div class="input-field">
<input type="text" id="total" contenteditable="true">
<label for="total">Total</label>
</div>
<div class="input-field">
<input type="text" id="tax" contenteditable="true">
<label for="tax">Tax</label>
</div>
<div class="input-field">
<input type="text" id="finalTotal" contenteditable="true">
<label for="finalTotal">Final Total</label>
</div>
Expect output #,###.##<br>
Also the problem is when mouse hover on the Calculation field, it disappears
Thank you in advance
You should initialise and save the Autonumeric fields and use the Autonumeric API to update the value using .set().
You can do the same with the input fields and use .getNumber() to do your calculations.
As far as I know you can safely remove the contenteditable="true" attribute from <input/> elements — these are designed to be "editable".
const taxRate = 0.10
const config = 'dotDecimalCharCommaSeparator'
const totalInput = new AutoNumeric('#total', config)
const taxInput = new AutoNumeric('#tax', config)
const finalTotalInput = new AutoNumeric('#finalTotal', config)
const elemsAmount = new AutoNumeric.multiple('[name="tAmount"]', config)
const tableBox = document.getElementById('tableBox')
function calculateAmount() {
let total = 0
elemsAmount.forEach(function(e) {
total += e.getNumber()
})
totalInput.set(total)
taxInput.set(total * taxRate)
finalTotalInput.set(total + total * taxRate)
}
tableBox.addEventListener('change', calculateAmount)
<script src="https://unpkg.com/autonumeric" type="text/javascript"></script>
<div id="tableBox">
<div name="tableRow">
<div class="col s3">
<div class="input-field">
<input type="text" name="tAmount">
<label>input</label>
</div>
</div>
</div>
<div name="tableRow">
<div class="col s3">
<div class="input-field">
<input type="text" name="tAmount">
<label>input</label>
</div>
</div>
</div>
</div>
Auto JS Calculation fields
<div class="input-field">
<input type="text" id="total">
<label for="total">Total</label>
</div>
<div class="input-field">
<input type="text" id="tax">
<label for="tax">Tax</label>
</div>
<div class="input-field">
<input type="text" id="finalTotal">
<label for="finalTotal">Final Total</label>
</div>
I am using local storage to save the username in the first-page.html and retrieving it into the second-page.html
But if I have two or more places in my second-page.html where I want the username to be retrieved, how can I achieve it using two different ids. Since the id once used cannot be used in another input field.
Can anyone please help.
Index.html:
<script>
function save(){
var fieldValue = document.getElementById('user').value;
localStorage.setItem('text', fieldValue);
}
</script>
<div class="form-group" id="login-fields">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"><span class="text--white glyphicon glyphicon-user"></span></i>
</span>
<input type="text" name="user" id="user" placeholder="Username" class="form-control" required/>
</div>
</div>
</div>
<input class="view sign-in-app" type="submit" value="Sign In" id="submit-login" onclick="save()" />
SecondPage.html
<script>
function load(){
var storedValue = localStorage.getItem('text');
if(storedValue){
document.getElementById('here').value = storedValue;
}
}
</script>
<body onload="load()">
<!-- first div -->
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<input type="text" name="userName" id="here" class="form-control" placeholder="Username" required>
</div>
</div>
</div>
<!-- second div -->
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group"> // change the id here
<input type="text" name="userName" id="here" class="form-control" placeholder="Username" required>
</div>
</div>
</div>
</body>
Just give each element different ids, really. No problem with that. And then when you set, set both:
if (storedValue) {
document.getElementById('here').value = storedValue;
document.getElementById('my-other-id').value = storedValue;
}
$(document).ready(function() {
$('form').submit(function() {
var principle = $("#principle").val();
var rate = $("#rate").val();
var time = $("#time").val();
var interest = principle * rate * time / 100;
interest = $("p").append(interest);
return false;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="table commonTable">
<div class="row">
<div class="cell">
<label for="P">Principal (P): $</label>
</div>
<div class="cell">
<input name="P" id="principle" value="10,000.00" class="nmbr_real real" type="text" title="positive real number" placeholder="amount" required="" />
</div>
</div>
<div class="row">
<div class="cell">
<label for="R">Rate (R): %<br />
<span class="note small">per year</span></label
>
</div>
<div class="cell">
<input
name="R"
id="rate"
value="3.875"
class="nmbr_real real"
type="text"
title="positive real number"
placeholder="rate"
required=""
/>
</div>
</div>
<div class="row">
<div class="cell">
<label for="t">Time (t):</label>
</div>
<div class="cell">
<input name="t" id="time" value="5" class="nmbr_real real" type="text" title="0 or positive real number" placeholder="#" required="" />
</div>
</div>
</div>
<button>Calculate</button>
</form>
just create inputbox
<input type="text" id="abc" name="price" value="" />
and use below code for insert value in inputbox
jQuery(document).ready(function($) {
$("#abc").val('100');
});
If you want to get the output in input box the use val() function.
$("input").val(interest);
If you want to get the output in HTML element the use html() function.
$("p").html(interest);
For setting a value in textbox use val()
$('#abc').val('13');
For setting a value in 'p' use text()
<p id='p_Id'></p>
$('#p_Id').text('13');