Calling controller function redirects to a blank page

Question

I have a several fieldsets in my view, each fieldset has a submit button

<button class="next action-button" type="submit" name="next" data-gotostep="3">(Save & Next)</button>

The buttons call this route

Route::get('worksteps/store/{subprocess_id}', 'WorkstepsController@store')->name('worksteps.store');

store function

public function store(StoreWorkstepRequest $request)
{
    
    $created_by_id = Auth::user()->id;

    $value = $request->target_value;
    $unit  = $request->unit;
    $subprocess_id = $request->subprocess_id;
    $step_position = $request->subprocess_step_position;
    $step_system_id = $request->subprocess_system_id;
    $registry_date = Carbon::now()->toDateTimeString();

    DB::table('subprocess_registry')->updateOrInsert(
        ['subprocess_id' => $step_system_id],
        ['value' => $value,
         'unit' => $unit,
         'step_position' => $step_position,
         'created_at' => $registry_date,
         'created_by_id' => $created_by_id,
        ]
    );

    return back();
  
}

Everything works as expected except the return back(); line that redirects to a blank white page I just need to call the store method without returning anything and without making any changes to the view.

Tried

return back();
return redirect()->back();
return redirect()->previous();

They all redirect back a blank page, also tried to completely remove the return statement. How can I call the store function in sort of in background without affecting the view?

Answer 1

You could achieve it with AJAX:

First add jquery:

Change the button type to button so that it doesn't try to submit the form in the traditional manner:

<button class="next action-button" type="button" name="next" data-gotostep="3">(Save & Next)</button>

AJAX submit:

$(document).ready(function() {
    $('.next.action-button').on('click', function() {
        var subprocess_id = $(this).data('gotostep'); // Retrieve subprocess_id from the button data attribute
        $.ajax({
            url: '/worksteps/store/' + subprocess_id,
            type: 'GET',
            data: {
                target_value: $('input[name="target_value"]').val(),
                unit: $('input[name="unit"]').val(),
                subprocess_id: $('input[name="subprocess_id"]').val(),
                subprocess_step_position: $('input[name="subprocess_step_position"]').val(),
                subprocess_system_id: $('input[name="subprocess_system_id"]').val(),
            },
            success: function(response) {
                console.log(response);
            },
            error: function(xhr, status, error) {
                console.error(error);
            }
        });
    });
});

And in your controller you should return JSON:

return response()->json(['status' => 'success', 'message' => 'Data saved successfully']);