Get all inputs of same div

1

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

2

Try this:

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

Thanks for replying.

5

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.

7

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!

9

Thanks will give that a go.

10

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!