I want to post data form the view blade including token and use user id as a foreign key. I want to post data using ajax. Here is my code.
This is my view layouts (newUserRegister.blade.php)
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
{{--<title>{{ config('app.name', 'Trazoo') }}</title>--}}
<title> Trazoo </title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/all.css') }}" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
{{--<link href="{{ asset('css/responsive.css') }}" rel="stylesheet">--}}
{{--<link href="{{ asset('css/custom.css') }}" rel="stylesheet">--}}
{{--<link href="{{ asset('css/filter.css') }}" rel="stylesheet">--}}
{{--<link href="{{ asset('css/prettify.min.css') }}" rel="stylesheet">--}}
{{--<link href="{{ asset('css/nprogress.css') }}" rel="stylesheet">--}}
{{--<link href="{{ asset('css/font-awesome.min.css') }}" rel="stylesheet">--}}
<link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet">
<link href="{{ asset('css/all.css') }}" rel="stylesheet">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
.navbar{
margin-bottom: 0px !important;
}
.navbar-default {
background-color: white;
}
.fa-stack {
font-size: 13px;
color: #d7d7e1;
margin-top: -2%;
}
.navbar-nav .active a::after {
border-bottom: 2px solid #2350f5;
bottom: 5%;
content: " ";
left: 0;
position: absolute;
right: 0;
background-color: transparent;
}
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
Trazoo
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-center" style="padding-top: 0px;">
<!-- Authentication Links -->
<li class="nav-item active">
<a class="nav-link" style="background-color: transparent;" href="#">
<span id="icon_1" class="fa-stack" >
<i class="fa fa-circle fa-stack-2x" ></i>
<i class="fa fa-inverse fa-stack-1x" >1</i>
</span>
<span id="iconCheck_1" class="fa-stack" style="display: none;" >
<i class="fa fa-circle fa-stack-2x" style="color: #4eba41" ></i>
<i class="fa fa-inverse fa-stack-1x" > ✔ </i>
</span>
Business Info</a>
</li>
<li class="nav-item">
<a class="nav-link" style="background-color: transparent;" href="#">
<span id="icon_2" class="fa-stack" >
<i class="fa fa-circle fa-stack-2x" ></i>
<i class="fa fa-inverse fa-stack-1x">2</i>
</span>
<span id="iconCheck_2" class="fa-stack" style="display: none;" >
<i class="fa fa-circle fa-stack-2x" style="color: #4eba41" ></i>
<i class="fa fa-inverse fa-stack-1x" > ✔</i>
</span>
Pick Up Address</a>
</li>
<li class="nav-item">
<a class="nav-link" style="background-color: transparent;" href="#">
<span id="icon_3" class="fa-stack" >
<i class="fa fa-circle fa-stack-2x" ></i>
<i class="fa fa-inverse fa-stack-1x">3</i>
</span>
<span id="iconCheck_3" class="fa-stack" style="display: none;" >
<i class="fa fa-circle fa-stack-2x" style="color: #4eba41" ></i>
<i class="fa fa-inverse fa-stack-1x" > ✔</i>
</span>
Payment Details</a>
</li>
<li class="nav-item">
<a class="nav-link" style="background-color: transparent;" href="#">
<span id="icon_4" class="fa-stack" >
<i class="fa fa-circle fa-stack-2x" ></i>
<i class="fa fa-inverse fa-stack-1x" >4</i>
</span>
<span id="iconCheck_4" class="fa-stack" style="display: none;" >
<i class="fa fa-circle fa-stack-2x" ></i>
<i class="fa fa-inverse fa-stack-1x" > ✔</i>
</span>
Buisness & KYC Info</a>
</li>
</ul>
<!-- Right Side Of Navbar -->
<!-- <ul class="nav navbar-nav navbar-right">
<li><a href="{{ route('login') }}">Login</a></li>
</ul>-->
</div>
</div>
</nav>
@yield('content')
</div>
<!-- Scripts --> @yield('script')
<script src="{{ asset('js/app.js') }}"></script>
<script src="{{ asset('js/jquery.min.js') }}"></script>
{{--<script src="{{ asset('js/bootstrap.min.js') }}"></script>--}}
{{--<script src="{{ asset('js/fastclick.js') }}"></script>--}}
{{--<script src="{{ asset('js/nprogress.js') }}"></script>--}}
{{--<script src="{{ asset('js/bootstrap-wysiwyg.min.js') }}"></script>--}}
{{--<script src="{{ asset('js/jquery.hotkeys.js') }}"></script>--}}
{{--<script src="{{ asset('js/prettify.js') }}"></script>--}}
this is the filed that extend my view
@extends('layouts.newUserRegister')
@section('content')
<div class="backgroundColorRegister">
<form id="businessinfo" >
<div class="divPositionNewRegister" id="firstForm" style="display: block;">
<div class="form-group required">
<label for="businessname" class="col-md-offset-2 inputLabel">Business Name</label>
<div class="col-md-8 col-md-offset-2">
<input id="businessname" type="text" placeholder="Enter the name of your company" class="form-control" name="businessname" autofocus>
</div>
</div>
<div class="form-group required">
<label for="businesstype" class="col-md-offset-2 inputLabel">Business Type</label>
<div class="col-md-8 col-md-offset-2">
<input id="buisnesstype" type="text" placeholder="Select business type" class="form-control" name="businesstype" autofocus>
</div>
</div>
<div class="form-group required">
<label for="industry" class="col-md-offset-2 inputLabel">Industry</label>
<div class="col-md-8 col-md-offset-2">
<select id="industry" type="text" class="form-control" name="industry" autofocus>
<option hidden >Select industry</option>
<option value="text1"> text 1 </option>
<option value="text2"> text 2 </option>
<option value="text3"> text 3 </option>
</select>
</div>
</div>
<hr style="margin-top: 58%;">
<div class="form-group">
<div class="col-md-2 col-md-offset-0" style="bottom: 2%; position: absolute; left: 1%;">
<a href="{{ route('login') }}">
<button type="button" class="btn btn-default" style="padding: 4px 20px; font-weight: 500;">
Back
</button></a>
</div>
</div>
<div id="postRequestData"></div>
<div class="form-group">
<div class="col-md-2 col-md-offset-8" style="bottom: 2%; position: absolute; right: 6%;">
<button type="submit" id="insert" class="btn btn-primary" style="padding: 4px 20px; font-weight: 500; background-color:#2350f5 " >
Next
</button>
</div>
</div>
</div>
{{ csrf_field() }}
</form>
</div>
@endsection
@section('script')
$(document).ready(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#insert').click(function (e) {
e.preventDefault(); // this prevents the form from submitting
var businessname = $('input[name=businessname]').val();
var businesstype = $('input[name=businesstype]').val();
var industry = $('#industry option:selected').val();
//var token = $('input[name=_token]').val();
var data = {businessname: businessname, businesstype: businesstype, industry: industry};
var request = $.ajax({
url: 'myformPost',
type: "POST",
data: data,
success: function (response) {
console.log(response);
alert(response.message);
}
});
});
});
This is my routes on web.php
Route::get('myformPost', 'NewController@myform');
Route::post('myformPost', 'NewController@myformPost');
This is my Controller
namespace App\Http\Controllers;
use App\Business;
use Illuminate\Support\Facades\Validator;
use Illuminate\Http\Response;
use Illuminate\Support\Facades\Auth;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Input;
class NewController extends Controller
{
/**
* @param Request $request
* @return \Illuminate\Http\JsonResponse
/
/ public function myformPost()
{
if(Request::ajax()) {
$post = Request::all();
$business = new business;
$business->businessname = $post['businessname'];
$business->businesstype = $post['businesstype'];
$business->industry = $post['industry'];
$business->user_id = Auth::user()->id;
$business->save();
return redirect()->back();
$response = array(
'status' => 'success',
'msg' => 'Option created successfully',
);
}
}*/
public function myform()
{
return view('layouts.newUserRegister');
}
public function myformPost(Request $request)
{
$validator = Validator::make($request->all(), [
'businessname' => 'required|string|max:255',
'businesstype' => 'required|string|max:255',
'industry' => 'required|string|max:255',]);
$business = new business();
$business->businessname = $request->businessname;
$business->businesstype = $request->businesstype;
$business->industry = $request->industry;
$business->user_id = Auth::user()->id;
/*$result = $business->saveOrFail();
if($result){
response()->json(array('message'=>'Record successfully saved or updates'));
}else{
response()->json(array('message'=>'Failed'));
}*/
$business->save();
//$input = request()->all();
return response()->json(['success'=>'Got Simple Ajax Request.']);
}
}
This is my modal