Ajax autosave selection without submit button

Are you using Vue JS?

@SERGIU17 - No i am using laravel simple select drop down

This can be done in Multile ways if you are using Jquery you need to write an event handler that listens to the onchange event . see example below

function dropdownUpdate() {

 $('#update').on('change', function(e) {
    
    e.preventDefault();
        
    // post to your route use axios or ajax here
    
        axios({
             method: 'post',
            url: '/myupdateroute/new',
            data: {
                firstName: 'Fred',
                lastName: 'Flintstone'
        }
    });
}

Also checkout the Axios doc on . https://github.com/axios/axios

In Laravel you need to have a defined POST route that this will post to and return a response:

an example Controller function ..

public function myUpdateFunction(Request $request) {

$name= $request->get('firstName');

$model = new Model(); $model->firstName = $name; $model->save();

return response()->json([ 'name' => $name ]);

}

Good Luck ..

@PEACENGARA - thanks for reply but cant work i am new in ajax so can be more explain

here is my code

blade file

<select class="form-control m-input" id="#update" name="status">
        <option value="underprocess">Under Process</option>
           <option value="reject">Reject</option>
           <option value="clear">Clear</option>
</select>

Ajax code

<script>
        function dropdownUpdate() {
        $('#update').on('change', function(e) {
                e.preventDefault();             
                axios({
                    method: 'post',
                    url: 'round/update/{id}',
                    data: {
                            status: 'status'
                    }
                });
        }
</script>

Are You use Ajex???

@VANDAN29 - yes i try in ajax but i m new in ajax so i cant uderstand how it work please help me out

No i am using laravel

Brilliant

@van1310

<select class="form-control m-input" id="update" name="status">
    <option value="underprocess">Under Process</option>
    <option value="reject">Reject</option>
    <option value="clear">Clear</option>
</select>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    document.querySelector('#update').addEventListener('change', function (e) {
        axios.patch('/update-route', {
            value: this.value
        })
    });
</script>

@SERGIU17 - not work i try this

<select class="form-control m-input" id="update" name="status">
        <option value="underprocess">Under Process</option>
        <option value="reject">Reject</option>
        <option value="clear">Clear</option>
</select>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
        document.querySelector('#update').addEventListener('change', function (e) {
        axios.patch('round/update/', {
            value: this.value
        })
    });
</script>

@VAN1310 - do you have registered route?

Route::patch('/round/update', '');

I'd suggest you to open some books, watch some videos :) learn the basics..read description https://github.com/axios/axios https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

@SERGIU17 - i cant understand this packages please suggest me some other way to i do it

@VAN1310 - https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

@van1310 Please give me access to your codebase let me write it for you so you learn will commect every step ..

@PEACENGARA - i am using localhost so how to share my code

here is i try this

blade file

<select class="form-control m-input" id="status" name="status">
        <option value="underprocess" >Under Process</option>
           <option value="reject">Reject</option>
        <option value="clear">Clear</option><br>
</select>

javascript file

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
        $(document).ready(function(){
        $('select').live('change',function () {
                var statusVal = $(this).val();
                alert(statusVal);
                $.ajax({
                    type: "POST",
                    url: "round/update",
                    data: {statusType : statusVal },
                    success: function(msg) {
                        $('#autosavenotify').text(msg);
                    }
                })
        });
    });
</script>

route file

Route::post('round/update               /{id}',array('as'=>'round.edit','uses'=>'Admin\RoundController@status_update'));

controller file

public function status_update(Request $request,$id)
    {
        \DB::table('rounds')
                ->where('id','=',$id)
                ->update([   
                    'status'=>$request->get('status')]);
                flash('Status Updated')->success();                        
                return back();
    }

please help me

@van1310 In this code what is error you get ?

You say about error then we can suggest you something ?

@JAY_CHAUHAN - nothing error i just click my dropdown then cant update my status value so can you suggest some better solution

check following code i hope this will work for you.

Ajax Status Update

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
    $( "#status" ).change(function() { 
        var id =$("#hid").val();
        var status =$("#status").val();
        console.log(status + " " + id);
        $.ajax({
            type: "GET",
            url: "update/"+ id + "status/" + status,
            success: function(data){
            console.log(data);
            $("#update").val(data);
            },
        });
    });
</script>

route file

Route::get('round/update/{id}/{status}',array('as'=>'round.edit','uses'=>'Admin\RoundController@status_update'));

blade file

<input type="hidden" id="hid" value="{{$view->id}}" name="hid">
<select class="form-control m-input" id="status" name="status">
<option value="underprocess" >Under Process</option>
<option value="reject">Reject</option>
<option value="clear">Clear</option><br>
 </select>                  
<div id="autosave"></div>                                                           

@JAY_CHAUHAN - Thank You Bro You Are Such A Camp, Rockstar Or Many More

Its Totally Working Thanks A Lot............

@van1310

Glad to hear that.

@vandan29 @jay_chauhan and what would be the controller method... because when I trying to do this...in my database it save 'success' json message not the value.