We Keep Coding

Updating one value in angular model according to another input

Say I have a model in angular, with three variables in my model, say a,b,c, and I want to have c=a*b.
I've done it by adding a function, updateC(), that updates c, and then my HTML would look like this:
<input name="a" ng-model="a" ng-change="updateC()"></input>
<input name="b" ng-model="b" ng-change="updateC()"></input>
<input name="c" ng-model="c" readonly></input>
But that's not a nice solution if I have alot of such triplets, because I need to define a function for each such triplet. Is there a way to bind the value of the element in the model to some formula?
I.e. is there some attribute ng-like-bind-but-updates-model such that the following html will work:
<input name="a" ng-model="a"></input>
<input name="b" ng-model="b"></input>
<input name="c" ng-model="c" ng-like-bind-but-updates-model="a*b" readonly></input>

This seems to work, not sure if that's what you want to achieve:
<input name="a" ng-model="a"></input>
<input name="b" ng-model="b"></input>
<input name="c" value="{{c=a*b}}" readonly></input>

Here's a nice trick that solves your problem:
<input name="c" ng-model="c = a * b" readonly />
demo

you can simply bind the value of input C
<input name="c" value="{{c=a*b}}"></input>
<label>{{c}}</label>
like this:
http://codepen.io/Visualife/pen/xwNKjj
you'll need to handle initial values though for a & b.

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">

Copy input value text and paste/add to another input value text?

I want to copy this input from page A and paste to page B
Let say this is Page A :
<input type="text" class="Name" id="cName" Value="Hey" readonly/>
<input type="number" class="Qty" id="cQty" Value="1" readonly/>
<input type="text" class="Price" id="cPrice" Value="10" readonly/><button class="" id="copy">Copy/?Add to Page B?</button>
This is Page B:
<ol><button class="" id="add">Add</button>
<li>
<input type="text" class="Name" id="pName" Value="" readonly/>
<input type="number" class="Qty" id="pQty" Value="" />
<input type="text" class="Price" id="pPrice" Value="" readonly/><button class="" id="cancel">Cancel</button>
</li><input type="text" class="Name" id="" Value="" readonly/>
<input type="number" class="Qty" id="tQty" Value="Total Quantity" readonly/>
<input type="text" class="Price" id="tPrice" Value="Total Price" readonly/></ol>
I read that I can't copy and paste, so is there another way of it? like adding Page A input text straight to Page B input text, like "add to shopping carts?"
Thanks for all the expert here.

If you have no option to use server-side programming, such as PHP, you could use the query string, or GET parameters.
In the form, add a method="GET" attribute:
<form action="b.html" method="GET">
<input type="text" name="serialNumber" />
<input type="submit" value="Submit" />
</form>
When they submit this form, the user will be directed to an address which includes the serialNumber (for example) value as a parameter. Something like:
http://www.example.com/display.html?serialNumber=XYZ
You should then be able to parse the query string - which will contain the serialNumber parameter value - from JavaScript, using the window.location.search value:
// from b.html
document.getElementById("write").innerHTML = window.location.search; // you will have to parse
// the query string to extract the
// parameter you need
See also JavaScript query string.
The alternative is to store the values in cookies when the form is submit and read them out of the cookies again once the b.html page loads.
See also How to use JavaScript to fill a form on another page.

You can take this value either by form post method or use browser cookies and very easy to implement.
And the methods varies as per your programming language.

jQuery selector for selecting an input field with a class

I have
<input type="text" class="required" value="XXX" name="abc">
<input type="hidden" class="required" value="XXX" name="abcd">
<input type="text" class="required" value="XXX" name="abcef">
i have many input fields like this.
i need a jQuery selector where i can select a text field whose class is required
right now to select textfield i use $(':input[type="text"]')
how do i also put a condition to select class="required."
EDIT
so say now i have the following input fields
<div id="validate_info">
<input type="text" class="required" value="XXX" name="abc">
<input type="hidden" class="required" value="XXX" name="abcd">
<input type="text" class="required" value="XXX" name="abcef">
<input type="password" class="required" value="XXX" name="abcefg">
<input type="text" value="XXX" name="abcefgsa">
<input type="password" value="XXX" name="abcsaefg">
</div>
i need one selector that can select all type="text", type="password" which has class="required"
i tried
$('#validate_info $("input.required").filter("[type="password"],[type="text"]")');
but this doesnt seem to work.

$(':input.required[type="text"]')
EDIT:
This will be slightly faster:
$('input.required[type="text"]')
Note:
:input will get all form elements (<select>, <textarea>, etc.)
input will only get <input> elements, and is slightly faster.

$('.required:input[type="text"]')
(also $('input.required[type="text"]'))

$(':input[type="text"][class="required"]')
That should work
http://jsfiddle.net/ck8wt/
Edit
lol ... I couldn't see the forest through the trees. :P I'll leave mine up too though just as an illustration of how many ways this can be done. XD

If you just add the class to your selector, it should do what you are looking for.
$('.required:input[type="text"]')

JQuery validate plugin - can't validate classes

I'm trying to use the jQuery validate plugin to validate classes instead of ID's. Despite the many threads which seem close to answering this issue - I can't get any of them to work. I simply have a form that has a lot of dynamically generated repeating form fields, so naturally I can't add rules for the ID's because there's no knowing how many of them there will be. So, instead, I would like to just target the class on the input field.
<input type="text" id="name1" class="fileName" />
<input type="text" id="name2" class="fileName" />
<input type="text" id="name3" class="fileName" />
<input type="text" id="name4" class="fileName" />
How do I target 'fileName' class? I've tried this:
$(document).ready(function(){
$.validator.addClassRules({
fileName:{
required: true
}
});
$("#myForm").validate();
});
But this does not work at all :(
Any ideas? Anyone?

You need to specify a name attribute on each input element for validator to pick it up:
<form action="#">
<input type="text" id="name1" class="fileName" name="name1" />
<input type="text" id="name2" class="fileName" name="name2"/>
<input type="text" id="name3" class="fileName" name="name3"/>
<input type="text" id="name4" class="fileName" name="name4"/>
</form>
Here's a working example: http://jsfiddle.net/Nbcj9/

According to the docs, this should work:
jQuery.validator.addClassRules('classNameHere', {
required: true
});
Then you can determine whether the fields are valid by calling:
$('.fileName').valid();
Here's a link to the docs

what about:
$(".fileName").validate();