Javascript calculations working in IE only - javascript

I am trying to create a form so that user can enter certain information and JavaScript will do the calculations for them. I've been trying to use http://demo.rsjoomla.com/calculation-form-example (the one on the left) to get the basics started and I can manipulate from there. So far though it's only working in IE.
Here's the basic layout of my code:
HTML
<input type="number" name="income1" value="0" onkeyup="update()">
<input type="number" name="income2" value="0" onkeyup="update()">
<input type="number" name="income3" value="0" onkeyup="update()">
JavaScript
var op1=document.getElementById('income1');
var op2=document.getElementById('income2');
var result=document.getElementById('income3');
if(op1.value=="" || op1.value!=parseFloat(op1.value)) op1.value=0;
if(op2.value=="" || op2.value!=parseFloat(op2.value)) op2.value=0;
result.value=0;
result.value=parseInt(result.value);
result.value=parseInt(result.value)+parseInt(op1.value) - parseInt(op2.value);

You wrote code that is looking for id
document.getElementById('income1');
Where is the id on the input?
<input type="number" name="income1" value="0" onkeyup="update()">
Name is not the same thing as id.
And your parseFloat check, you probably should look at isNaN(). And you are using parseInt() at the bottom, and you are using parseFloat() above!

If you're going to do getElementById, you need to have an ID in your element.
<input type="number" id="income1" value="0" onkeyup="update()">
var op1=document.getElementById('income1');
Or you could use jQuery (requires including jQuery source):
<input type="number" name="income1" value="0" onkeyup="update()">
var op1 = ${"input[name=income1]").val();
Alternatively, you could do this, assuming you only have one element named income1. This isn't a very good way to do this, but it should work.
<input type="number" name="income1" value="0" onkeyup="update()">
var op1=document.getElementsByName('income1')[0];

Related

How to replace "undefined" with zero value in javascript or form to pass to spring-mvc controller?

I am creating with a mouse event two float values in a javascipt jquery function and pass these values via form to a spring mvc controller as parameters. It works fine when the values get actually created but when I do not create them, the form passes a string "undefined" and the whole thing crashes.
my javascript values:
$('#width').val(event.pageX);
$('#height').val(event.pageY);
my form:
<form:form modelAttribute="Float2" method="POST" action="getFloats">
<input type="hidden" id="width" name="width" value=width>
<input type="hidden" id="height" name="height" value=height>
<button type="submit">Save the floats</button>
Is there a possibility to change the "undefined" to zero so that the form always passes floats?
Well, one option is to create html input tags already with the default values:
<input type="hidden" id="width" name="width" value="0">
<input type="hidden" id="height" name="height" value="0">
Then alter this values with JS if you need, otherwise default "0" values will be submitted

Identical ID's in the same HTML page

I have a page that has two different inputs that contain same ID but each one in different form. and I'm actually setting values to inputs from javascript using get element by ID. I know this is not valid. but the thing is if i change one of the input id's I'm gonna need to re write a bunch of code in 'shopping cart ' cuz these input's pass value to cart. I'm actually not planning to touch that for now. So, is there any trick that can target one input instead of the other even if they have the same id's??
ex:
<input type="hidden" name="cart_1_ID_Add2" id="cart_1_ID_Add2" value=""/>
<input type="hidden" name=cart_1_ID_Add2" id="cart_1_ID_Add2" value=""/>
thanks in advance!!
Although it is a wrong practice, and you should use different id's, you could add a different class attribute to each one.
<input class="input1" type="hidden" name="cart_1_ID_Add2" id="cart_1_ID_Add2" value=""/>
<input class="input2" type="hidden" name=cart_1_ID_Add2" id="cart_1_ID_Add2" value=""/>
var x = document.getElementsByClassName("input1")[0];
Again: I strongly recommend you to find time to change the logic of your program to use unique id's.
If they are in different forms you can target them by selecting IDs where they are inside a certain class. You can also change the name attribute and select that instead.
HTML
<div class="form1">
<input type="hidden" name="rename1" id="cart_1_ID_Add2" value="">
</div>
<div class="form2">
<input type="hidden" name="rename2" id="cart_1_ID_Add2" value="">
</div>
JS
$(".form1 #cart_1_id_add2")
//Or
$("input[name*='rename1']")
However you shouldn't really have the same id twice on one page otherwise it makes it hard to maintain and debug. If it's not a huge job to change your approach I'd recommend you do that.
Add another attribute to one or both tags.
For example, you can make them
<input type="hidden"name="cart_1_ID_Add2" id="cart_1_ID_Add2" data-id="add100" class="myInput" value=""/>
<input type="hidden" name=cart_1_ID_Add2" id="cart_1_ID_Add2" data-id="add101" class="myInput" value=""/>
Then get their values with jQuery
var myInput = $('[data-id=add100]').val();
console.log(myInput);
OR use plain javascript by adding a class and getting the value
var myVal = document.getElementsByClassName("myInput")[0];
console.log(myVal.value);
Hope this helps
Yes.
That code shouldn't have duplicate id properties in Dom btw.
You can use a custom HTML element property:
<input type="hidden" name="cart_1_ID_Add2" id="cart_1_ID_Add2" value="" my-property="some_identifier"/>
<input type="hidden" name=cart_1_ID_Add2" id="cart_1_ID_Add2" value="" my-property="some_identifier2"/>

