Develop Reference

Get and validate all elements (jquery repeater)

Im working on a project that uses jquery repeater. I need to loop through the inputs elements to make my validations. So, here is an example of an input of my form:
<input name="group-fundos[0][fundo-nome]" placeholder="Nome do Fundo" type="text">
Ans you can see, its like an array. So I need to get all these elements via jquery. How do I do that?
Edit: One other detail. Im using multi-step form. So for each step, I need to loop through its own inputs. The inputs types can be varied: option selects, textfields, textareas, etc..

You could try to retrieve all values by using jQuery [serializeArray] method. For example.
// assuming that your input fields are inside a certain form
var oFormData = $('#multi-step-form').serializeArray();
for (var iIndex in oFormData) {
console.log(oFormData[iIndex].value);
}
Just make sure all your [input fields] have the [name] attributes as well.
Hope this helps for your case

if you are certain values begin at 0 and end at length, you could try something like:
var i = 0;
while($("input[name='group-fundos["+i+"][fundo-nome]']").length) {
//validate here or build a js array for later
}
Edit
Using attribute contains selector you could get elements like the one provided.
$("input[name*='group-fundos["+i+"]") would get all elements with name beginning in "group-fundos[ i ]". (Notice the *=).

addition function for input that comes within ng-repeat

Can someone please point me in the right direction or give me anything on how to make an addition function work with an input that will be created dynamically and is as long the ng-repeat ( which is mostly more than one ) ? I am having trouble on connecting the input by ng-model with the function, so couldn't accomplish anything.
the simplest form of can be like this...
<div ng-repeat="gameName in gameNames track by $index">
<p> {{gameName.title}}</>
<input type="number" >
</div>
Result : {{total}}
will be forever thankful.

First you need to add a ng-model in the input so angular can track it:
<input type="number" ng-model="gameName.value">
For a calculated field, add a method to your controller
$scope.total = function() {
var total = 0;
angular.forEach($scope.gameNames, function(gameName, key) {
total = total + gameName.value;
});
and then bind to it directly. It will know when it needs to recalculate as its constituent values change.

jQuery - how to modify a text input value by changing another element's value

I searched, but couldn't find anything that really corresponds to what I'm trying to do.
So I have a text input and next to it and number input. What I want to do is modify the text input's value when the number input has been changed. But I don't want to replace the value entirely.
This is essentially what I currently have:
<input id='field_4' name='4' value='64_to_74_weight_3'/>
<input id='field_4-weight' type='number' min='1' max='5' value='3' data-for='#field_4' />
What I'm trying to do is only change the number after weight_ to correspond to the number being chosen by the number input. I know I can get the last character by using slice(-1), but I can't get it to change it while preserving the rest of the text input's value.
Can anybody help with this? Thank you
Edit:
I had used something similar to below and thought it would've worked, but figured jQuery would be better, but I couldn't get it working on jsFiddle.
function updateInput(weight){
document.getElementById('field_" . $filter->id . "').value.slice(-1) = weight;
}

$("#field_4-weight").on('change', function() {
var txtField = $("#field_4"),
txt = txtField.val();
txtField.val(txt.slice(0, txt.length-1) + $(this).val());
});

Finding out which input element user typed into

I have a page with multiple text inputs, and I want to determine which of the text inputs that the user is typing into. All of the text inputs are displayed with the same code. One big constraint is that I cannot modify the actual HTML code, so I cannot add IDs or classes to the input.
Here is what the HTML looks like:
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
Here is the code that I am using to detect a keypress:
$(document).keypress(function(e) {
console.log(e.target) // will be the same for each input
});
Is there a way to distinguish between the different inputs. Is there an underlying DOM property that differentiates the text inputs such that I can access the inputs in constant time in the future(ie, does the DOM assign each input a unique id)?

On document load, you can loop through the input elements and make an "index" => "element" map. This can be used for constant time access in the future. The index of the map can act as the unique ID for the element.
I've put together a working fiddle for this. http://jsfiddle.net/fugHv/6/ . Does this solve your problem?
Here's the gist of the approach,
$(document).ready(function(){
var inputMap = {}, inputArray = [];
$.each($('input'), function(i, v){
//Make an array of the inputs to ensure a constant time access
inputArray.push(v);
//Make a map of inputs with index as the key, for future use
inputMap[i] = v;
});
$('input').keypress(function(e){
var pos = inputArray.indexOf(e.target);
//This should provide the reference for the target input
var inputRef = $(inputMap[pos]);
...
});
});

You can uniquely identify inputs using jQuery index method :
$(document).keypress(function(e) {
console.log(e.target) // will be the same for each input
console.log($(e.target).index());
});

filter() arguments not giving correct output

My problem today could be rather simple. I am trying to obtain all required elements inside of a form for which there is no text (they are of type input, text). Here is my JS:
var inputs = $('#form').find(':input');
if(inputs.filter('[required] [value=""]').first().focus().length)
//do something
This is the element in the HTML:
<input type="text" name="title[]" id="name_" required />
I should add that this input element is being added dynamically by javascript, meaning, it's appended after a certain action has taken place.
The true problem is that the code inside of the if statement is never true even when I don't type a value for the given text field.
Any help is appreciated.

The value attribute of an input tag is not the same thing as the value property of an input element. The first one happens to be in the HTML, gets parsed in the DOM and acts as the defaultValue. The latter one is the dynamic value which represents the currently entered input. See also .prop() vs .attr()
Your element does not even have a value attribute, so it will never match the selector. Instead, you will need to use a filter function that checks the properties:
inputs.filter(function() {
return this.required && this.value=="";
// equivalent: $(this).prop("required")
// and $(this).prop("value") or $(this).val()
})

If you mean to select required inputs that are empty, your selector is wrong. The space represents ancestor relationship, parent/children:
if (inputs.filter('[required][value=""]').length) { // Element is `required` and empty
....
}

There are 2 issues with your code.
('[required] [value=""]')
Supposed to be
('[required][value=""]')
And with the above selector you can never select the input below
<input type="text" name="title[]" id="name_" />
as it has no value attribute in the first place. Also required attribute is missing
The inputs that would match your selector would be of this signature
<input type="text" required="true" value="" name="title[]" id="name_" />
Check Fiddle