Based on what I learned and what I read here on Stack as well, I wrote a code that should get all the values of a specified class of input and pushing them into an array.
What I think this jQuery sript should do is:
create an empty array called myArray
when #subButton is clicked an iteration on the <input class=".req" starts, pushing the value of each <input class=".req" into myArray
The problem is that anything is displayed in the console, as nothing happened, so I guess there's a conceptual/writing error.
jQuery :
$(document).ready(function(){
var myArray = [];
$('#subButton').on('click', function() {
$('.req').each(function() {
myArray.push($(this).val());
console.log(myArray);
});
});
});
HTML :
<form id="iForm">
<input type="text" id="i1" class=".req" placeholder="Name">
<input type="text" id="i2" placeholder="Surname">
<input type="text" id="i3" placeholder="Text A">
<input type="text" id="i4" class=".req" placeholder="Text B">
<input type="button" id="subButton" value="Registrati">
</form>
You've to remove the . before the classes in your HTML inputs :
<input type="text" id="i1" class=".req" placeholder="Name">
__________________________________^
<input type="text" id="i4" class=".req" placeholder="Text B">
__________________________________^
Should be :
<input type="text" id="i1" class="req" placeholder="Name">
<input type="text" id="i4" class="req" placeholder="Text B">
Hope this helps.
$(document).ready(function(){
var myArray = [];
$('#subButton').on('click', function() {
$('.req').each(function() {
myArray.push($(this).val());
console.log(myArray);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="iForm">
<input type="text" id="i1" class="req" placeholder="Name">
<input type="text" id="i2" placeholder="Surname">
<input type="text" id="i3" placeholder="Text A">
<input type="text" id="i4" class="req" placeholder="Text B">
<input type="button" id="subButton" value="Registrati">
</form>
Having fixed your class attributes to remove the leading period character, you can use:
var myArray = $('.req').get().map(function(el) { return el.value });
Where $(...).get() converts the jQuery collection into a standard array, and .map extracts the field values.
This is somewhat cleaner than using .each with a push.
Related
I have a few text input fields that will update some hidden fields.
I have a few .change functions that will watch for changes on the visible input fields.
Here is my JSFiddle - https://jsfiddle.net/tcgmr698/
Jquery
$("#TravellerContact_ManualAddress1").change(function () {
$('input[id=TravellerContact_Address1]').val($('input[id=TravellerContact_ManualAddress1]').val())
});
$("#TravellerContact_ManualAddress2").change(function () {
$('input[id=TravellerContact_Address2]').val($('input[id=TravellerContact_ManualAddress2]').val())
});
$("#TravellerContact_ManualAddress3").change(function () {
$('input[id=TravellerContact_Address3]').val($('input[id=TravellerContact_ManualAddress3]').val())
});
$("#TravellerContact_ManualAddress4").change(function () {
$('input[id=TravellerContact_Address4]').val($('input[id=TravellerContact_ManualAddress4]').val())
});
$("#TravellerContact_ManualAddress5").change(function () {
$('input[id=TravellerContact_Address5]').val($('input[id=TravellerContact_ManualAddress5]').val())
});
$("#TravellerContact_ManualPostCode").change(function () {
$('input[id=TravellerContact_PostCode]').val($('input[id=TravellerContact_ManualPostCode]').val())
});
HTML
<div id="manualFullAddress" class="fullAddress">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress1" name="TravellerContact_ManualAddress1" placeholder="Address" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress2" name="TravellerContact_ManualAddress2" placeholder="Address 2" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress3" name="TravellerContact_ManualAddress3" placeholder="Address 3" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress4" name="TravellerContact_ManualAddress4" placeholder="City" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress5" name="TravellerContact_ManualAddress5" placeholder="Province" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualPostCode" name="TravellerContact_ManualPostCode" placeholder="Postal Code" type="text">
</div>
Hidden fields that get posted to the DB
<input class="HideValFromSet" id="TravellerContact_Address1" name="TravellerContact.Address1" type="hidden" value="">
<input class="HideValFromSet" id="TravellerContact_Address2" name="TravellerContact.Address2" type="hidden" value="">
<input class="HideValFromSet" id="TravellerContact_Address3" name="TravellerContact.Address3" type="hidden" value="">
<input class="HideValFromSet" id="TravellerContact_Address4" name="TravellerContact.Address4" type="hidden" value="">
<input class="HideValFromSet" id="TravellerContact_Address5" name="TravellerContact.Address5" type="hidden" value="">
<input class="HideValFromSet" id="TravellerContact_PostCode" name="TravellerContact.PostCode" type="hidden" value="">
My main question is how do I go about combining these functions into one function? Is it possible?
The relevant elements are all children of #manualFullAddress. We can therefor add the .change() event handler to this parent element instead ("event delegation", but it would also work with one event handler per <input /> element)
We can use this to get the id of the <input /> element. And with .replace("Manual", "") we can get the id of the corresponding <input type="hidden" /> element.
$("#manualFullAddress").on("change", "input", function() {
const input = $(this);
$("#" + this.id.replace("Manual", "")).val(input.val());
});
$("#manualFullAddress").on("change", "input", function() {
const input = $(this);
$("#" + this.id.replace("Manual", "")).val(input.val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="manualFullAddress" class="fullAddress">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress1" name="TravellerContact_ManualAddress1" placeholder="Address" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress2" name="TravellerContact_ManualAddress2" placeholder="Address 2" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress3" name="TravellerContact_ManualAddress3" placeholder="Address 3" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress4" name="TravellerContact_ManualAddress4" placeholder="City" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress5" name="TravellerContact_ManualAddress5" placeholder="Province" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualPostCode" name="TravellerContact_ManualPostCode" placeholder="Postal Code" type="text">
</div>
<div>
"Hidden" Elements
<br />
<input class="HideValFromSet" id="TravellerContact_Address1" name="TravellerContact.Address1" value="">
<input class="HideValFromSet" id="TravellerContact_Address2" name="TravellerContact.Address2" value="">
<input class="HideValFromSet" id="TravellerContact_Address3" name="TravellerContact.Address3" value="">
<input class="HideValFromSet" id="TravellerContact_Address4" name="TravellerContact.Address4" value="">
<input class="HideValFromSet" id="TravellerContact_Address5" name="TravellerContact.Address5" value="">
<input class="HideValFromSet" id="TravellerContact_PostCode" name="TravellerContact.PostCode" value="">
</div>
In your case, you can bind change event using .manualAddressEntry-js and get the id dynamically as shown below.
$('.manualAddressEntry-js').change( function() {
var id = $(this).attr('id').replace("Manual", "");
$(`input[id=${id}]`).val($(`input[id=${id}]`).val());
});
But I will recommend changing id to data- and using that instead of id, if you're not using it anywhere else.
my html looks like this:
<div id="Section1" class="divFiles">
<input type="text" name="file">
<input type="text" name="file">
<input type="text" name="file">
<input type="text" name="file">
</div>
<div id="Section2" class="divFiles">
<input type="text" name="file">
<input type="text" name="file">
<input type="text" name="file">
<input type="text" name="file">
</div>
I want to generate a list of objects with two properties: key, and listTitles, key is just the id of the div, and listTitles is a list of every value that is on the input fields. I don't have any problem retrieving the id of every div separately, but I'm not sure of which is the correct way to read by div all the values contained in their children inputs.
My goal is to have this results:
{key: Section1, listTitles: inputValue1Div1, inputValue2Div1, inputValue2Div1, inputValue2Div1 },
{key: Section2, listTitles: inputValue1Div2, inputValue2Div2, inputValue2Div2, inputValue2Div2 }
I'm using this code that is retrieving only the divs id, the problem is to fill the listTitles property with the input value fields of the current div. What I need to change?
var divElements = $(".divFiles");
var tests = [];
$.each(divElements, function () {
tests.push({ 'key': $(this).attr('id'), 'listTitles':$.each(JSON.parse($(this).children("input[name=file]").val()))});
})
You almost got it. Use .map().get() instead.
var divElements = $(".divFiles");
var tests = [];
$.each(divElements, function() {
tests.push({
'key': $(this).attr('id'),
'listTitles': $(this).children("input[name=file]").map(function(i, elem) {
return this.value;
}).get()
});
})
console.log(tests);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Section1" class="divFiles">
<input type="text" name="file" value="a">
<input type="text" name="file" value="b">
<input type="text" name="file" value="c">
<input type="text" name="file" value="d">
</div>
<div id="Section2" class="divFiles">
<input type="text" name="file" value="e">
<input type="text" name="file" value="f">
<input type="text" name="file" value="g">
<input type="text" name="file" value="h">
</div>
I have a form with variable number of inputs as an array
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value="" />
<input type="text" id="foo[3]" name="foo[3]" value="" />
<input type="text" id="foo[4]" name="foo[4]" value="" />
<input type="text" id="foo[5]" name="foo[5]" value="" />
</form>
The idea is when i put some value in the first field (foo[1]) i need the jQuery or Javascript copy the value from #foo[1] into #foo[2], #foo[3], etc depending on the array.
Do you need following behavior :
$(document).ready(function(){
$("input[id^=foo\\[]").prop("disabled",true); //disable all elements first
$("input#foo\\[1\\]").prop("disabled",false); //then enable the first one
$("input#foo\\[1\\]").change(function(){
var source = $(this);
var currentVal = $(source).val();
$("input[id^=foo\\[]").each(function(){
if(!$(this).is(source))
$(this).val(currentVal);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value=""/>
<input type="text" id="foo[3]" name="foo[3]" value=""/>
<input type="text" id="foo[4]" name="foo[4]" value=""/>
<input type="text" id="foo[5]" name="foo[5]" value=""/>
</form>
$('input').on('input', function(){
$(this).siblings().val($(this).val());
});
Couldn't tell if you just wanted the first or all. If just the first, you can target with an id or jQuery.
$('input').eq(0).on('input', function(){});
Something like this
HTML
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value="" />
<input type="text" id="foo[3]" name="foo[3]" value="" />
<input type="text" id="foo[4]" name="foo[4]" value="" />
<input type="text" id="foo[5]" name="foo[5]" value="" />
</form>
JavaScript
$("input[id=foo\\[1\\]").on("input", function (){
$(this).siblings().val($(this).val());
});
And if you want the other to be readonly:
$("input[id^=foo\\[]:not([id=foo\\[1\\]])").attr("readonly", "readonly");
I have a bit of problem with my code here. What I am trying to accomplish is to get the ID of an input field on key up. All the input fields of interest have a class "count". All of them also have the same ID but it increments, say field1, field2, field3. I also have some "answer" inputs.
The mechanism I am trying to accomplish is to first get the ID from the input where I am typing (keyup). Then I proceed to pass in that value (var valueField) to the function updateFields(idNumber). After that, I just simply add 100 to the value of the field#x and finally I append the final value to its matching input with the id of answerx.
My code is not working. Does anybody know why? Is this approach correct? Or would you advise me to change something?
Here's my code:
HTML:
<input type="text" placeholder="" class="count" name="input1" id="1"/>
<input type="text" placeholder="" class="count" name="input2" id="2"/>
<input type="text" placeholder="" class="count" name="input3" id="3"/>
<input type="text" placeholder="" class="answer" name="ans1" id="answer1"/>
<input type="text" placeholder="" class="answer" name="ans2" id="answer2"/>
<input type="text" placeholder="" class="answer" name="ans3" id="answer3"/>
JavaScript:
$(document).on('keyup','.count',function(){
var valueField = $(this).attr('id').val();
updateFields(valueField);
});
function updateFields(idNumber){
var rawVal = $('#field' + idNumber).val();
var final = rawVal + 100;
$('#answer' + idNumber).val(final)
}
Thanks in advance!
When you get the attr('id') you don't need to call .val(). Also your code to get the field assumes a id that starts with 'field' and finally if you are going to take text input and treat is a number you should call parseInt() (with a radix of 10 for decimal), this will work:
$(document).on('keyup', '.count', function() {
var valueField = $(this).attr('id');
updateFields(valueField);
});
function updateFields(idNumber) {
var rawVal = parseInt($('#' + idNumber).val(), 10);
var final = rawVal + 100;
$('#answer' + idNumber).val(final)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="" class="count" name="input1" id="1" />
<input type="text" placeholder="" class="count" name="input2" id="2" />
<input type="text" placeholder="" class="count" name="input3" id="3" />
<input type="text" placeholder="" class="answer" name="ans1" id="answer1" />
<input type="text" placeholder="" class="answer" name="ans2" id="answer2" />
<input type="text" placeholder="" class="answer" name="ans3" id="answer3" />
I have page with many inputs inside a set of different divs.
A subset of those inputs are created dinamically and they can be also deleted.
By creating and deleting elements i could have a list of inputs named as shown:
<div id="first">
<input type="text" name="elem[0][elem_option][0][price]" value="">
<input type="text" name="elem[0][elem_option][1][price]" value="">
<input type="text" name="elem[0][elem_option][5][price]" value="">
<input type="text" name="elem[0][elem_option][21][price]" value="">
<input type="text" name="elem[3][elem_option][0][price]" value="">
<input type="text" name="elem[3][elem_option][1][price]" value="">
<input type="text" name="elem[3][elem_option][3][price]" value="">
<input type="text" name="elem[3][elem_option][8][price]" value="">
</div><!-- first -->
<div id="second">
<input type="text" name="elem[1][elem_option][1][price]" value="">
<input type="text" name="elem[1][elem_option][2][price]" value="">
<input type="text" name="elem[1][elem_option][7][price]" value="">
<input type="text" name="elem[1][elem_option][8][price]" value="">
<input type="text" name="elem[5][elem_option][5][price]" value="">
<input type="text" name="elem[5][elem_option][6][price]" value="">
<input type="text" name="elem[5][elem_option][8][price]" value="">
<input type="text" name="elem[5][elem_option][9][price]" value="">
</div><!-- second-->
....
I need to select all elements with a name that ends with [price] and save in a different variable of each div.
I tried a jQuery selector used as method of getelementbyid:
first_price_inputs = document.getElementById('first').jQuery('input[name$="[price]"]')
second_price_inputs = document.getElementById('second').jQuery('input[name$="[price]"]')
But i get this error:
Uncaught TypeError: Object #<HTMLDivElement> has no method 'jQuery'
please help!
Try this:
first_price_inputs = jQuery('#first input[name$="[price]"]');
second_price_inputs = jQuery('#second input[name$="[price]"]');
Look here: http://jsfiddle.net/qRDkq/
try
first_price_inputs = jQuery('#first > input[name$="[price]"]')
#Cherniv: its not an input of ID #first, but a child of the element with ID #firstof type input. So the descendant selector should be used afaik?