Javascript getElementById("string").value for HTML form input - javascript

I want to add the user input values for rounds 1 and 2 when you press the calculate button but it's not retrieving the values of the input fields i'm "getting by id".
My script.js doc is linked to at the bottom of the html document already.
I've made some updates to the JS.
https://jsfiddle.net/f7p0swpk/2/
var roundOne = document.getElementById("roundOne").value;
var roundTwo = document.getElementById("roundTwo").value;
function add() {
var total = roundOne + roundTwo;
document.querySelector(".total").textContent = total;
}

Related

JS - Calculate values depending on selected dropdowns

So I have this calculator for money that shows you the amount you enter but in a different money value. (Example dollar to euro)
Here is the HTML:
<b> Exchange money </b> <br> <br>
Enter amount for RSD: <input type="number" name="nbsAmount" id="nbsAmount" size="5"> <br>
<button class="dugme">Calculate</button> <br> <br>
Evro value is: <div class="konacnaEvroVrednost"></div>
Dolar value is: <div class="konacnaDolarVrednost"></div>
Swiss value is: <div class="konacnaSwissrednost"></div>
And here is the JS:
$('.dugme').click(function(){
var broj = document.getElementById('nbsAmount').value;
var evro = broj * 0.0085;
var dolar = broj * 0.0095;
var frank = broj * 0.0096;
$('.konacnaEvroVrednost').text(evro + ' €');
$('.konacnaDolarVrednost').text(dolar + ' $');
$('.konacnaSwissrednost').text(frank + ' Fr');
});
And this works fine. As you can see:
Here is the fiddle:
http://jsfiddle.net/5zvdwtpL/1/
But now I want to change this to work a bit more dynamically.
I want there to be two dropdowns that lets you select the value you want to change from to. Like this:
This is what I got so far: https://jsfiddle.net/7s8g9kLt/2/
The problem is that one input value should be copied to the other input value but with the added value of the currency.
So If I select RSD and set 1200, the other USD, then the other input should display 11.4.
So I am stuck a bit here as to how I can achieve this.
First of all, you have bound myFunction to button onClick Event but you have not defined function with this name. You can see following error in console after clicking button
Uncaught ReferenceError: myFunction is not defined
You will have to define this function:
window.myFunction = function() {...}
or event better, add event listener to button click:
document.getElementById('buttonId').addEventListener('click', function() {...})
To calculate dynamic rates, i would first convert input amount to single currency (for example RSD) and then multiply that value by correct rate.
I've modified your jsFiddle (https://jsfiddle.net/rhj4dgz7/3/) to reflect those changes.
You can create a dictionary with the pair of "id" of dropdown and the conversion rate, also you can give the same id to both drop downs. then you gonna just multiply the value by the rate and add the result to the second input.
var rsd = 1;
var evro = 0.0085;
var dolar = 0.0095;
var frank = 0.0096;
var dict = {
"4":rsd,
"1":evro,
"3":dolar,
"2":frank
}
function myFunction(){
var mvs = document.getElementById('mojaVrednostSelect').value;
var nvs = document.getElementById('novaVrednostSelect').value;
var mv = document.getElementById('mojaVrednost').value;
var nv = document.getElementById('novaVrednost').value;
novaVrednost.value = parseInt(mojaVrednost.value) * dict[nvs]
console.log("Yoooo"+ dict[nvs])
console.log("mvs je" + mvs);
console.log("nvs je" + nvs);
console.log("======");
console.log("mojaVrednost je" + mojaVrednost.value);
console.log("novaVrednost je" + novaVrednost.value);
}
document.getElementById('button').onclick = myFunction
check this fiddle
Hope this helps you

inserting random number into hidden field on submit

Trying to insert a random number into a hidden field in a form using javascript. Not passing any value since SQL error of - doesn't have a default value
var randomNum = '';
randomNum += Math.round(Math.random()*5);
var elem = document.getElementById("randSS").value = randomNum;
<input name="randSS" type="text" id="randSS"/>
Didn't have protected fillable added!

Get all input of form from a html-string with jQuery - No matter which level they are

I want to extract out of an html string all forms and their input fields. In order to do this, I've written the following code:
var html = $.parseHTML("<html><form id="Form1"><div><input name="Input1"></div></form></html>");
$(html).find('form').each(function(e) {
var FormElement = $(this);
$(FormElement).find('input, textarea').each(function(e) {
consolge.log($(this).attr('name') + " is an input field of a form with the the ID: " + $(FormElement).attr('id'));
});
});
Sadly, this extracts only the children input fields of the form. The input fields, which are in a div, which is in a form are not affected by the scanning.
(working example: html -> form -> input)
(not working example: html -> form -> div -> input)
Any suggestions?
Thanks in advance! :)
I have updated your code to use (html).each()
//with multipule forms
var html = jQuery.parseHTML("<html><form id='Form1'><div><input name='Input1'></div></form><form id='Form2'><div><input name='Input2'></div></form></html>");
jQuery(html).each(function(e) {
var id = jQuery(this).attr('id');
jQuery(this).find('input, textarea').each(function(e) {
//that will output for every input and textarea
console.log(jQuery(this).attr('name') + " is an input field of a form with the the ID: " + id );
});
});

