How to redirect to the first modal when submit button on the second modal clicked using Laravel 5.2?

Question

I am using laravel 5.2 and I have a button on the first modal to add a list in my dropdownlist. When it clicked, it shows the second modal and the first modal is closed. And I want when I clicked the submit button on the second modal, the data is insert into the database and then the second modal is closed and the first modal shows with the new added list in my dropdownlist.

If I am using this code as the submit button on the second modal, after submit the modal is closed and the first modal showed, but the data won't saved to the database.

<button type="submit" data-toggle="modal" data-target="#first_modal" data-dismiss="modal" class="btn btn-round btn-success pull-right">Submit</button>

And if I am using this code, the data is saved perfectly into the database, but it will redirect me into the main page, not into the first modal.

<button type="submit" class="btn btn-round btn-success pull-right">Submit</button>

This is the submit function in my controller.

public function AddClientLead(Request $request)
{
    $client = new Client;
    $client->CLI_CLIENTCODE = $request['cli_code'];
    $client->CLI_CLIENTNAME = $request['cli_name'];
    $client->CLI_ADDRESS = $request['cli_address'];
    $client->CLI_PHONE = $request['cli_phone'];
    $client->CLI_EMAIL = $request['cli_email'];
    $client->CLI_WEBSITE = $request['cli_website'];
    $client->CLI_REMARK = $request['cli_remark'];
    $client->CLI_CREATEDBY = 'HPT';
    $client->CLI_CREATEDDATE = date('Y-m-d H:i:s');
    $client->save();
    return redirect()->back();
}

Answer 1

When your first modal is being shown, check whether it is being triggered by the second model's button

$('#first_modal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) // Button that triggered the modal
    var source = button.data('source') // Extract info from data-* attributes

    if (source == 'second-modal') {
        // Get the form data and send it to server via ajax
        $.ajax({
            url: "AddClientLead", // YOUR ROUTE URL
            type: "get", // SHOULD MATCH THE TYPE WITH YOUR ROUTE DEFINITION
            cache: false,
            data: $("#second-form").serialize(); // second form's handle
            success: function(data) { 
                console.log(data);
            }
        });
    }
});

Also modify your second modal's button as

<button type="submit" data-toggle="modal" data-target="#first_modal" 
        data-dismiss="modal" data-source="second-modal"
        class="btn btn-round btn-success pull-right">Submit</button>

and do add data-source to your first modal's button as data-source="first-modal"

Finally, instead of returing a redirect from the controller you could return the persisted object so that it would be available to your ajax's success callback function.

public function AddClientLead(Request $request)
{
    ...

    return response()->json($client);
}