How to make jQuery .map only add filled inputs to array? - javascript

So here is my jQuery:
var optionsArray = $(".optionInput").map(function() {
return this.value;
}).get();
Currently it gets all of the inputs with the class .optionInput and puts the data into an array, but it also stores blank inputs too. With my site I don't need all the inputs to be filled, but I don't want the function to collect any data from the blank fields. Any help would be much appreciated.

If the function returns null or undefined, no element will be inserted
source: jQuery
var optionsArray = $(".optionInput").map(function() {
return this.value || null;
}).get();
Jsfiddle Demo

Related

Send text into input field only if it's empty

I have a portion of a form that "pops" out of it's normal place, and binds itself to the side of the viewport. When this happens, certain elements are hidden, leaving me with only the data that is immediately critical.
My problem is that I can't seem to get the copied data into only those cells with matching classes that DO NOT contain data.
I'm fairly certain the problem lies in my JS:
$('.spec-table-quote-button').click(function() {
var toCopy = $(this).closest('tr').find('td:eq(1)').text();
var copyInto = $(".part-number-input").val('');
$(copyInto).val(toCopy);
$('.add-field').click();
});
Here's a fiddle to see all the pieces: http://jsfiddle.net/UjPAk/
Any help is greatly appreciated. Many thanks in advance!
Replace
var copyInto = $(".part-number-input").val('')
with
var copyInto = $(".part-number-input").filter(function() {
return $(this).val() == ''
});
.val('') sets the value of all the matched things to an empty string. It doesn't filter the match list to elements whose values are an empty string.
Use
var copyInto = $(".part-number-input");
copyInto.val(toCopy);
instead of
var copyInto = $(".part-number-input").val('');
$(copyInto).val(toCopy);
I think code is self explanatory.
try :
$('.spec-table-quote-button').click(function() {
var toCopy = $(this).closest('tr').find('td:eq(1)').text();
$(".part-number-input").val(toCopy);
$('.add-field').click();
});

jQuery form input into an array not working

I'm working on a game and there is a form input where the user enters the number of characters. Once this happens more inputs appear for each character's name. My problem right now is reading those names into an array.
When the new inputs are created also a new button called nameButton is created and that is my issue, when I attempt to click that nothing happens when the values should be stored in an array. I put a prompt at the end of the function just to check and that does not even get called.
If you all have any suggestions please let me know here is the jsFiddle
function nameRecording(names,$this){
var addRows='<tr id=newRows>';
for(var i =1; i<=names; i++)
{ var nearTr=$this.closest('tr');
addRows=addRows+'<td>Name one:</td><td><form><input type="text" name="charcItem" class = "newR"/></form></td>';
}
addRows=addRows+'<td><div class="button" id="nameButton"> Add! </div></td></tr>';
nearTr.after(addRows);
};
$('#nameButton').click(function(){
names=$(".newR").map(function(){
return $(this).val();
});
prompt(names);
});
And there are some of my functions.
Try this way:
$(".form").on('click', '#nameButton', function () {
names = $(".newR").map(function () {
return this.value;
}).get();
prompt(names);
});
You can use event delegation using on for dynamic elements
You need to do a .get() on .map() result to convert the collection object into array.
Demo

Getting value of selected checkbox with jquery from checkboxes without id's

I have a number of checkboxes that are generated from a JavaScript API call from a database. I need to be able to pass the values of the checkboxes which are then selected by the user, and sent to the processing page. The issue is that the checkboxes don't have ID's associated with them(or this wouldn't be a problem) They all have the same name, but no ID's.
What is the best way to find which check boxes are selected, and pass their values to the following page?
One way I started was with an array:
var options = ["option1","option2","option3"];
var option 1 = [0];
var option 2 = [1];
var option 3 = [2];
On the processing page, using:
var option1 = getFromRequest('option1') || '';
var option2 = getFromRequest('option2') || '';
var option3 = getFromRequest('option3') || '';
Is there a better way of doing this?
I've changed the implementation to the following:
var values = []
$("input:checkbox.subIndustry").each(function(){
values.push(this.value);
});
passing the values to the success page with
window.location.href = REGISTER_SUCCESS +'&values='values.join(",")
which should then get the value with
var variablname = getFromRequest('values') || "";
This is returning Undefined. Any help?
An easy way to select them would be something like $("input[type=checkbox]:checked")
However, if you wanted to keep up with them as they are checked, even if they are added after you load, you could create a variable, then asign a delegation to the "change" state of each input that is a checkbox and update this variable on each change.
It's as simple as:
var checked, checkedValues = new Array();
$(function() {
$(document).on("change", "input[type=checkbox]", function(e) {
checked = $("input[type=checkbox]:checked");
// if you wanted to get an array of values of the checked elements
checkedValues = checked.map(function(i) { return $(this).val() }).get();
// make a string of the values as simple as joining an array!
var str = checkedValues.join(); // would return something like: value1,value2,ext...
});
})
Working Example
Since all your checkboxes have the same name, you can retrieve the checked ones using a variation of:
var checked = $('input[name=ckboxname]:checked');
see: :checked selector for more information
you can simply get the values of checked checkboxes by using
$('input[name=checkboxname]:checked').val();
this will give you the value of checkbox which is checked and for all values simply use
each function of jquery.
Turns out, the answer was to utilize indexOf in the underscore.js library. The solution had to be applied in the API being used to send data.
(_.indexOf(values, '9') != -1 ? 1 : '0'),

jQuery filter table with multi select

I'm trying to filter a table with some filters. Some are simple selects, and others are multiples. For the simple ones, that's ok, but not the multiple.
I want to follow this logic :
Passing through the array which contains the filter (filtre_transports)
Passing through the array which contains the value(s) (ligne_transports)
If an element of the 1. isn't in the 2. so not display the line (transports_matches = false)
I made this code :
// Pass through each line of the table
jQuery('#agents_liste tbody tr').not('.vide').each(function() {
var transports_matches = true;
// ligne_transports is an array contains values to compare with the filter
var ligne_transports = jQuery(this).children('td').eq(2).text().split('###');
// filtre_transports is an array contains the selected val of a multi select
jQuery(filtre_transports).each(function() {
var filtre = jQuery(this);
var filtreOk = false;
jQuery(ligne_transports).each(function() {
if (filtre == jQuery(this)) {
filtreOk = true;
return false;
}
});
if (!filtreOk) {
transports_matches = false;
return false;
}
});
});
The problem : When we have filters selected, the result transports_matches is always false.
Btw, I saw this post where the answer is to use classes, but is there a way without them ?
EDIT : You can see the JSFiddle here.
Thanks
Fixed: http://jsfiddle.net/r4mfv/2/
You had a couple of issues:
$(filtre_transports).each is not the way to iterate over an array, you should use $.each(filtre_transports, function() {...}).
You should cast filtre and this to String before comparing them.

Buildling an array of vaules from page elements in JQuery/Javascript

I have a set of text boxes in which the user inputs an email address into each one. I want to loop around these and build an array of them. How do I do it?
var emailAddresses = new Array();
$(".email_address").each(
function() {
//add this $(this).val() emailAddresses
}
);
var emailsArr = $('.email_address').map(function(i,n) {
return n.value; //or $(n).val() or $(n).attr('value')
}).get();
See $.map for an awesomely concise way to do this sort of thing. get converts the returned collection into an array. Hope that helped.

Categories

Resources