Get all inputs of same div

Hi I am trying to get all the input values from on button click from within same div. There are mulitiple of these divs with same class name and inputs.

Here’s an example:

<div class="opts form-inline col-md-12 sm-12">

	<select name="drink1" class="form-control" id="Drink-1">
		<option value="">Drink 1</option>
		<option value="">Fanta</option>
		<option value="">7UP</option>
		<option value="">Mirinda</option>
	</select>

	<select name="Drink2" class="form-control" id="Drink-2">
		<option value="">Drink 2</option>
		<option value="">Fanta</option>
		<option value="">7UP</option>
		<option value="">Mirinda</option>
	</select>

	<select name="Side" class="form-control" id="Side">
		<option value="">Side</option>
		<option value="">Chips</option>
		<option value="">Rice</option>
	</select>

	<span class="float-right">£9.99<button class="proAdd ml-3 btn btn-sm"><i class="icon-line-plus"></i></button></span>

</div>

<div class="opts form-inline col-md-12 sm-12">

	<select name="drink21" class="form-control" id="Drink-21">
		<option value="">Drink 1</option>
		<option value="">Fanta</option>
		<option value="">7UP</option>
		<option value="">Mirinda</option>
	</select>

	<span class="float-right">£9.99<button class="proAdd ml-3 btn btn-sm"><i class="icon-line-plus"></i></button></span>

</div>

Here’s the JQuery I am trying but not working:

$('.proAdd').click(function()
	{
	var id;
	$(this).parent().parent().find('input:select').each(function() {
	  id = this.id;
	  console.log("#"+id);
	  console.log(this.value);
	});
.....

How can I find only the inputs from which div’s button was pressed?
Thanks

Try this:

document.querySelectorAll('select').forEach(select => console.log(select.value));
1 Like

If you prefer jQuery, then:

$('.proAdd').click(function(){
  $('select').each(function(i, elem) {
	  var id = elem.id;
	  console.log("#" + id);
	  console.log(elem.value);
	});
});
1 Like

Thanks for replying.

The only problem with this is that it chooses all the selects. I needed the selects closest to the button. So here’s what I have done on the click function:

var id;
	var $this = $(this);
		$this.closest('.opts').find("select").each(function() {
	  id = this.id;
	  console.log("#"+id);
	  console.log(this.value);
	});

Please suggest if there are unnecessary traversals in the dom and can be more efficient.
Thanks all the same.

Honestly, when I first looked at your HTML, I did not even notice the other select element inside the other div. In this case, I would recommend adding a unique id to each of the divs, so that particular button can target just the select elements of that div. Also, I recommend adding a unique id to each button (like I have done below). For example, if you add an id=“opts-1” to the first div, then the following would work and would be the simplest approach.

$('#proAdd-1').click(function(){
	$('#opts-1 > select').each(function(i, elem) {
	  var id = elem.id;
	  console.log("#" + id);
	  console.log(elem.value);
	});
})

I have some code like this, which is on a button click event.

var $this = $(this);
	$this.closest('.opts').find("select").each(function() {
	  id = this.id;
	  if(this.value=="")
	{
	  alert('Choose one');
	  return false;
	  }
	  console.log("#"+id);
	  console.log(this.value);
	});

Why doesn’t the return false work here? Instead I am using prevent default.

Any suggestions will he highly appreciated!

When you say it does not work, what are you expecting it to do vs. what is actually happening?

Thanks will give that a go.

Thanks for merging it, I thought I couldn’t continue with a different question.
So I expect return false to stop any other code after the alert and not excute anymore, in this case console.log. However it is showing the alert and then continuing with the rest of the code below it. Any way to stop it?
Cheers!