how to change a selections options based on another select option selected (Array)?

I have 2 select options fetched in foreach as many as my records goes. I want to change the drop down options in second select options based on what I select in first select options.

I have 2 select options fetched in foreach as many as my records goes. I want to change the drop down options in second select options based on what I select in first select options.

<select id="main[{{$user->id}}]">
   <option value="a">A</option>
   <option value="b">B</option>
   <option value="c">C</option>
<select>

select option if A is selected from first select option

<select id='sub[{{$user->id}}]'>
   <option value="1">1</option>
   <option value="2">2</option>
</select>

I tried the normal method but it works for just the first select

$('#main').change(function() {
    var options = '';
    if($(this).val() == 'a') {
        options = '<option value="1">1</option>';
    }
    else if ($(this).val() == 'b'){
        options = '<option value="2">2</option>';
    }
$('#sub').html(options);

});


Laravel Development Company | Hire Laravel Developer

Laravel Development Company | Hire Laravel Developer

Get a free quote for custom Laravel Development Services from a trusted Laravel web development company. Hire Laravel Developers now @ best affordable rates

Get a free quote for custom Laravel Development Services from a trusted Laravel web development company. Hire Laravel Developers now at best affordable rates

Laravel 6 Ajax Request Tutorial

Laravel 6 Ajax Request Tutorial

In this post, you'll learn how to write jquery ajax form submit in Laravel 6. We will write Jquery Ajax post request Laravel 6. We will protect csrf token with Ajax request in Laravel 6. I will give you very simple example of Laravel 6 Ajax post request tutorial.

You can easily use Ajax get request, Ajax post request, Ajax put request, Ajax delete request ect with Laravel 6.

Ajax request is a basic requirement of any PHP project, we are always looking for without page refresh data should store in database and it's possible only by Jquery Ajax request. same thing if you need to write ajax form submit in Laravel 6 then i will help you how you can pass data with ajax request and get on controller.

If you want to add ajax request with validation then you can follow this article: Laravel 6 Ajax Form Validation

You have to just do three things to understand how to use ajax request in Laravel 6, so just follow this three step and you will learn how to use Ajax request in your Laravel 6 application.

Step 1: Create Routes

First thing is we put two routes in one for displaying view and another for post Ajax. So simple add both routes in your route file.

routes/web.php

Route::get('ajaxRequest', '[email protected]');
Route::post('ajaxRequest', '[email protected]')->name('ajaxRequest.post');

Step 2: Create Controller

Same things as above for routes, here we will add two new method for routes. One will handle view layout and another for post ajax request method, so let's add bellow:

app/Http/Controllers/HomeController.php

<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;

class AjaxController extends Controller
{
/**
* Create a new controller instance.
*
* @return void
*/
public function ajaxRequest()
{
return view('ajaxRequest');
}

/**
 * Create a new controller instance.
 *
 * @return void
 */
public function ajaxRequestPost(Request $request)
{
    $input = $request-&gt;all();
    \Log::info($input);

    return response()-&gt;json(['success'=&gt;'Got Simple Ajax Request.']);
}

}

Read Also: Laravel 6 CRUD Application Tutorial

Step 3: Create Blade File

Finally we require to create ajaxRequest.blade.php file and here we will write code of jquery ajax and pass Laravel token. So blade file is very important in ajax request. So let's see bellow file:

resources/views/ajaxRequest.blade.php

<!DOCTYPE html>
<html>
<head>
<title>Laravel 6 Ajax Request example</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<meta name="csrf-token" content="{{ csrf_token() }}" />
</head>
<body>

&lt;div class="container"&gt;
    &lt;h1&gt;Laravel 6 Ajax Request example&lt;/h1&gt;

    &lt;form &gt;

        &lt;div class="form-group"&gt;
            &lt;label&gt;Name:&lt;/label&gt;
            &lt;input type="text" name="name" class="form-control" placeholder="Name" required=""&gt;
        &lt;/div&gt;

        &lt;div class="form-group"&gt;
            &lt;label&gt;Password:&lt;/label&gt;
            &lt;input type="password" name="password" class="form-control" placeholder="Password" required=""&gt;
        &lt;/div&gt;

        &lt;div class="form-group"&gt;
            &lt;strong&gt;Email:&lt;/strong&gt;
            &lt;input type="email" name="email" class="form-control" placeholder="Email" required=""&gt;
        &lt;/div&gt;

        &lt;div class="form-group"&gt;
            &lt;button class="btn btn-success btn-submit"&gt;Submit&lt;/button&gt;
        &lt;/div&gt;

    &lt;/form&gt;
&lt;/div&gt;

</body>
<script type="text/javascript">

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

$(".btn-submit").click(function(e){

    e.preventDefault();

    var name = $("input[name=name]").val();
    var password = $("input[name=password]").val();
    var email = $("input[name=email]").val();

    $.ajax({
       type:'POST',
       url:"{{ route('ajaxRequest.post') }}",
       data:{name:name, password:password, email:email},
       success:function(data){
          alert(data.success);
       }
    });

});

</script>

</html>

Now you can run your example and see.

You will get output like as bellow:

Output

[2019-09-17 03:54:19] local.INFO: array (
'name' => 'Hardik Savani',
'password' => '123456',
'email' => '[email protected]',
)

I hope it can help you

Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow me on Facebook | Twitter

Further reading

☞ Tutorial Laravel 6 with Docker and Docker-Compose

☞ Laravel 6 CRUD Application Tutorial

☞ What's New in Laravel 6.0?

Originally published https://itsolutionstuff.com


Laravel Tutorial - Abusing Laravel

Laravel Tutorial - Abusing Laravel

Laravel Tutorial - Abusing Laravel: In this talk, Gustavo takes a look at the importance of Unit Tests and how Dependency Injection, which is often not promoted by Laravel docs, can help to achieve Unit Testing.

In this talk, Gustavo takes a look at the importance of Unit Tests and how Dependency Injection, which is often not promoted by Laravel docs, can help to achieve Unit Testing.

Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading about Laravel

Laravel 5.8 Tutorial for Beginners

Learn GraphQL with Laravel and Vue.js - Full Tutorial

Export or Import of CSV or Excel file in Laravel 5.8 with MySQL

Laravel 5.8 CRUD Tutorial With Example Step By Step

Build RESTful API In Laravel 5.8 Example