I have simple HTML like this;
JavaScript
x
22
22
1
<div id="buildyourform">
2
<div class="row">
3
<div class="col-sm-6">
4
<div class="input-group mb-2">
5
6
<select class="form-control" id="language">
7
@foreach($language as $l)
8
<option value="{{$l->id}}" >{{$l->name}}</option>
9
@endforeach
10
</select>
11
</div>
12
</div>
13
14
<a href="javascript:void(0)" id="save-button" class="btn btn-light btn-sm ">
15
<i class="fa fa-ban"></i>
16
Upload
17
</a>
18
19
</div>
20
</div>
21
</div>
22
I have a plus button, using which I am appending the same fields below. Now I want to retrieve the respective selected language id with the click of the respective upload button. But every time it returns me the value of first select field.
Here is what I have tried;
JavaScript
1
9
1
$(document).on('click', '#save-button', function(){
2
3
var obj=$(this);
4
//language = obj.closest("div[class=row]").find("select[id=language]").val();
5
language = $(this).parent().find("select[id=language]").val();
6
console.log(language);
7
8
});
9
Can anyone let me know how to get respective selected language id on respective button click?
Advertisement
Answer
You need to use prev function and change select[id=xxxx] by select#language
JavaScript
1
7
1
$(document).on('click', '#save-button', function(){
2
var obj=$(this);
3
//language = obj.closest("div[class=row]").find("select[id=language]").val();
4
language = $(this).prev('.col-sm-6').find("select#language").val();
5
console.log(language);
6
7
});
JavaScript
1
21
21
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2
<div id="buildyourform">
3
<div class="row">
4
<div class="col-sm-6">
5
<div class="input-group mb-2">
6
7
<select class="form-control" id="language">
8
@foreach($language as $l)
9
<option value="{{$l->id}}" >{{$l->name}}</option>
10
@endforeach
11
</select>
12
</div>
13
</div>
14
15
<a href="javascript:void(0)" id="save-button" class="btn btn-light btn-sm ">
16
<i class="fa fa-ban"></i>
17
Upload
18
</a>
19
20
</div>
21
</div>