CODEWITHSUNDEEP
javascriptphpjqueryajaxlaravel
User101
User101

Reputation: 125

Ajax call to get the value selected from a HTML Select Option

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

Answers (3)

timgvandijk
timgvandijk

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

Palak Jadav
Palak Jadav

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

Nikhil G
Nikhil G

Reputation: 2466

Try this -

  1. 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({ )

  1. You are doing other things properly. Now just check in the controller whether you are getting id in post parameter using var_dump($request->all())

Upvotes: 1

Related Questions