I want to insert data using Ajax in Laravel 5.3.But when I press submit button screen gets refreshed.
My Code
$(document).ready(function(){
//button id//
$('#submit').click(function(){
//form id//
$('#new_form').submit(function(e){
e.preventDefault();
var name = $('#name').val();
$.ajax({
type: "POST",
url: "/store_form", //controller function
data: "name="+ name ,
success: function(){
alert("sucess");
});
});
});
});
How I can I do it ?
Remove the line of the button $('#submit').click(...
And only left the code as follow
$(document).ready(function(){
//form id//
$('#new_form').submit(function(e){
e.preventDefault();
var name = $('#name').val();
$.ajax({
type: "POST",
url: "/store_form", //controller function
data: "name="+ name ,
success: function(){
alert("sucess");
});
});
});
You can replace
$('#submit').click(function(){
//form id//
$('#new_form').submit(function(e){
with only
$('#new_form').submit(function(e){ if you are talking about same form and submit button is ```<input type=submit``` and if there are two forms
you can do $('#new_form, #new_form2').submit(function(e){
and add your js with {!! Html::script('js/script.js') !!} using illuminate
if you are still facing problem please post the error as well as php code.
Related
I am trying to submit an AJAX form with Laravel using the code shown below. After I submit the form, all the data is saved in the database as expected apart from the following field which is displayed as NULL in the database.
<textarea name="content" id="editor"></textarea>
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$(".btn-submit-add-video").each(function(){
$(this).on("click",function(e){
e.preventDefault();
let form = $(this).closest('form');
$.ajax({
type:'POST',
url: form.attr('action'),
data: form.serialize(),
success:function(data){
alert(data.successful);
}
});
})
});
</script>
public function addVideo(Request $request)
{
$addVideo = new cms_videos;
$addVideo->VideoStatus = $request->VideoStatus;
$addVideo->VideoTitle = $request->VideoTitle;
$addVideo->VideoStrapline = $request->VideoStrapline;
$addVideo->VideoURL = $request->VideoURL;
$addVideo->VideoDescription = $request->content;
$addVideo->VideoTags = $request->VideoTags;
$addVideo->MetaActName = $request->MetaActName;
$addVideo->MetaRegion = $request->MetaRegion;
$addVideo->MetaGenre = $request->MetaGenre;
$addVideo->MetaVenue = $request->MetaVenue;
$addVideo->VideoCoverPhoto = $request->VideoCoverPhoto;
$addVideo->save();
return response()->json(['successful'=>'Video successfully added']);
}
After doing some research I was told to add the following code to the top of the code shown above:
CKEDITOR.instances.SurveyBody.updateElement();
Now all the data is submitted to the database as expected. However when I now submit the form instead of an alert popping up saying "Successful" I am now redirected to the form action URL where it displays "Successful". How can I stop this redirection and display the alert on the page the form was submitted?
I'm not sure but I think the issue is here when you do e.preventDefault() because it works for the button click not for form submission. Try this out and hope it will help you.
Notice: you have to add upload_video class to your forms
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
// If the button is type of submit you can remove this part of code
$(".btn-submit-add-video").each(function(){
$(this).on("click",function(e){
e.preventDefault();
let form = $(this).closest('form.upload_video');
form.submit();
})
});
//
$("form.upload_video").on('submit',function(e){
e.preventDefault();
let form = $(this),data=form.serialize();
//
let content=FCKeditorAPI.GetInstance('content').getData();
data['content']=content;
//
$.ajax({
type:'POST',
url: form.attr('action'),
data: data,
success:function(data){
alert(data.successful);
}
});
});
</script>
This part
let content=FCKeditorAPI.GetInstance('content').getData();
May not be true because I don't work with CKEDITOR right now and i can't test it but you can console.log() it before you send the ajax request and make sure the content exists in the variable as you expected.
i am using codigniter .when i am inserting or updating data in mysqldb data is inserting.my form is in popup.then alert is getting but redirecting was not working..issue is redirected is displaying in popup not to page .can you please tell the alternate solution ..i am using ajax update to my form
This is my code of controller
$testid=$this->objTests->updateTest();
echo "<script> alert('sucessfully updated');</script>"
redirect(base_url().'tests');
this is my following code of model:
$testData = array('simulationId' => $this->input- >post('simulationId'),
'testTitle' => $this->input->post('testTitle'),
'description ' => $this->input->post('description')
);
$this->db->where('id',$this->input->post('tid'));
$this->db->update('tests',$testData);
return $this->input->post('tid');
$(function(){
$( "#frmActiontest" ).submit(function( event ) {
var url = $(this).attr('action');
$.ajax({
url: url,
data: $("#frmActiontest").serialize(),
type: $(this).attr('method')
}).done(function(data) {
//window.location.href="http://neuronguru.com/MedAdmin/tests/";
window.location.reload();
/*$('#result').html(data);
$('#frmActiontest')[0].reset();*/
});
event.preventDefault();
});
$( ".test" ).on("click",function(event) {
var url = $(this).data('url');
var actionUrl = $(this).data('actionurl');
console.log(actionUrl);
$("#frmActiontest").attr('action',actionUrl);
$.ajax({
url: url,
type: "GET",
dataType: 'json'
}).done(function(data) {
data=data[0];
$("#myModalTestLabel").html("Update Test");
$("#simulationId").val(data.simulationId);
$("#testTitle").val(data.testTitle);
$("#description").val(data.description);
//$("#contents").val(data.contents);
$("#tid").val(data.id);
$("#testModal").trigger("click");
console.log(data);
});
event.preventDefault();
});
});
this is my ajax function for the above question
I'm currently trying to make an ajax POST request to send a testimonial simple form to a Django view. The problem is this request is returning a GET instead of a POST.
This is my ajax:
<script>
$(document).ready(function(){
$("form.testimonial-form").submit(function(e){
e.preventDefault();
var dataString = $(this).serialize();
$.ajax({
type: "POST",
url: "/testimonials",
data: dataString,
success: function(_data) {
if (_data[0]){
$('.modal-text').css({display: "none"});
}
else{
$('.unsuccess').css({display: "block"});
}
}
});
});
});
</script>
Any idea what could I be doing wrong?
replace type by method
method: 'post',
also you may need send headers:
headers: {
'X-CSRFToken': getCSRFToken()
},
where getCSRFToken is:
function getCSRFToken() {
return $('input[name="csrfmiddlewaretoken"]').val();
}
I am not really sure why this is happening, but i would write the function in a bit different way. since ajax();'s default type is "GET", i suspect somewhere it is being set to default.
first set the type="button" of submit button (whose id is e.g. "submit_button_id"), so it doesnot submits if you click on it. or put the button outside of <form>
then try this code
<script>
$(function(){ // same as "$(document).ready(function()"..
$("#submit_button_id").on('click',function(){
var dataString = $('form.testimonial-form').serialize();
$.ajax({
type: "POST",
url: "/testimonials",
data: dataString,
success: function(_data) {
if (_data[0]){
$('.modal-text').css({display: "none"});
}
else{
$('.unsuccess').css({display: "block"});
}
}
});
});
});
</script>
i want to refresh a particular div on ajax success, im using the below code but the whole page getting refreshed.
<script type="text/javascript">
$('#post_submit').click(function() {
var form_data = {
csrfsecurity: $("input[name=csrfsecurity]").val(),
post_text: $('#post_text').val()
};
$.ajax({
url: "<?php echo site_url('/post_status'); ?>",
type: 'POST',
data: form_data,
success: function(response){
$(".home_user_feeds").html("markUpCreatedUsingResponseFromServer");
}
return false;
});
return false;
});
</script>
you have an extra return false which is inside the $.ajax block which most probably causes an error so your form isn't submitted via ajax. If you remove that, you shouldn't have any issues.
Use the submit event of the form and remove the return false from the ajax callback:
$('#myFormId').on('submit', function() {
var form_data = {
csrfsecurity: $("input[name=csrfsecurity]").val(),
post_text: $('#post_text').val()
};
$.ajax({
url: "<?php echo site_url('/post_status'); ?>",
type: 'POST',
data: form_data,
success: function(response){
$(".home_user_feeds").html("markUpCreatedUsingResponseFromServer");
}
});
return false;
});
Remove the return false from inside your $.ajax function. Its a syntax error. The $.ajax function only expects a json object as an argument. "return false" cannot be part of a json object. You should keep the JavaScript console open during testing at all times - Press Ctrl-Shift-J in Chrome and select console to see any JS errors.
Also suggest you use <input type=button> instead of <input type=submit> or <button></button>
I have the following url in codeigniter.
Add to wishlist
and I have the following jquery function
<script>
$(document).ready(function(){
$('body').on('click', 'a.wishlist_item', function(e){
$.ajax({
url:"../add-item-to-wishlist",
data : "the query string",
success: function(result){
// success code.
}
});
e.preventDefault();
});
});
</script>
how do I get the query string value and pass to the above url ? the add-to-wishlist route redirect to a controller function which take exactly two parameters.
function add_to_wishlist($itemID,$wishlistID = NULL)
What I want to do is call this function using ajax but I dont know how do I call this using ajax
change your anchor URL to the controller method
href = "add_to_wishlist/5/21"
Then you can do a get request with the full URL
<script>
$(document).ready(function(){
$('body').on('click', 'a.wishlist_item', function(e){
e.preventDefault();
var obj = $(this);
$.ajax({
type:'get',
url:obj.attr('href'),
success: function(result){
// success code.
}
});
});
});
</script>