calculation in angularjs output fails with ng-model

I'm working on an angular project where i perform calculations on the page. In the textfield where i put the final results, when i get it an ng-model that answer fails to load. When i take out the ng-model, the answer appears.
But i want it working while it have an ng-model="total" because i will send the total value to the database. With the below script, it works
<input name="price" type="text" id="price" ng-model="price">
<input name="quantity" type="text" id="quantity"ng-model="price">
<input name="total" type="text" id="total" value="{{.price*quantity}}">
But with this
<input name="price" type="text" id="price" ng-model="price">
<input name="quantity" type="text" id="quantity"ng-model="price">
<input name="total" type="text" id="total" value="{{.price*quantity}}" ng-model="total">
it fails to works. The answer doesn't appear in the textbox
Try this instead:
<input name="price"
type="text"
ng-model="price" string-to-number>
<input name="quantity"
type="text"
ng-model="quantity" string-to-number>
<span>{{ price * quantity }}</span>
I'm not sure why you're trying to put the calculated value into the 3rd input, but if you are, you'll want to use ng-model-options to tell the total ngModel that it's to treat that value as a getter/setter - https://docs.angularjs.org/api/ng/directive/ngModelOptions
Also note the string-to-number directive. You're dealing with strings in the input. So in order for interpolation to work, you may need to add those.
edit
here is a working example of how I think you were trying to allow an override on the calculated value. You can enter another value in the total input and hit enter to see it working. This uses the ng-model-options - http://codepen.io/jusopi/pen/XKQzzv

Custom validation in HTML5 for numbers CVC CVV

How to provide a custom validation for a number using HTML5
HTML
<input class="required" id="field" type="number" maxlength="3" pattern="([0-9]|[0-9]|[0-9])" name="cvv"/>
Here it is allowed to type in only one number. But max length doesn't work here.
Is there another solution ?
use max attribute of the input number
<input class="required" id="field" type="number" max="999" pattern="([0-9]|[0-9]|[0-9])" name="cvv"/>
or even without pattern as
<input class="required" id="field" type="number" max="999" min="-999" name="cvv"/>
As per the documentation, the maxlength works only if the value of the type attribute is text, email, search, password, tel, or url. I suggest you should use javascript validations for this particular case.
For a very simple example please refer to this link.

How to add attribute to HTML element using javascript

Using javascript (preferably not jquery) I'm trying to change the line:
<input type="number" name="price" required="" id="id_price">
into
<input type="number" name="price" required="" id="id_price" step="any">
I know the solution's got to be easy but I just can't crack it. Help would be much appreciated!!
As torazaburo suggests in the comment you can do it in one step with setAttribute() method
document.getElementById("id_price").setAttribute("step","any");
<input type="number" name="price" required="" id="id_price">
OR
First create the attribute and set the value. Then add it to the element..
var attr = document.createAttribute('step');
attr.value="any";
document.getElementById("id_price").setAttributeNode(attr);
<input type="number" name="price" required="" id="id_price">

Categories