How to get the HTML select option in AJAX

Posted 4 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.

Reply to

Use Markdown with GitHub-flavored code blocks.