Redirecting to a different route after submit form Laravel

Question

I'm trying to redirect my post route to another route after submitting a form. I've been looking in the documentation of Laravel, but everything that I try redirects me to the same page.

This is the controller

ProductReviewController

public function store(Request $request, Product $product)
{   
    auth()->user()->reviews()->create($request->all());

    return redirect()->route('welcome.show', compact('product'));
}

This is the route that I'm trying to redirect.

Web.php

Route::get('/products/{product}', [ 
'uses' => 'ProductController@showOne',
'as' => 'welcome.show'
]);

And this is the controller of this route

ProductController

public function showOne(Product $product, ProductReview $productReview)
{
    return view('welcome.show', ['product' => $product]);
}

What am I doing wrong? Because everytime that I try to redirect to this route it's throwing me this error.

"Symfony\Component\HttpKernel\Exception\NotFoundHttpException"

Throwing this new error when I change the controller code for:

New Controller code

public function store(Request $request, Product $product)
{   
auth()->user()->reviews()->create($request->all());

return redirect()->route('welcome.show', $product->id));
}

Error

"Missing required parameters for [Route: welcome.show] [URI: products/{product}]."

These are the views:

Vue Component

    <template>
    <form @submit.prevent="postReview">
            <div class="form-group">
                <p class="mt-4 text-center"><strong>How would you rate it?</strong></p>
                <h4 class=" offset-md-3"><star-rating v-model="formData.rating"></star-rating></h4> 
            </div>
            <hr>
            <div class="form-group">
                <label for="headline"><strong>Review title</strong></label>
                <input type="text" class="form-control" v-model="formData.headline" id="headline" placeholder="Add a title for your review">
            </div>
            <div class="form-group">
                <label for="description"><strong>Description</strong></label>
                <textarea v-model="formData.description" class="w-100 rounded pl-2 pt-2 border border-muted" style="height:100px" id="description" cols="30" rows="10" placeholder="Tell us about your experiences with this product"></textarea>
            </div>

            <button class="btn btn-primary rounded offset-md-4" type="submit">Send review</button>
    </form>
</template>

<script>
 export default {
    props:['product','url', 'user'],
    data(){
        return {
            formData:{}
        }
    },
    methods:{
        postReview(){
            this.formData.product_id=this.product.id;
            this.formData.user_name=this.user.first_name;

            axios.post(this.url,this.formData)
                .then(data=>{
                    location.reload();
                })
                .catch(error=>{
                    console.log(error.response);
                })
        }
    },
}
</script>

Blade view

    @extends('layouts.app')

@section('title')
Review
@endsection

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="col-md-12 product-img">
                <div class="card">
                    <div class="card-image">
                        <div class="carousel-item active">
                        <img class="d-block mx-auto" src="{{ $product->imageUrl }}" alt="First slide">
                        </div>
                    </div>
                </div>
            </div>
            <h5 class="text-center">{{ $product->title }}</h5>
        </div>
        <div class="col-md-6" id="app">
            <review-form
            :user="{{Auth::user()}}"
            :product="{{$product}}"
            url="{{route('review.store')}}">
            </review-form>
        </div>
    </div>
</div>
@endsection

are you able to go to the said route manually without errors? — Wreigh, May 30 '18 at 01:44
No, it isn't. It's an object, I did a dd() and it's showing its properties — , May 30 '18 at 02:19

score 3 · Accepted Answer · answered May 30 '18 at 16:18

I just solved my problem by adding this:

window.location.href = "/products/" + this.formData.product_id

This is my new Vuejs file:

    <template>
    <form @submit.prevent="postReview">
            <div class="form-group">
                <p class="mt-4 text-center"><strong>How would you rate it?</strong></p>
                <h4 class=" offset-md-3"><star-rating v-model="formData.rating"></star-rating></h4> 
            </div>
            <hr>
            <div class="form-group">
                <label for="headline"><strong>Review title</strong></label>
                <input type="text" class="form-control" v-model="formData.headline" id="headline" placeholder="Add a title for your review">
            </div>
            <div class="form-group">
                <label for="description"><strong>Description</strong></label>
                <textarea v-model="formData.description" class="w-100 rounded pl-2 pt-2 border border-muted" style="height:100px" id="description" cols="30" rows="10" placeholder="Tell us about your experiences with this product"></textarea>
            </div>

            <button class="btn btn-primary rounded offset-md-4" type="submit">Send review</button>
    </form>