How to remember form data that has not been submitted?

How can you make the browser remember what the user typed in the form, which has not yet been submitted and make the page refreshing not affect the data entered?
I have a form in which the user enters a number. Initially the form has 0 by default. I am storing the data in localStorage, so the browser can remember the data. However, when the page is refreshed, the user-entered data disappears and 0 is displayed by default. (still the localStorage data exists for it)
I tried to use jQuery's
$(".formClassName").val(localStorage.getItem(key));
but it does not work. Can anyone give me a piece of advice on this?Thank you in advance.
Edited: My form looks like this:
<form>
<!--There are multiple forms, and the only difference among them is the "name" attribute -->
Enter a number <input type="text" value="0" class"dataEntered" name="****">
<!--The button below saves the data entered in the above form -->
<input type="button" class="savedata" value="Save Value" name="****">
</form>
And I am adding the data to localStorage like below:
//JavaScript
<script>
//Using on because the website retrieves the above form dynamically
$(document).on("click", ".saveData", function(e){
//retrieve the number entered in the form
var userNum = $(this).siblings(".dataEntered").val();
//retrieve the value in name attribute
var thisFormName = $(this).attr("name");
//store the data
localStorage.setItem(thisFormName, userNum);
//Now that the save button has been pressed (not submitted to the
//server yet), and the data is stored in localStorage, I want to
//the page to show the number in userNum even after you refresh the page
//but this does not work.
$(".dataEntered").val(localStorage.setItem(thisFormName));
});
</script>
use cookie:
function addCookie(sName,sValue,day) {
var expireDate = new Date();
expireDate.setDate(expireDate.getDate()+day);
document.cookie = escape(sName) + '=' + escape(sValue) +';expires=' + expireDate.toGMTString();
}
function getCookies() {
var showAllCookie = '';
if(!document.cookie == ''){
var arrCookie = document.cookie.split('; ');
var arrLength = arrCookie.length;
var targetcookie ={};
for(var i=0; i<arrLength; i++) {
targetcookie[unescape(arrCookie[i].split('=')[0])]= unescape(arrCookie[i].split('=')[1]);
}
return targetcookie;
}
addCookie('type','1',1024);
var cookiesample = getCookies();
$(".formClassName").val(cookiesample.type);
cookiesample.type could be remembered unless the cookie is deleted.
Checkout this codepen I have it shows a functional solution to the problem. Also you need to make sure jQuery script checks if the DOM is ready, you can do that by using $(function() { }) a short hand for .ready().
$(function() {
var input = $("[type=text]");
var thisFormName = input.attr("name");
if (localStorage.getItem(thisFormName)) {
var value = parseInt(localStorage.getItem(thisFormName));
input.val(value);
}
$(document).on("click", ".savedata", function(e) {
var userNum = input.val();
localStorage.setItem(thisFormName, userNum);
input.val(localStorage.getItem(thisFormName));
});
});

find the value of the div then PLUS that numeric value to another div

I have 2 div's.
One is SHIPPING and another is TOTAL PRICE.
<div id="tt_shipping_rate_basket">$0.00</div> = SHIPPING
<div class="op_col5_3" align="right" id="tt_total_basket">$897.00</div> = TOTAL PRICE
Also there are 4 inputs for SHIPPING, each adds it's own price in the shipping div..
for example:
input 1 = 10$
input 2 = 20$
so when choosing an input the value in the #tt_shipping_rate_basket is changing ajax to the value of the input... this works great...
The problem is, I do not want 2 divs (one for shipping and one for total price)...
I just want ONE div, called Total Price, and when I choose an input, the value should ADD&CHANGE to the #tt_total_basket instead of tt_shipping_rate_basket...
What I'm trying to do is, GET the value of SHIPPING field (which is ajax populated), GET the value of TOTAL PRICE field, then just ADD shipping to Total Price...
here is what I tried to write but it doesn't seem to work, sorry I'm not to good at programming..
function plus() {
var spTotal = document.getElementById("tt_total_basket");
var spShip = document.getElementById("tt_shipping_rate_basket");
spTotal = spTotal.innerHTML = +spShip;
}
spTotal is the TOTAL PRICE
spShip is the Shipping Price
The result should be (spTotal = spTotal.value + spShip.value)..
Can somebody please help?
Untested, but you get the idea:
var spTotal = document.getElementById("tt_total_basket").innerHTML.replace('$', '');
var spShip = document.getElementById("tt_shipping_rate_basket").innerHTML.replace('$', '');
spTotal = parseFloat(spTotal) + parseFloat(spShip);

Categories