Submit Form using AJAX in Laravel 4

Question

How to make the page not refresh after I submit with the help of using AJAX in LARAVEL 4?

//xx.blade.php

{{ Form::open(['url' => '/booking/unit', 'method' => 'POST', 'id' => 'readForm']) }}
{{ Form::hidden('bookingid', $booking->id) }} 
{{ Form::hidden('unitid', $booking->unit) }} 
<button class="btn btn-warning" data-toggle="collapse" data-target="#{{$booking->id}}" type="submit">{{ $booking->status }}</button>
{{ Form::close() }}

alternative way i tried:

<form method="post" action="../booking/unit/" id="readForm" >
<input value="{{$booking->id}}" hidden name="bookingid" />
<input value="{{$booking->unit}}" hidden name="unitid" />
<button class="btn btn-warning" type="submit" id="readBtn" >{{ $booking->status }}</button>
</form>

//js

$("document").ready(function(){
$("#readForm").submit(function(){
    data = $(this).serialize();
    $.ajax({
        type: "POST",
        dataType: "json",
        url: "../booking/unit", 
        data: data,
        success: function(data) {
            alert("Form submitted successfully.\nReturned json: " + data["json"]);
        }
    });
    return false;
});

});

my page is still refreshing. why?

UPDATES [22nd July 2015] I actually have multiple table rows with the forms and the forms are having the same id. that caused the refreshing happened except for the first row of the form. I have changed the form id to class and this is solved! Thank you everyone! You guys are awesome and the answers are valuable. I will be extra careful next time. :D

Try preventing form submit like $("#readForm").submit(function(event){event.preventDefault()}); followed by your normal code!! — Guruprasad J Rao
– Guruprasad J Rao, Commented Jul 21, 2015 at 8:20
@TheAlpha can't get to see console because the page has refreshed. — hahahaha
– hahahaha, Commented Jul 21, 2015 at 8:59

Praveen Srinivasan · Accepted Answer · 2015-07-21 12:49:41Z

1

$("#readForm").submit(function(e){
    e.preventDefault();
});

Have you tried e.preventDefault in your ajax function. this only will stops refreshing the page

answered Jul 21, 2015 at 12:49

Praveen Srinivasan

1,6204 gold badges28 silver badges55 bronze badges

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

2 Comments

Praveen Srinivasan Over a year ago

$("#readForm").submit(function(e){ alert('Hurray..!'); }); Does this work for you? If yes means leave a comment

Praveen Srinivasan Over a year ago

So that something is wrong in your form. Do correct them. Or add full code. Have you tried normal form like <form method="post" action"/booking/unit"></form>

Raja Sekar · Accepted Answer · 2015-07-22 07:33:59Z

1

Basically when you click a submit button in a form, it will reload automatically. It is default behaviour. So you need to override the behaviour.

$("#readBtn").submit(function(e){
    e.preventDefault();
});

You have to capture the event in the call back of submit function and prevent it using preventDefault() method.

answered Jul 22, 2015 at 7:33

Raja Sekar

2,14017 silver badges23 bronze badges

Comments

Fatih Kahveci · Accepted Answer · 2015-07-21 08:25:24Z

0

{{ Form::open(['url' => '/booking/unit', 'method' => 'POST', 'id' => 'readForm']) }}
{{ Form::hidden('bookingid', $booking->id) }} 
{{ Form::hidden('unitid', $booking->unit) }} 
<button onclick="return false;" class="btn btn-warning" data-toggle="collapse" data-target="#{{$booking->id}}" type="submit">{{ $booking->status }}</button>
{{ Form::close() }}

This will work i think.

answered Jul 21, 2015 at 8:25

Fatih Kahveci

4504 silver badges15 bronze badges

2 Comments

hahahaha Over a year ago

im sorry to say that i can't add the onclick function to the button because i need to click the same button for another action.

Fatih Kahveci Over a year ago

Hmm. Try $('.btn-warning').click(function(){ e.preventDefault(); }); Something like that.

Dimi Mikadze · Accepted Answer · 2015-07-21 09:42:54Z

0

you need to prevent default

$("document").ready(function(){
$("#readForm").submit(function(e){

// prevent from submiting
e.preventDefault();

    data = $(this).serialize();
    $.ajax({
        type: "POST",
        dataType: "json",
        url: "../booking/unit", 
        data: data,
        success: function(data) {
            alert("Form submitted successfully.\nReturned json: " + data["json"]);
        }
    });
    return false;
});

});

answered Jul 21, 2015 at 9:42

Dimi Mikadze

4745 silver badges11 bronze badges

Collectives™ on Stack Overflow

Submit Form using AJAX in Laravel 4

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related