Laravel AJAX response loads wrong route/window

Question

I have two routes:

Route::get('/download/{hash}','DownloadController@exists')->name('exists');
Route::post('/download/{hash}','DownloadController@verify')->name('verify');

Procedure:

Basically the user enters a URL e.g. localhost/download/56iq45agosasa the first route is called and the download.blade.php view is shown. There is a form, where the user has to input a password and when the submit button is clicked, an ajax request is sent to the second (post) route.

The DownloadController@verify returns the json but displays it in a blank window (see screenshot) But it should be returned in the download.blade.php view.

Somehow the form disappears and the ajax success function is not called.

Code snippets Download.blade.php:

@section('content')
<div class="container-fluid mt-5">
    <div class="row justify-content-md-center">
        <div class="col-md-4">
            <form method="POST">
                <label for="uploadPassword">Password</label>
                <input type="password" name="password" class="form-control" id="uploadPassword" placeholder="Password" required="">
                <button id="btn-submit" type="submit" class="btn btn-success mt-2">Submit</button>
                {{ csrf_field() }}
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script type="text/javascript">
    $(".btn-submit").click(function(e){

        e.preventDefault();
        let password = $("input[name=password]").val();
        $.ajax({
            type:'POST',
            url:"",
            data:{
                password:password
            },
            success:function(data){
                console.log("I don't get shown");
                //alert(data.success + " " + data.matches);
            }
        });
    });
</script>
@endpush

DownloadController:

class DownloadController extends Controller
{
public function exists(Request $request, $hash)
{

    // Some private mysql queries

    // Return the hash to the download view
    return view('download',[
        'hash' => $hash
    ]);
}

public function verify(Request $request, $hash)
{
    return response()->json(
        ['success'=>'Got Simple Ajax Request.']
    );
}
}

If `@push('scripts')` pushes to scripts on the top of your page you should wrap that script in a `$(document).ready(function () { ... });` to ensure you're attaching the listener at a time where it actually exists. Also, a form submit handler is generally better practice since forms can be submitted without clicking the submit under certain circumstances — apokryfos, May 14 '20 at 13:38
okay thank you! So; I should remove the button on submit listener (deactivate it) and add a form submit listener instead? — Alan, May 14 '20 at 13:43
yes. That way you can also capture someone typing in a password and pressing {enter} which is a common thing to do — apokryfos, May 14 '20 at 13:44
@apokryfos It worked perfectly! Thanks a lot. As you helped me to solve it, if you want write a short answer so that I can mark it as correct! — Alan, May 14 '20 at 13:57

score 1 · Accepted Answer · answered May 14 '20 at 14:07

So there are two things that will help improve this code:

Wrap the listener in a document.ready function to ensure it's attached when the button is available in the page. This is necessary if @push will make the script end up above the form declaration in the page.
Listen for the form submit event so you can capture the submit via any of the possible ways that one can submit a form (e.g. by pressing ENTER on an input)

@push('scripts')
<script type="text/javascript"> 
$(function () {
    $("form").on('submit', function (e) {

        e.preventDefault();
        let password = $("input[name=password]").val();
        $.ajax({
            type:'POST',
            url:"",
            data:{
                password:password
            },
            success:function(data){
                console.log("I don't get shown");
                //alert(data.success + " " + data.matches);
            }
        });
    });
});
</script>
@endpush

score 0 · Answer 2 · answered May 14 '20 at 13:25

0

The problem here is that the form gets submitted. Instead of overriding button click with your jQuery function, use it to change submit handler like so

Prevent Default on Form Submit jQuery

Make sure you put id on the form.

answered May 14 '20 at 13:25

baklazan

814
6
13

Can you please elaborate your answer? I now let the form return false on submit but nothing happens – Alan May 14 '20 at 13:30

Laravel AJAX response loads wrong route/window

2 Answers2