How to send data without refreshing page in laravel?

Question

I need send data to the database without refreshing page.

Home Blade :

<form class="chat" id="message" action="#" method="post">
    <input type="hidden" name="_token" id="_token" value="{{ csrf_token() }}">
    <li>
        <div class="panel-footer">
            <div class="input-group">
                <input type="text" name="message" class="" placeholder="Type your message here..." />
                <span class="input-group-btn">
                    <button type="submit" class=" btn-success btn-sm searchButton" id="save" >
                    Send
                    </button>
                </span>
            </div>
        </div>
    </li>
</form>

Controller :

public function message(Request $data)
{
    $ins = $data->all();
    unset($ins['_token']);
    $store = DB::table("chatbox")->insert([$ins]);
    return Redirect('Users/home')->with('message',"success");
}

Ajax :

<script>
$(document).on("click", ".save", function() {
    $.ajax({
        type: "post",
        url: '/Users/message',
        data: $(".message").serialize(),
        success: function(store) {

        },
        error: function() {
        }
    });
});
</script>

At present when I send data it is automatically refreshing the whole page but only the particular form need to be refreshed.

halfer · Accepted Answer · 2018-01-23 23:32:31Z

4

You should change the type of the button from submit to button like :

<button type="button" class=" btn-success btn-sm searchButton" id="save" >end</button>

Or prevent the default action (submit) using e.preventDefault(); like :

$(document).on("click",".save",function(){
    e.preventDefault(); //Prevent page from submiting
    ...
    ...
});

NOTE : Note also that you don't have button with class save but with id save so the event handler should looks like :

$(document).on("click", "#save", function(){
________________________^

edited Jan 23, 2018 at 23:32

halfer

20.2k20 gold badges111 silver badges208 bronze badges

answered Dec 15, 2017 at 12:04

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hemanth Over a year ago

but id we have save

Zakaria Acharki Over a year ago

Not sure what you mean, but since you've an id save the selector should be #save as my answer point, but in your original post you've class selector .save instead ...

linktoahref · Accepted Answer · 2017-12-15 12:25:35Z

3

You need to prevent the default form submission, and use the script instead

$(document).on("click", "#save", function(e) {

    e.preventDefault(); // Prevent Default form Submission

    $.ajax({
        type:"post",
        url: '/Users/message',
        data: $("#message").serialize(),
        success:function(store) {
            location.href = store;
        },
        error:function() {
        }
    });

});

and instead of returning a redirect, return the url from the controller and let the script handle the redirect

public function message(Request $data)
{
    $ins = $data->all();
    unset($ins['_token']);
    $store = DB::table("chatbox")->insert([$ins]);
    session()->flash('message', 'success');
    return url('Users/home');
}

edited Dec 15, 2017 at 12:25

answered Dec 15, 2017 at 12:04

linktoahref

8,0273 gold badges32 silver badges54 bronze badges

Comments

Paul · Accepted Answer · 2017-12-15 12:06:18Z

2

You have to handle function inside javascript/jquery form submit funtion and use e.preventDefault() to stop HTML to submit the form.

Try your ajax code in the below code type.

$('#message').submit(function(e) {
    e.preventDefault();
    //your ajax funtion here
});

You can reset/refresh your form in success function

 $("#message").trigger("reset");

answered Dec 15, 2017 at 12:06

Paul

4571 gold badge5 silver badges16 bronze badges

Comments

common sense · Accepted Answer · 2017-12-15 12:04:18Z

-1

Remove return Redirect('Users/home')->with('message',"success"); and just return an array like

return ['message' => 'success'];

answered Dec 15, 2017 at 12:04

common sense

3,9106 gold badges26 silver badges35 bronze badges

Collectives™ on Stack Overflow

How to send data without refreshing page in laravel?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related