How to submit my form without reloading page? - php

Question

I need to save my form without reloading the page, I have tried all the methods...but I'm beginner at Ajax and I can't figure it out how to do that.
Here is the most relevant link, but when I press submit button, doesn't working.
How to send data without refreshing page in laravel?
My view
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content" style="top: 50px">
<div class="modal-header" style="border-bottom: none">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<section>
<div class="wizard col-md-6" style="right: 5px;margin: 0px auto">
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul class="nav nav-tabs" role="tablist" style="margin: 0px auto">
<li role="presentation" class="active">
<a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
<span class="round-tab">
<i class="icon-pencil"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
<span class="round-tab">
<i class="icon-note"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
<span class="round-tab">
<i class="icon-check"></i>
</span>
</a>
</li>
</ul>
</div>
<form role="form" action="{{ action('CareerSolutionController#careerReport') }}" method="post">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="hidden" name="user_id" value="{{ Sentinel::check()->id }}">
<input type="hidden" name="user_id_posted" value="{{ $career_solution->user->id }}">
<input type="hidden" name="career_solution_id" value="{{ $career_solution->id}} ">
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="step1">
<h3>Why are you reporting this content :</h3>
<ul style="list-style: none">
<li>
<input type="radio" id="box-9" name="why_reporting" value="Spam">
<label for="box-9">Spam</label>
<div class="check"></div>
<small id="box-9-s" style="display: none">I consider this content irrelevant and annoying.</small>
</li>
<li>
<input type="radio" id="box-10" name="why_reporting" value="Fake Profile">
<label for="box-10">Fake Profile</label>
<div class="check"><div class="inside"></div></div>
<small id="box-10-s" style="display: none">This content was posted by way of a profile that clearly doesn't represent a real person.
</small>
</li>
<li>
<input type="radio" id="box-11" name="why_reporting" value="Advertising">
<label for="box-11">Advertising</label>
<div class="check"><div class="inside"></div></div>
<small id="box-11-s" style="display: none">This content is or contains advertising.
</small>
</li>
<li>
<input type="radio" id="box-12" name="why_reporting" value="Untrustworthy source">
<label for="box-12">Untrustworthy source</label>
<div class="check"><div class="inside"></div></div>
<small id="box-12-s" style="display: none">This content is from an untrustworthy source and contains unverifiable statements.
</small>
</li>
<li>
<input type="radio" id="box-13" name="why_reporting" value="Defamatory">
<label for="box-13">Defamatory</label>
<div class="check"><div class="inside"></div></div>
<small id="box-13-s" style="display: none">The reported content is insulting or defamatory to me or other people.
</small>
</li>
<li>
<input type="radio" id="box-14" name="why_reporting" value="Violence or pornography">
<label for="box-14">Violence or pornography</label>
<div class="check"><div class="inside"></div></div>
<small id="box-14-s" style="display: none">This content contains violence or pornography.
</small>
</li>
<li>
<input type="radio" id="box-15" name="why_reporting" value="Violates IP rights">
<label for="box-15">Violates IP rights</label>
<div class="check"><div class="inside"></div></div>
<small id="box-15-s" style="display: none">This content includes third-party content (e.g. an image) posted under their own name.
</small>
</li>
<li>
<input type="radio" id="box-16" name="why_reporting" value="Promotes structural distribution measures">
<label for="box-16">Promotes structural distribution measures</label>
<div class="check"><div class="inside"></div></div>
<small id="box-16-s" style="display: none">This content promotes a chain distribution system, multilevel selling or pyramid sales.
</small>
</li>
<li >
<input type="radio" id="box-17" name="why_reporting" value="Other">
<label for="box-17" id="other">Other</label>
<div class="check"><div class="inside"></div></div>
<div class="form-group" id="mydiv" style="display: none">
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Please let us know why you're reporting this content:
" style="resize: none" name="why_reporting_message"></textarea>
</div>
</li>
</ul>
<ul class="list-inline pull-right">
<li><button style="background-color: #18ba9b;border-color: white" type="button" class="btn btn-primary next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step2">
<h3>Why would you like to report this?</h3>
<div class="form-group">
<textarea class="form-control" id="exampleFormControlTextarea1" rows="5" style="resize: none" placeholder="
Please let us know why you're reporting this content:" name="additional_message"></textarea>
</div>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-default next-step">Skip</button></li>
<li><button style="background-color: #18ba9b;border-color: white" type="button" class="btn btn-primary btn-info-full next-step" id="save">Submit your report</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step3">
<h2 class="title-box-v2" style="font-size: 17px !important;line-height: 35px">We'll look into this as soon as possible. Thanks for helping us improve the quality of content on Workstickers.</h2>
<p style="text-align: center">You have successfully completed all steps.Flagged content and users are reviewed by Workstickers staff 24 hours a day, seven days a week to determine whether they violate Community Guidelines. Accounts are penalized for Community Guidelines violations, and serious or repeated violations can lead to account termination.
</p>
<div style="text-align: center;margin-top: 50px">If you've changed your mind - Cancel report</div>
</div>
<div class="clearfix"></div>
</div>
</form>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END MY MODAL -->
Ajax
<script>
$(document).on("click",".save",function(){
e.preventDefault(); //Prevent page from submiting
$(document).on("click", ".save", function() {
$.ajax({
type: "post",
url: 'career_report',
data: $(".why_reporting").serialize(),
success: function(store) {
},
error: function() {
}
});
});
});
</script>
My controller
public function careerReport(requ $request)
{
$report = \App\Reports::create([
'user_id' => $request['user_id'],
'user_id_posted' => $request['user_id_posted'],
'career_solution_id' =>$request['career_solution_id'],
'why_reporting' =>$request['why_reporting'],
'why_reporting_message' =>$request['why_reporting_message'],
'additional_message' =>$request['additional_message'],
]);
if($report != ""){
flash('Career solution report submited', 'success');
}else{
flash('Career solution report', 'warning');
}
return Redirect('career_report')->with('message',"success");
}

Answer 1

Your event listener for the click is wrongly declared (you have an event listener declared after the first event is triggered and end up with two event listener on 'click') plus you might have a wrong url in your ajax.
try this
<script>
$('form').on("submit", function(){
e.preventDefault(); //Prevent page from submiting
var data = new FormData(this);
var url = this.action;
var method = this.method;
$.ajax({
type: method,
url: url,
data: data,
success: function(store) {
},
error: function() {
}
});
});
</script>