After form submit it redirects to same page

Question

I am trying to achieve a simple create form using ajax The data is saved to the database, but the problem is that after submit, the page redirects to the same URL with the variables added in it example: localhost/items/create?_token=1r42dIWXc4oirlJ2gGbEWgZL1I32L6FefVdmy3zy&_token=1r42dIWXc4oirlJ2gGbEWgZL1I32L6FefVdmy3zy&txtName=kjsjksjksk&txtAmount=8202

web.php

Route::group(['middleware' => ['web']], function(){
    Route::get('/items', 'ItemController@index')->name('items');
    Route::get('/items/create', 'ItemController@create')->name('itemcreate');
    Route::POST('/items/store', 'ItemController@store')->name('itemstore');
});

ItemController

public function create()
{
    $customers = \App\Customer::all();
    return view("items.create")->with('customers', $customers);
}

public function store(Request $req)
{
    $item = new \App\Item;
    $item->name = $req->name;
    $item->details = $req->details;
    $item->total_amount = $req->total_amount;
    $item->customer_id = $req->customer_id;

    $item->save();

    return ['redirect' => route('items')];
}

create.blade.php

        $.ajax({
               type: 'POST',
                url: 'store',
                data: {
                    '_token': $('input[name=_token]').val(),
                    'name': $('input[name=txtName]').val(),
                    'details': $('textarea#txtDetails').val(),
                    'total_amount': $('input[name=txtAmount]').val(),
                    'customer_id': $('#customer').val(),
                },
                success: function (data){
                    //window.location = response.data.redirect;
                    alert("success");
                    // toastr.success('Workshop added successfully');
                    // setTimeout(function(){
                         alert("after timeout");
                    // }, 1000);
                }
            });

Notice the alerts in success function: 1- The first is displayed 2- The second one is not displayed, nor the toastr

I even tried adding a link and triggering the click function that redirects to the index page but it doesn't work

Any help?

Wolen · Answer 1 · 2017-12-28T17:57:27.043

2

Let's say you have form similar to that

<form action="someAction" method="POST">
  <input.../>
  <button id="button" type="submit"...>Submit</button>
</form>

And you use onclick event. For example

$('#button').on('click', function() {
  //your code
});

Now you can pass event as an argument in function() and use preventDefault() method on it. Example:

$('#button').on('click', function(event) {
  event.preventDefault();
  //your code
});

It will stop default behaviour of submit button.

edited Dec 28 '17 at 17:57

answered Dec 28 '17 at 14:54

Wolen

874
6
15

Or make the button type="button" – ellipse-of-uncertainty Dec 28 '17 at 14:55
Okay so now the page is not adding variable to URL but i still have a problem: I added an anchor: and on success i added: $('#aftersave').click(); why it is not working? – Guest012393 Dec 28 '17 at 15:23
@Guest012393 ```.click()``` is a shortcut for ```.on('click', function() {})```. To emit click use ```.trigger('click')```. – Wolen Dec 28 '17 at 17:56
@Guest012393 yeah, I didn't know that it won't work because of security reasons. But you can read [Jquery how to trigger click event on href element](https://stackoverflow.com/questions/7999806/jquery-how-to-trigger-click-event-on-href-element) – Wolen Dec 29 '17 at 15:10

After form submit it redirects to same page

1 Answers1