jQuery - loop thru and get the values

Why am I stuck on this?! can't be that hard.

1. You can see the sample code here https://drive.google.com/open?id=1Z4CJc4mjOLZ8O8rCV3aqF2zaxrY3ZddA
Download and please just click on page.html

2.  You see the third filter.  You can click on "Add" and dynamically add rows.
f1.png
3. The third filter can be a text box or a dropdown.

4. I want to get the values of that third filter (dropdown or textbox), in order. The name is "FilterValues" and "camillatest" for the dropdown select.

5. I tried this and you can see it in Reporting.js but didn't work. I'll keep working on it and if I figure it out, I'll post back. So, I want to get value of textbox or the dropdown. Whatever the user has in the third filter.

var holdValues = []; //loop thru and add to this array

	$('.portfolio').each(function (index) {

		var val = $('#portfoliothirdfilter', this).find('select[name="camillatest"]').val()
		alert(val)
		var val2 = $('select[name="camillatest"]', this).val();
		alert(val2)
	});

Open in new window

LVL 8
CamilliaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
Hey Camilla,

It would be a whole lot easier if you just posted up some code that highlighted your problem, rather than a zip containing your entire applcaition. That's a LOT of set up to do and code to read.

Had a quick gance at your page.html file, and it looks like you have this structure:

<div id="portfoliothirdfilter" class="col-md-3 hidden">
    <select class="form-control portfolio" id="FilterValues" name="camillatest">
        <option value="xyz">Select</option>
        <option value="2">Canada</option>
        <option value="3">United Kingdom</option>
        <option value="1">USA</option>
    </select>

Open in new window

But the jQuery you've posted above is trying to loop through each .portfolio element in your page and find an element with an ID of portfoliothirdfilter inside of it. You're then trying to find an element called camillatest inside of that! That's clearly not what you intended, but it's not clear from your question exactly what you need, so maybe clarify a little.
0
CamilliaAuthor Commented:
Yeah, that jQuery I have is not correct. Let me post some code here.
0
CamilliaAuthor Commented:
I think I need to do this... Let me see if I can do it in jQuery. I need to find some examples/

1. You see I have 3 rows. "filterItem" is the class. I need to loop thru each "filterItem"

f2.png
3. Then in each "filterItem", if "portfoliothirdfilter" is not "hidden, get the value of "FilterValues" id. Otherwise, get "FilterValues" value that's in "thidfilter" div.

f3.png
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Chris StanyonWebDevCommented:
OK. You're likely to have some problems going forward. An ID needs to unique, so you can't have an element with an ID of portfoliothirdfilter and thirdfilter inside of several rows. You probably want to change them to classes. The general idea will then be:

$('.filterItem').each(function() {
    // get the correct wrapper
    var wrapper = $('.portfolioThirdFilter', this).hasClass('hidden') ? $('.thirdFilter', this) : $('.portfolioThirdFilter', this);
    // get the element    
    var element = $('[name=FilterValues]', wrapper);
    console.log( element.val() );
}

Open in new window

It loops through each .filterItem, and the looks to see if the .portfolioThirdFilter element has the hidden class. If it does, it selects the .thirdFilter element. If it doesn't then it selects the .portfolioThirdFilter element.

Once it's got the right element, it then look inside it to find an element with a name of FilterValues.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
CamilliaAuthor Commented:
You're right. Forgot that I need a class and Id needs to be unique. Let me change my page.html and try this again. I'll post back.
0
CamilliaAuthor Commented:
Yes! what a relief (at least for now :)) It works. Changed to class name and my test page.html works.

I'll apply to the actual code and I think this should work.

Thanks for your help, as always.
0
CamilliaAuthor Commented:
Works. Thanks so much for helping me out.
0
Chris StanyonWebDevCommented:
No worries. Glad you got it sorted :)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.