Reputation: 125
On a dropdown option, I would like to listen in and get the value of the option selected by the user.
Then I would like to pass this value to a PHP variable for use in the later part of the blade view PHP script.
I do not want to reload the page hence from the online look, I found ajax to be the only possible way.
I tried to implement as shown below but hitting a snag as the page loads on submit.
Even better is it possible to have a select option drop down that you get the selected value without submit?
My select option code:
<form id="myForm">
<div class="button dropdown">
<select name="languageSelected" required="required" id="languageselector" onChange='showSelected(this.value)'>
<option value="">Pick A language</option>
@foreach($reviewForm_language as $lang)
<option value="{{$lang->id}}">{{$lang->name}}</option>
@endforeach
</select>
</div>
<input id="ajaxSubmit" type="submit" value="Select"/>
</form>
My JS code:
<script>
jQuery(document).ready(function(){
jQuery('#ajaxSubmit').click(function(e){
e.preventDefault();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
});
jQuery.ajax({
url: "{{ url('#') }}",
method: 'post',
data: {
id: jQuery('#languageSelected').val(),
},
success: function(result){
jQuery('.alert').show();
jQuery('.alert').html(result.success);
}});
});
});
</script>
On reload I can get the value as a GET request as below; however, I do not want to reload the page but for some reasons it does reload.
`<?php
$langId = request()->get('languageSelected');
?>`
Anyone?
Upvotes: 0
Views: 4973
Reputation: 439
Sounds like you want to listen directly to the change event on the select element.
<script>
jQuery('#languageselector').on('change', function(){
jQuery.ajax({
url: "{{ url('#') }}",
method: 'post',
data: {
id: $(this).val(),
},
success: function(result){
jQuery('.alert').show();
jQuery('.alert').html(result.success);
}
});
});
</script>
Upvotes: 0
Reputation: 1272
instead of type submit change it to button
<input id="ajaxSubmit" type="button" value="Select"/>
and in php file you shold get id not languageSelected because you have passed id into data in ajax call.
`<?php
$langId = request()->get('id');
?>`
Upvotes: 0
Reputation: 2466
Try this -
Change type="button" instead of submit
input id="ajaxSubmit" type="button" value="Select"
2.There is no need for $.ajaxSetup
. Copy the headers from $.ajaxSetup
and move above url( inside jQuery.ajax({
)
id
in post parameter using var_dump($request->all()
) Upvotes: 1