Ajax-вызов, чтобы получить значение, выбранное в HTML Select Option

Question

В раскрывающемся списке я хотел бы прослушать и получить значение параметра, выбранного пользователем.

Затем я хотел бы передать это значение в переменную PHP для использования в более поздней части.скриптового PHP-скрипта.

Я не хочу перезагружать страницу, поэтому из онлайн-поиска я обнаружил, что Ajax - единственный возможный способ.

Я попытался реализовать, как показано ниже, но попал в ловушку при загрузке страницы при отправке.

Еще лучше, если есть возможность выбрать опцию выбора, чтобы получить выбранное значение без отправки.?

Мой код опции выбора:

<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>

Мой код JS:

<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>

При перезагрузке я могу получить значение в виде запроса GET, как показано ниже;однако я не хочу перезагружать страницу, но по некоторым причинам она перезагружается.

 `<?php
      $langId = request()->get('languageSelected');
  ?>`

Кто-нибудь?

Answer 1

вместо типа submit измените его на кнопку

<input id="ajaxSubmit" type="button" value="Select"/>

, и в php-файле вы должны получить идентификатор, а не languageSelected, потому что вы передали идентификатор в данные при вызове ajax.

 `<?php
  $langId = request()->get('id');
 ?>`

Answer 2

Звучит так, будто вы хотите напрямую прослушать событие изменения элемента select.

<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>

Answer 3

Попробуйте это -

1. Изменить тип = "кнопка" вместо отправки

   input id = "ajaxSubmit" type = "button" value = "Выбрать"

2. Нет необходимости в $.ajaxSetup.Скопируйте заголовки из $.ajaxSetup и переместитесь выше URL (внутри jQuery.ajax({)

Вы делаете другие вещи правильно.Теперь просто проверьте в контроллере, получаете ли вы id в параметре post, используя var_dump ($request->all())