10 months ago

How to get the HTML select option in AJAX

Posted 10 months ago by bobmyles

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 HTML code:

<form id="myForm">
    <div class="button dropdown">
      <select name="languageSelected" required="required" id="languageselector">
        <option value="">Select the language</option>
        @foreach($reviewForm_language as $lang)
         <option value="{{$lang->id}}">{{$lang->name}}</option>
    <input id="ajaxSubmit" type="submit" value="Select"/>

The JavaScript code:

  <script src="" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="


jQuery('#languageselector').on('change', function(){      

      url: "{{ url('/selected/id') }}",
      method: 'post',
      data: {
         id: $(this).val(),
      success: function(result){


The PHP code to pick the selected language id

  $langId = request()->get('languageSelected');

My route code;

Route::post('/selected/languageId', '[email protected]');

My controller Code;

public function selectedLangId(Request $request)
    return response()->json(['success'=> $request->id]);

I am learning AJAX, and for some reasons the page loads. Anyone kindly guide me?

Please sign in or create an account to participate in this conversation.