How to get the HTML select option in AJAX

A few things.

Your urls don't match for one. Ajax request is going to /selected/id, but route is set up to respond to /selected/languageId.

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

1. You're not sending the request with get method, you're using post so get() won't retrieve it
2. You don't have a parameter named languageSelected that you're sending with your ajax request. The only parameter you send is id

@CRONIX - Hello @cronix I did test with your set up but still the page reloads... I changed the url to test if the AJax request was hitting the URL or if I was getting a 404. But still nothing

Page reloads....when you do what exactly?

I would expect it to reload if you submit the form with your submit button, because that has nothing to do with your ajax which is only setup to listen to the change event of the select element. You don't prevent normal form submission, so it sends. And since you don't have an action or method for your <form> markup, it defaults to sending to the current url using a get request (which would look like a page reload). I would not expect it when changing your select dropdown. That should trigger the ajax request.

Also open up your browsers dev tools and watch the network tab for your ajax request. You'll see more of what's going on.

I think this is what you want. Remove the submit button. You don't need it.

<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>
        @endforeach
      </select>
    </div>
  </form>

javascript to submit the form when select is changed

$(function() {
    // when select changes
    $('#languageselector').on('change', function() {

        // create data from form input(s)
        let formData = $('#myForm').serialize();

        // send data to your endpoint
        $.ajax({
            url: '/selected/languageId',
            method: 'post',
            data: formData,
            dataType: 'json', // we expect a json response
            success: function(response) {
                // whatever you want to do here. Let's console.log the response
                console.log(response); // should show your ['success'=> $request->id]
            }
        });
    });
});

public function selectedLangId(Request $request)
{
    // since form input is languageSelected...
    return response()->json(['success'=> $request->languageSelected]);
}

One thing you're missing is your csrf token. You can set that up once and not worry about it again for any more of your ajax requests if you set it up like they show in the docs: https://laravel.com/docs/5.7/csrf#csrf-x-csrf-token

@CRONIX - Hi @cronix your way of doing it works well... The request hits the controller.. Works as expected!

Quick question, on the view with the form myForm how do I get back the languageSelected passed to controller to reuse on that view?

I mean how do I get this languageSelected from this return response()->json(['success'=> $request->languageSelected]); on the view?

It's already returned to the "view". It's in response that is returned to your success method of the ajax call. I'm dumping it out to console and you should see if if your dev tools are open and view the console tab.

if you console.log(resopnse.success); it would show the actual id of the selected language. From there, I don't know what you want to do with it.