How to send data without refreshing page in laravel?
Solution 1
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");
Solution 2
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(){
________________________^
Solution 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');
}
Related videos on Youtube
Hemanth
Updated on June 04, 2022Comments
-
Hemanth about 2 years
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.
-
Hemanth over 6 yearsbut id we have save
-
Zakaria Acharki over 6 yearsNot 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 ...