</template>

<script>
 export default {
    props:['product','url', 'user'],
    data(){
        return {
            formData:{}
        }
    },
    methods:{
        postReview(){
            this.formData.product_id=this.product.id;
            this.formData.user_name=this.user.first_name;

            axios.post(this.url,this.formData)
                .then(data=>{
                    window.location.href = "/products/" + this.formData.product_id;
                })
                .catch(error=>{
                    console.log(error.response);
                })
        }
    },
}
</script>

score 0 · Answer 2 · answered May 30 '18 at 02:31

0

If your route has parameters, you may pass them as the second argument to the route method:

// For a route with the following URI: /products/{product}

    return redirect()->route('welcome.show', ['product' => $product]);

answered May 30 '18 at 02:31

スージン

143
8

I'm doing it, but it's throwing me the same error. What do you think which is the problem? – May 30 '18 at 02:39

Purvesh · Answer 3 · 2018-05-30T06:04:53.710

0

I am not sure but I guess $product is an model object or other kind of object I guess. In that case if your route expect $product->slug or $product->Id then

return route(“welcome.show”, [“product” => $product->id]);

Just return the route url and then change your Vue component script like below:

<script>
export default {
props:['product','url', 'user'],
data(){
    return {
        formData:{}
    }
},
methods:{
    postReview(){
        this.formData.product_id=this.product.id;
        this.formData.user_name=this.user.first_name;

        axios.post(this.url,this.formData)
            .then(function(response){
                   location.href = response;// Honestly i am not expert in vue but i would guess it should work something like this.

            })
            .catch(error=>{
                console.log(error.response);
            })
        }
    },
}
</script>

edited May 30 '18 at 06:04

answered May 30 '18 at 04:04

Purvesh

628
7
12

Yes, I'm trying to redirect it, but now that I change it to your code. It throws me a new error. Look at the question, I edited it. – May 30 '18 at 04:26
Replace code like : return redirect()->route(“welcome.show”,[“product” => $product->id]); – Purvesh May 30 '18 at 04:31
Sending the same error. "Symfony\Component\HttpKernel\Exception\NotFoundHttpException" – May 30 '18 at 05:17
one thing i am not able to understand in your code is: why sending an ajax request using an axios then why you redirect to another route? If you want to send an ajax request then in controller you just return url that you want to redirect and inside an callback of ajax you use : location.url = url_from_controller. – Purvesh May 30 '18 at 05:49
take a look at this question: https://stackoverflow.com/questions/199099/how-to-manage-a-redirect-request-after-a-jquery-ajax-call – Purvesh May 30 '18 at 05:50
I've never thought on that. I was just trying to use a library of Vuejs and that's how they use it for submitting a form, but I didn't know how it was going to affect me in the moment of redirecting a route. So, for you. What's the best and simple way to solve this problem? – May 30 '18 at 05:57

score 0 · Answer 4 · edited May 30 '18 at 07:18

0

You are showing same route name and also redirecting on same route name. Try like this:

return redirect('route name');

edited May 30 '18 at 07:18

Loek

4,037
19
35

answered May 30 '18 at 04:38

PHP Geek

3,949
1
16
32

I tried what you're saying, and it's not throwing any error, but it's not taking me to any route. It just reload the route where I am when I submit the form. – May 30 '18 at 04:48
try window.location.href="url"; instead of location.reload(); – PHP Geek May 30 '18 at 05:37
I tried with name of the route and the URL of the route, but it doesn't redirect me to another view – May 30 '18 at 05:44

score 0 · Answer 5 · answered May 30 '18 at 05:24

0

In your js section you have added the code :
 axios.post(this.url,this.formData)
                .then(data=>{
                    location.reload();
                })
                .catch(error=>{
                    console.log(error.response);
                })

here you are reloading the page..
write the redirection code at place of location.reload except in controller.
I hope it will work

answered May 30 '18 at 05:24

PHP Geek

3,949
1
16
32

And you know how can I do that? – May 30 '18 at 05:31

score 0 · Answer 6 · answered May 30 '18 at 05:33

0

Try this one

return redirect()->action('ProductController@showOne', ['product' => $product]);

answered May 30 '18 at 05:33

DsRaj

2,288
1
16
26

Redirecting to a different route after submit form Laravel

6 Answers6