I would like to submit my form without reloading the page after pressing the submit button.But everything I have tried doesn't worked.Can you give me some help with ajax code please?
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">
<div class="modal-header" style="border-bottom: none;padding: 0px 0px;right: 15px;top: 10px;position:relative">
<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" >
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul style="border:none !important" 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="/career_report" method="post">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
#if(Sentinel::check())
<input type="hidden" name="user_id" value="{{ Sentinel::check()->id }}">
<input type="hidden" name="username" value="{{ Sentinel::check()->username }}">
#endif
<input type="hidden" name="subject" value="{{url()->current()}}">
<input type="hidden" name="user_id_posted" value="{{ $event->user->id }}">
<input type="hidden" name="username_posted" value="{{ $event->user->username }}">
<input type="hidden" name="career_solution_id" value="{{ $event->id}} ">
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="step1">
<h3 style="text-align: center">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 type="button" class="btn btn-default" data-dismiss="modal">Close</button></li>
<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" data-dismiss="modal">Close</button></li>
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button style="background-color: #18ba9b;border-color: white" type="submit" 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 -->
<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 route
Route::post('career_report', 'CareerSolutionController#careerReport');
My controller
public function careerReport(requ $request)
{
$report = \App\Reports::create([
'user_id' => $request['user_id'],
'username' => $request['username'],
'user_id_posted' => $request['user_id_posted'],
'username_posted' => $request['username_posted'],
'career_solution_id' =>$request['career_solution_id'],
'subject' =>$request['subject'],
'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::back();
}
What I have tried:
I tried to adapt this to my code, but without success. Trying to submit my laravel form without the page refreshing
you can use Jquery Ajax .
$('#yourFormId').submit(function(e){
e.preventDefault();
var data = $(this).serialize();
$.ajax({
method:'POST',
url:'your process file URL',
data:data,
success: function (result) {
// do something with result
}
});
});
in this example i have used $.Ajax method
when you use e.preventDefault(); your form will not be submitted . so you can manually submit it in Javascript . in the submit event , you use Ajax and it sends your form data to your process file and then returns the result . without refreshing page or redirecting .
Related
I want to create CRUD on admin dashboard, but But when i click submit button, i got this error message "POST method is not supported for this route. Supported method: GET, HEAD."
My View
#extends('layouts.admin')
#section('content')
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h3>Add Products
BACK
</h3>
</div>
<div class="card-body">
#if ($errors->any())
<div class="alert alert-danger">
<ul>
#foreach ($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
</div>
#endif
<form action="{{ url('admin/products') }}" method="POST" enctype="multipart/form-data">
#csrf
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab"
data-bs-target="#home-tab-pane" type="button" role="tab"
aria-controls="home-tab-pane" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="seotag-tab" data-bs-toggle="tab"
data-bs-target="#seotag-tab-pane" type="button" role="tab"
aria-controls="seotag-tab-pane" aria-selected="false">SEO
Tags</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="details-tab" data-bs-toggle="tab"
data-bs-target="#details-tab-pane" type="button" role="tab"
aria-controls="details-tab-pane" aria-selected="false">Details</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="image-tab" data-bs-toggle="tab"
data-bs-target="#image-tab-pane" type="button" role="tab"
aria-controls="image-tab-pane" aria-selected="false">Product Image</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade border p-3 show active" id="home-tab-pane" role="tabpanel"
aria-labelledby="home-tab" tabindex="0">
<div class="md-3">
<label>Product Name</label>
<input type="text" name="name" class="form-control">
</div>
<div class="md-3">
<label>Product Slug</label>
<input type="text" name="name" class="form-control">
</div>
<div class="md-3">
<label>Small Description (500 Words)</label>
<textarea name="small_description" class="form-control" rows="4"></textarea>
</div>
<div class="md-3">
<label>Description</label>
<textarea name="description" class="form-control" rows="4"></textarea>
</div>
</div>
<div class="tab-pane fade border p-3" id="seotag-tab-pane" role="tabpanel"
aria-labelledby="profile-tab" tabindex="0">
<div class="md-3">
<label>Meta Title</label>
<input type="text" name="meta_title" class="form-control">
</div>
<div class="md-3">
<label>Meta Description</label>
<textarea name="small_description" class="form-control" rows="4"></textarea>
</div>
<div class="md-3">
<label>Meta Keyword</label>
<textarea name="meta_keyword" class="form-control" rows="4"></textarea>
</div>
</div>
<div class="tab-pane fade border p-3" id="details-tab-pane" role="tabpanel"
aria-labelledby="details-tab" tabindex="0">
<div class="row">
<div class="col-md-4">
<div class="md-3">
<label>Original Price</label>
<input type="text" name="original_price" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="md-3">
<label>Selling Price</label>
<input type="text" name="selling_price" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="md-3">
<label>Quantity</label>
<input type="number" name="quantity" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="md-3">
<label>Trending</label>
<input type="checkbox" name="trending" style="width: 50px; height; 50px;" />
</div>
</div>
<div class="col-md-4">
<div class="md-3">
<label>Status</label>
<input type="checkbox" name="status" style="width: 50px; height; 50px;" />
</div>
</div>
</div>
</div>
<div class="tab-pane fade border p-3" id="image-tab-pane" role="tabpanel"
aria-labelledby="image-tab" tabindex="0">
<div class="mb-3">
<label>Upload Product Images</label>
<input type="file" name="image" multiple class="form-control" />
</div>
</div>
</div>
</div>
<div>
<button type="submit" class="btn btn-primary text-white">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
#endsection
Controller
<?php
namespace App\Http\Controllers\Admin;
use App\Http\Controllers\Controller;
use App\Http\Requests\ProductFormRequest;
use App\Models\Product;
use Illuminate\Http\Request;
use Illuminate\Support\Str;
class ProductController extends Controller
{
public function index()
{
$product = Product::latest()->paginate(5);
return view('admin.products.index');
}
public function create()
{
return view('admin.products.create');
}
public function store(Request $request)
{
$this->validate($request, [
'name' => 'require|string|min:5',
'slug' => 'require|string|min:5',
'small_description' => 'require|string',
'description' => 'require|string',
'original_price' => 'require|integer',
'selling_price' => 'require|integer',
// 'trending' => 'nullable',
// 'status' => 'nullable',
'meta_title' => 'require|string|max:255',
'meta_keyword' => 'require|string',
'meta_description' => 'require|string',
'image' => 'image|mimes:jpeg,png,jpg,gif,svg|max:2048'
]);
// upload new image
$image = $request->file('image');
$image->storeAs('admin/products', $image->hashName());
Product::create([
'name' => $request->name,
'slug' => $request->slug,
'small_description' => $request->small_description,
'description' => $request->description,
'original_price' => $request->original_price,
'selling_price' => $request->selling_price,
'meta_title' => $request->meta_title,
'meta_keyword' => $request->meta_keyword,
'meta_description' => $request->meta_description,
'image' => $image->hashName()
]);
//redirect to index
return redirect()->route('admin.products.index')->with(['success' => 'Data Berhasil Disimpan!']);
}
}
My Route
Route::controller(App\Http\Controllers\Admin\ProductController::class)->group(function (){
Route::get('/products','index');
Route::get('/products/create','create');
Route::post('/admin/products','store');
});
I want to submit. But when I click on submit button, I got this error message "The POST method is not supported for this route. Supported methods: GET, HEAD."
enter image description here
Your code looks fine to me.
I had the same error also, try clearing the route cache and hopefully that will solve your problem.
Command:
php artisan route:cache
I am currently working on create-post view of dashboard of my blogging site. I have used Aero template.
#extends('Dashboard.Layout.master')
#section('content')
<section class="content blog-page">
<div class="body_scroll">
<div class="block-header">
<div class="row">
<div class="col-lg-7 col-md-6 col-sm-12">
<ul class="breadcrumb">
<li class="breadcrumb-item"><i class="zmdi zmdi-home"></i>Computer Bitches</li>
<li class="breadcrumb-item">Blog</li>
<li class="breadcrumb-item active"> New Post</li>
</ul>
<button class="btn btn-primary btn-icon mobile_menu" type="button"><i class="zmdi zmdi-sort-amount-desc"></i></button>
</div>
<div class="col-lg-5 col-md-6 col-sm-12">
<button class="btn btn-primary btn-icon float-right right_icon_toggle_btn" type="button"><i class="zmdi zmdi-arrow-right"></i></button>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<form method="post" action="{{route('dashboard.store.post')}}">
#method('post')
#csrf
<div class="card">
<div class="body">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Blog title" />
</div>
<div class="form-group">
<select class="mdb-select md-form form-control" multiple searchable="Search here..">
<option>LARAVEL</option>
<option>GIT</option>
<option>AWS</option>
<option>REACT</option>
<option>PHP</option>
<option>JAVASCRIPT</option>
<option>CSS3</option>
<option>HTML5</option>
<option>WEB TECHNOLOGIES</option>
<option>JQUERY</option>
</select>
</div>
<div class="form-group">
<textarea id="editor" name="editor " class="form-control" rows="10" placeholder="Enter your Content">
</textarea>
</div>
</div>
</div>
<input type="submit" class="btn btn-success" value="Save"/>
</form>
</div>
</div>
</div>
</div>
</section>
#endsection
#section('scripts')
ClassicEditor
.create( document.querySelector( '#editor' ) )
.then(editor => {
document.getElementById('editor').innerHTML = editor.getData();
})
.catch( error => {
console.error( error );
} );
#endsection
I have tried all the possible ways, from posting back throuh jquery to removing elements and putting them back but no lock yet. It's been 10 hours still trying but I don't think I will find the solution. Thank you guys in advance for any leads.
Here is the update of my question:
I am having a filter tab from the database but and doing a loop to show the filters tab.
PROBLEM
But the problem is when we click on tabs it should show a dropdown from where I can choose what we want to filter. but its only showing first filter and other are not working.
EDIT
my view file
<form id="tabForms" action="{{route('o')}}" method="GET">
<div class="col-xs-12 col-sm-8 col-md-6 filter-bootstrap" style="padding:0px;margin-bottom:20px;">
<div class="input-group input-group-lg">
<div class="input-group-btn">
<button type="button" class="btn btn-warning dropdown-toggle"
data-toggle="dropdown" aria-expanded="false"
style="background:#FFF;color:#575962;border:solid 1px #e7ecf1;box-shadow: none;font-weight: 300;
font-size: 15px;text-transform: capitalize;padding: 5px 12px;height: 35px;border-radius:3px 0px 0px 3px;">Add Search Field
</button>
<ul class="dropdown-menu productFilter" id="filters">
<li id="Payment Status" onclick="productFilter(this.id)" >Payment Status</li>
<li id="Shipping Status" onclick="productFilter(this.id)" >Shipping Status</li>
<li id="Order Total" onclick="productFilter(this.id)" >Order Total</li>
<li id="Item Weight" onclick="productFilter(this.id)" >Item Weight</li>
<li id="Shipping class Name" onclick="productFilter(this.id)" >Shipping class Name</li>
<li id="Shipping Country" onclick="productFilter(this.id)" >Shipping Country</li>
<li id="Refund Status" onclick="productFilter(this.id)" >Refund Status</li>
<li id="Shipping class Name" onclick="productFilter(this.id)" >Shipping class Name</li>
<li id="Warehouse Location" onclick="productFilter(this.id)" >Warehouse Location</li>
<li id="Shipment Status Date" onclick="productFilter(this.id)" >Shipment Status Date</li>
<li id="Payment status" onclick="productFilter(this.id)" >Payment status</li>
</ul>
<input type="hidden" class="form-control" name="productFilterType" value="" id="productFilterType"/>
</div>
<!-- /btn-group -->
<!--show text on input -->
<div class="filter-top">
#php
use App\Filter;
$userId = Auth::id();
$filters = Filter::where('user_id',$userId)->get();
foreach($filters as $getfilter)
{
$filter_name = $getfilter->filter_name;
$filter_id = $getfilter->id;
#endphp
<label id="inputTagFilterId" class=filter-id{{$filter_id}} style="color:#666;margin:7px;"> {{$filter_name}} <span class="close-tab"><a style="border-left: dotted 1px #666;color: #666;"> X </a></span></label>
#php }
#endphp
</div>
<div id="filterpop">
<div class='tb-dropdown tb-fieldfilter-popup tb-fieldfilter-selectfieldfiltereditor-popup tb-fieldfilter-selectfieldfiltereditor-popup-large' style='display: block; min-width: 261px; z-index: 1001; opacity: 1; left: 513.609px; top: 195.75px;' data-turbodropdown-popup='' data-positioned='bottomleft'>
<div class='tb-fieldfilter-popup-fields'>
<select class='tb-select tb-fieldfilter-selectfieldfiltereditor-operators' data-turbofieldfilter-selectfieldfiltereditor-operator-field=''>
<option value='equals'>Equals</option>
<option value='notEquals'>Not Equals</option>
<option value='in'>In List</option>
<option value='notIn'>Not In List</option>
</select>
<span class='tb-fieldfilter-popup-errors' data-turbofieldfilter-selectfieldfiltereditor-operator-errors=''></span>
<span class='tb-fieldfilter-selectfieldfiltereditor-values' data-turbofieldfilter-selectfieldfiltereditor-value-fields=''>
<div class='tb-fieldfilter-selectfieldfiltereditor-selector tb-inlineselect tb-inlineselect-multiple' data-turbofieldfilter-selectfieldfiltereditor-selector=''>
<div class='tb-inlineselect-messages' data-turboinlineselect-messages=''>
</div>
<div class='tb-inlineselect-searchbox tb-text-field tb-text-field-with-feedback tb-searchbox' data-turboinlineselect-searchbox=''>
<input type='text' class='tb-input' autocomplete='off' data-turbosearchbox-input='' placeholder='Search...'>
<i class='tb-text-field-feedback' data-turbosearchbox-state-indicator=''></i>
</div>
<div class='tb-inlineselect-selected-items' data-turboinlineselect-selected-items=''>
<div class='tb-inlineselect-selected-items-header' data-turboinlineselect-selected-items-header=''>
<span class='tb-inlineselect-selected-items-title' data-turboinlineselect-selected-items-title=''>Selected:</span>
</div>
<div class='tb-inlineselect-selected-items-viewport' data-turboinlineselect-selected-items-viewport='' style='height: 150px;'>
<div class='tb-inlineselect-selected-items-list' data-turboinlineselect-selected-items-list=''>
<div data-turbolistview-item-key='0' class='tb-listview-item'>
<div class='tb-inlineselect-item'>Unshipped</div>
</div>
</div>
</div>
</div>
<div class='tb-inlineselect-search-results' data-turboinlineselect-search-results='' style=''>
<div class='tb-inlineselect-search-results-header' data-turboinlineselect-search-results-header=''>
<span class='tb-inlineselect-search-results-title' data-turboinlineselect-search-results-title=''>Search Results:</span>
<span class='tb-inlineselect-select-all' data-turboinlineselect-select-all='' data-turboinlineselect-action='selectAll'>Select All</span>
<span class='tb-inlineselect-unselect-all' data-turboinlineselect-unselect-all='' data-turboinlineselect-action='unselectAll'>Clear</span>
</div>
<div class='tb-inlineselect-search-results-viewport' data-turboinlineselect-search-results-viewport='' style='height: 150px;'>
<div class='tb-inlineselect-search-results-list' data-turboinlineselect-search-results-list=''>
<div data-turbolistview-item-key='0' class='tb-listview-item tb-inlineselect-selected-item'>
<div class='tb-inlineselect-item'>Unshipped</div>
</div>
<div data-turbolistview-item-key='1' class='tb-listview-item'>
<div class='tb-inlineselect-item'>Shipped</div>
</div>
<div data-turbolistview-item-key='2' class='tb-listview-item'>
<div class='tb-inlineselect-item'>Partially Shipped</div>
</div>
<div data-turbolistview-item-key='4' class='tb-listview-item'>
<div class='tb-inlineselect-item'>Pending Shipment</div>
</div>
<div data-turbolistview-item-key='8' class='tb-listview-item'>
<div class='tb-inlineselect-item'>Canceled</div>
</div>
<div data-turbolistview-item-key='16' class='tb-listview-item'>
<div class='tb-inlineselect-item'>Third Party Managed</div>
</div>
</div>
<div class='tb-inlineselect-search-results-truncated' data-turboinlineselect-search-results-truncated=''>
</div>
</div>
</div>
</div>
<span class='tb-fieldfilter-popup-errors' data-turbofieldfilter-selectfieldfiltereditor-value-errors=''>
</span>
</span>
</div>
<div class='tb-fieldfilter-popup-buttons'>
<button class='tb-btn' data-turbofieldfilter-selectfieldfiltereditor-update=''>Update</button>
<a href='#' class='tb-btn-link' data-turbofieldfilter-selectfieldfiltereditor-cancel=''>Cancel</a>
</div>
</div>
</div>
</div>
</div>
</div>
Controller file
public function index(request $request)
{
$productFilterType = $request->input('productFilterType');
return view('pages.order',array(
'productFilterType' =>$productFilterType,
));
}
jquery
function productFilter(value) {
alert(value);
jQuery("#productFilterType").val(value);
jQuery("#tabForms").submit();
}
$(document).on('click','#inputTagFilterId',function(){
var label = $('#inputTagFilterId');
var filterid = label.attr('class');
alert(filterid);
$("."+filterid).click(function(){
$("#filterpop").show();
});
});
I have a page create_conference.blade.php to create new confereces. In this page there is a multi step form:
in the 1st step asks the user for general conference information
in the 2nd asks for a description for the conference creator
in the 3rd aks the user for the registration types for the conference
The way the form should work is: the user enter the information for the first step then click “go to step 2”, then in step 2, the user enters that step 2 specific information and click “go to step 3”. Finally, in step 3, the user enter that step 3 specific information and also clicks in “Store” to submit the information and so the conference is created.
Do you know how to properly handle this multi step form logic with laravel? Im not having success in structuring this.
HTML:
<!-- So, the page has 3 step: General Info, Conference Creator Info and Registration Types) -->
#extends('app')
#section('content')
<div class="container nopadding py-4">
<h1 class="h5 text-center">Create Conference</h1>
<div class="row">
<div class="col-12">
<ul class="nav nav-pills registration_form_list" role="tablist">
<li class="">
<a class="nav-link active" href="#step1" data-toggle="tab" role="tab">
Step1<br><small>General Information</small></a>
</li>
<li class="disabled">
<a class="nav-link" href="#step2" data-toggle="tab" role="tab">
Step 2<br><small>Conference Creator Info</small></a>
</li>
<li class="disabled">
<a class="nav-link" href="#step3" data-toggle="tab" role="tab">
Step 3<br><small>Registration Types</small></a>
</li>
</ul>
<!-- STEP 1 - General Confenrece Information-->
<form method="post" class="clearfix" action="conference/store">
{{csrc_field()}}
<div class="tab-content registration_body bg-white" id="myTabContent">
<div class="tab-pane fade show active clearfix" id="step1" role="tabpanel" aria-labelledby="home-tab">
<form method="post" class="clearfix">
<div class="form-group">
<label for="conference_name" class="text-heading h6 font-weight-semi-bold">Conference Name </label>
<input type="text" name="conference_name" class="form-control" id="conference_name">
</div>
<div class="form-row">
<div class="form-group col-lg-6">
<label for="conference_categories" class="text-heading h6 font-weight-semi-bold">Conference Categories</label>
<select id="tag_list" name="conference_categories" multiple class="form-control" id="conference_categories">
<option>IT</option>
</select>
</div>
</div>
<div class="form-group">
<label for="address" class="text-heading h6 font-weight-semi-bold">Address</label>
<input type="text" name="conference_address" class="form-control" >
</div>
<div>
<button type="button" href="#step2" data-toggle="tab" role="tab"
class="btn mr-2 btn-primary btn next-step">
Go To Step 2
</button>
</div>
</form>
</div>
<!-- STEP 2 - Conference creator Information-->
<div class="tab-pane fade clearfix" id="step2" role="tabpanel" aria-labelledby="profile-tab">
<form method="post" class="clearfix">
<div class="form-row">
<div class="form-group">
<label for="conference_creator_description" class="text-heading h6 font-weight-semi-bold">Description</label>
<textarea name="conference_creator_description" id="conference_creator_description" class="form-control" rows="3"></textarea>
</div>
<button type="button" href="#step1" data-toggle="tab" role="tab"
class="btn mr-2 btn-primary btn next-step">
Go Back To Step 1
</button>
<button type="button" href="#step3" data-toggle="tab" role="tab"
class="btn mr-2 btn-primary btn next-step">
Go To Step 3
</button>
</form>
</div>
<!-- STEP 3 - Registration Types-->
<div class="tab-pane clearfix fade" id="step3" role="tabpanel" aria-labelledby="contact-tab">
<form method="post" class="clearfix">
<div class="form-group">
<label for="registration_type_name" class="text-heading h6 font-weight-semi-bold">Registration Type Name</label>
<input type="text" name="registration_type_name" class="form-control" id="registration_type_name">
</div>
<div class="form-group col-md-6">
<label for="registration_type_capacity" class="text-heading h6 font-weight-semi-bold">Capacity</label>
<input type="text" class="form-control" name="registration_type_name" id="registration_type_capacity">
</div>
<div class="form-group">
<button type="button" href="#step2" data-toggle="tab" role="tab"
class="btn mr-2 btn-primary btn next-step">
Go Back To Step 2
</button>
<button type="submit" data-toggle="tab" role="tab"
class="btn mr-2 btn-primary btn next-step">
Store
</button>
</div>
</form>
</div>
</div>
</form>
</div>
</div>
</div>
Laravel:
I created a ConferenceController
Then add to the form an action (action="conference/store")
Then I also created a route:
Route::post(‘/createConference, [
‘uses’ => ‘ConferenceController#store’
‘as’ => conference.store’
]
But when I enter some info and submit the form it appears:
Symfony \ Component \ HttpKernel \ Exception \ MethodNotAllowedHttpException
No message.
Wrong action url
Route::post(‘/createConference,[‘uses’=>‘ConferenceController#store’,‘as’=>conference.store’]);
Set form's action to route's name and add crsf field
<form action="{{route('conference.store')}}" method="post">
{{ csrf_field() }}
I am using bootstrap-wysiwyg text editor in my form, and I am not able to post value in controller
View :
<form id="demo-form2" action="<?php echo base_url();?>admin/post/add" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="middle-name" class="control-label col-md-3 col-sm-3 col-xs-12">Post Details<span style="color:red"> <?php echo form_error('details'); ?></span></label>
<div class="col-md-8 col-sm-8 col-xs-12">
<div id="alerts"></div>
<div class="btn-toolbar editor" data-role="editor-toolbar" data-target="#editor">
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" title="Font"><i class="fa fa-font"></i><b class="caret"></b></a>
<ul class="dropdown-menu">
</ul>
</div>
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="fa fa-text-height"></i> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a data-edit="fontSize 5">
<p style="font-size:17px">Huge</p>
</a>
</li>
<li>
<a data-edit="fontSize 3">
<p style="font-size:14px">Normal</p>
</a>
</li>
<li>
<a data-edit="fontSize 1">
<p style="font-size:11px">Small</p>
</a>
</li>
</ul>
</div>
</div>
<div id="editor" class="editor-wrapper"></div>
<textarea id="descr" name="descr" style="display:none;"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-8 col-sm-8 col-xs-12 col-md-offset-3"> <button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
And my controller
print_r($_POST); exit;
On searching, I have founded answers like
Solution for this issue
But I don't know how to implement this in my condition. I am getting all the other values expect value in text-area.
Thanks in advance
This will get the editor contents and replace the value of editor_contents on the submit.
<form name="your_form" method="post" onSubmit="document.your_form.editor_contents.value = $('#editor').html()">
<textarea name="editor_contents" style="display:none;"></textarea>
<input type="submit" name="submit">
</form>
And you can access it on PHP like $_POST['editor_contents']
This like passing your data on hidden fields.
Try this
<script type="text/javascript">
$(document).on('submit','#demo-form2',function(){
var editor = CKEDITOR.instances['descr'];
document.getElementById('descr').value = editor.getData();
})
</script>