Estoy integrando un admin template
con laravel
que tiene un wizard
para envió de datos, el detalle es que al hacer click en enviar el formulario simplemente no envía los datos, no soy muy bueno con Javascript
, espero pueda alguien orientarme si algo me hace falta o esta mal.
El formulario funciona pero no envía absolutamente nada a la base de datos, primero definí la ruta:
Route::resource('empresas', 'EmpresasController');
Después cree el formulario donde cada input
contiene el name
a enviar para que el controlador lo reciba, esta ya venia con la plantilla y la modifique a mis necesidades:
<form method="post" action="{{ route('empresas.store') }}" id="kt_form" class="kt-form kt-form--fit kt-form--label-right" >
@csrf
<!--begin: Form Wizard Step 1-->
<div class="kt-wizard-v2__content" data-ktwizard-type="step-content" data-ktwizard-state="current">
<div class="kt-heading kt-heading--md">{{ __('forms.Account_Details') }}</div>
<div class="kt-form__section kt-form__section--first">
<div class="kt-wizard-v2__form">
<div class="form-group row">
<div class="col-lg-7">
<label>{{ __('forms.Razon_Social') }}</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="la la-registered"></i>
</span>
</div>
<input type="text" class="form-control" name="nombreempresa" placeholder="Enter full name">
</div>
<span class="form-text text-muted">{{ __('forms.Indication_RS') }}</span>
</div>
<div class="col-lg-5">
<label class="">{{ __('forms.Nombre_Comercial') }}</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="la la-bookmark"></i>
</span>
</div>
<input type="text" class="form-control" name="nombrecomercial" placeholder="Enter email">
</div>
<span class="form-text text-muted">{{ __('forms.Indication_NC') }}</span>
</div>
</div>
<div class="form-group row">
<div class="col-lg-4">
<div class="form-group">
<label>{{ __('forms.Sectors') }}</label>
{!! Form::select('sector',$sectors,null,['class' => 'form-control', 'name' => 'sector','placeholder' => 'Selecciona', 'width' => '100']) !!}
<span class="form-text text-muted">{{ __('forms.Indication_Sector') }}</span>
</div>
</div>
<div class="col-lg-4">
<label class="">{{ __('forms.Company_Site') }}</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="la la-internet-explorer"></i>
</span>
</div>
<input type="text" class="form-control" name="sitioweb" placeholder="Enter email">
</div>
<span class="form-text text-muted">{{ __('forms.Indication_CS') }}</span>
</div>
</div>
<div class="form-group row">
<div class="col-lg-4">
<label>{{ __('forms.Rfc') }}</label>3
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="la la-user-secret"></i>
</span>
</div>
<input type="text" class="form-control" name="idfiscal">
</div>
<span class="form-text text-muted">{{ __('forms.Indication_Rfc') }}</span>
</div>
<div class="col-lg-4">
<label>{{ __('forms.Phone') }}</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="la la-phone"></i>
</span>
</div>
<input type="tel" id="kt_inputmask_3" class="form-control" name="tel">
</div>
<span class="form-text text-muted">{{ __('forms.Indication_Tel') }}</span>
</div>
<div class="col-lg-4">
<label>{{ __('forms.Email') }}</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="la la-at"></i>
</span>
</div>
<input type="email" class="form-control" name="email" placeholder="Email" value="[email protected]">
</div>
<span class="form-text text-muted">{{ __('forms.Indication_Email') }}</span>
</div>
</div>
</div>
</div>
</div>
<!--end: Form Wizard Step 1-->
<!--begin: Form Wizard Step 2-->
<div class="kt-wizard-v2__content" data-ktwizard-type="step-content">
<div class="kt-heading kt-heading--md">{{ __('forms.Title_Ubic') }}</div>
<div class="kt-form__section kt-form__section--first">
<div class="kt-wizard-v2__form">
<div class="form-group row">
<div class="col-lg-3">
<label>{{ __('forms.Country') }}</label>
<div class="col-lg-4 col-md-9 col-sm-12">
{!! Form::select('country',$countries,null,['id'=>'country', 'class' => 'form-control kt-select2', 'name' => 'pais','placeholder' => 'Selecciona', 'width' => '100']) !!}
</div>
</div>
<div class="col-lg-3">
<label>{{ __('forms.State') }}</label>
<div class=" col-lg-4 col-md-9 col-sm-12">
{!! Form::select('state',['placeholder'=>'Selecciona'],null,['id'=>'state', 'name' => 'estado', 'class'=>'form-control kt-select2']) !!}
</div>
</div>
<div class="col-lg-3">
<label>{{ __('forms.City') }}</label>
<div class=" col-lg-4 col-md-9 col-sm-12">
{!! Form::select('town',['placeholder'=>'Selecciona'],null,['id'=>'town', 'name' => 'ciudad', 'class' => 'form-control kt-select2']) !!}
</div>
</div>
<div class="col-lg-3">
<label>{{ __('forms.Colony') }}</label>
<div class=" col-lg-4 col-md-9 col-sm-12">
{!! Form::select('colony',['placeholder'=>'Selecciona'],null,['id'=>'colony', 'name' => 'colonia', 'class' => 'form-control kt-select2']) !!}
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<label>{{ __('forms.Calle') }}:</label>
<div class="kt-input-icon kt-input-icon--right">
<input type="text" class="form-control" name="calleynumero" placeholder="Enter your address">
<span class="kt-input-icon__icon kt-input-icon__icon--right">
<span>
<i class="la la-map-marker"></i>
</span>
</span>
</div>
<span class="form-text text-muted">{{ __('forms.Indication_Direcc') }}</span>
</div>
<div class="col-lg-2">
<label>{{ __('forms.Postcode') }}</label>
<div class="kt-input-icon kt-input-icon--right">
{!! Form::text('postalcode', null, ['id'=>'postalcode','value'=>'', 'name' => 'codigopostal', 'class' => 'form-control', 'disabled' => 'disabled']) !!}
<span class="kt-input-icon__icon kt-input-icon__icon--right">
<span>
<i class="la la-truck"></i>
</span>
</span>
</div>
<span class="form-text text-muted">{{ __('forms.Indication_Post') }}</span>
</div>
<div class="col-lg-3">
<label>{{ __('forms.Tel') }}:</label>
<div class="kt-input-icon kt-input-icon--right">
<input type="text" id="kt_inputmask_3" name="tel2" class="form-control">
<span class="kt-input-icon__icon kt-input-icon__icon--right">
<span>
<i class="la la-phone"></i>
</span>
</span>
</div>
<span class="form-text text-muted">{{ __('forms.Indication_Phone') }}</span>
</div>
</div>
</div>
</div>
</div>
<!--end: Form Wizard Step 4-->
<!--begin: Form Actions -->
<div class="kt-form__actions">
<div class="btn btn-secondary btn-md btn-tall btn-wide kt-font-bold kt-font-transform-u" data-ktwizard-type="action-prev">
Previous
</div>
<div class="btn btn-success btn-md btn-tall btn-wide kt-font-bold kt-font-transform-u" data-ktwizard-type="action-submit">
Submit
</button>
<div class="btn btn-brand btn-md btn-tall btn-wide kt-font-bold kt-font-transform-u" data-ktwizard-type="action-next">
Next Step
</div>
</div>
<!--end: Form Actions -->
</form>
Posterior el Controlador EmpresasController quedando de la siguiente forma:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use App\Empresa;
class EmpresasController extends Controller
{
public function __construct()
{
$this->middleware('auth');
}
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
//
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
//
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$request->validate([
'nombreempresa'=>'required',
'nombrecomercial'=>'required',
'idfiscal'=>'required|max:13',
'tel' => 'required|numeric',
'calleynumero'=>'required',
'colonia'=>'required',
'ciudad'=>'required',
'estado'=>'required',
'codigopostal'=>'required',
'pais'=>'required',
'sector'=>'required',
'serial'=>'required',
]);
$empresa = new Empresa([
'nombreempresa' => $request->get('nombreempresa'),
'nombrecomercial' => $request->get('nombrecomercial'),
'idfiscal' => $request->get('idfiscal'),
'adminid' => auth()->id(),
'tel' => $request->get('tel'),
'calleynumero' => $request->get('calleynumero'),
'colonia' => $request->get('colonia'),
'ciudad' => $request->get('ciudad'),
'estado' => $request->get('estado'),
'codigopostal' => $request->get('codigopostal'),
'pais' => $request->get('pais'),
'email' => $request->get('email'),
'acceso' => '1',
'sector' => $request->get('sector'),
'tipo' => '1',
'sitioweb' => $request->get('sitioweb'),
'serial' => 'XEVB-TBMN-KHKL-YB2JI89J',
'wizard' => '1'
]);
$empresa->save();
return redirect('/dashboard')->with('success', 'Gracias hemos recibido tu informacion!');
}
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
//
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
//
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
//
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
//
}
}
Y este es el modelo:
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Empresa extends Model
{
/**
* The database table used by the model.
*
* @var string
*/
protected $table = 'empresas';
/**
* The database primary key value.
*
* @var string
*/
protected $primaryKey = 'id';
/**
* Attributes that should be mass-assignable.
*
* @var array
*/
protected $fillable = ['nombreempresa',
'nombrecomercial',
'idfiscal',
'logo',
'adminid',
'tel',
'calleynumero',
'colonia',
'ciudad',
'estado',
'codigopostal',
'pais',
'status',
'email',
'acceso',
'verified',
'sector',
'tipo',
'serial',
'wizard',
'created_at',
'updated_at'];
}
Y por ultimo este es el código javascript
que le da el aspecto al formulario y el porque tienen un id cada input
:
"use strict";
// Class definition
var KTWizard2 = function () {
// Base elements
var wizardEl;
var formEl;
var validator;
var wizard;
// Private functions
var initWizard = function () {
// Initialize form wizard
wizard = new KTWizard('kt_wizard_v2', {
startStep: 1,
});
// Validation before going to next page
wizard.on('beforeNext', function(wizardObj) {
if (validator.form() !== true) {
wizardObj.stop(); // don't go to the next step
}
})
// Change event
wizard.on('change', function(wizard) {
KTUtil.scrollTop();
});
}
var initValidation = function() {
validator = formEl.validate({
// Validate only visible fields
ignore: ":hidden",
// Validation rules
rules: {
//= Step 1
fname: {
required: true
},
lname: {
required: true
},
phone: {
required: true
},
emaul: {
required: true,
email: true
},
//= Step 2
address1: {
required: true
},
postcode: {
required: true
},
city: {
required: true
},
state: {
required: true
},
country: {
required: true
},
//= Step 3
delivery: {
required: true
},
packaging: {
required: true
},
preferreddelivery: {
required: true
},
//= Step 4
locaddress1: {
required: true
},
locpostcode: {
required: true
},
loccity: {
required: true
},
locstate: {
required: true
},
loccountry: {
required: true
},
//= Step 5
ccname: {
required: true
},
ccnumber: {
required: true,
creditcard: true
},
ccmonth: {
required: true
},
ccyear: {
required: true
},
cccvv: {
required: true,
minlength: 2,
maxlength: 3
},
},
// Display error
invalidHandler: function(event, validator) {
KTUtil.scrollTop();
swal.fire({
"title": "",
"text": "There are some errors in your submission. Please correct them.",
"type": "error",
"confirmButtonClass": "btn btn-secondary"
});
},
// Submit valid form
submitHandler: function (form) {
}
});
}
var initSubmit = function() {
var btn = formEl.find('[data-ktwizard-type="action-submit"]');
btn.on('click', function(e) {
e.preventDefault();
if (validator.form()) {
// See: src\js\framework\base\app.js
KTApp.progress(btn);
//KTApp.block(formEl);
// See: http://malsup.com/jquery/form/#ajaxSubmit
formEl.ajaxSubmit({
success: function() {
KTApp.unprogress(btn);
//KTApp.unblock(formEl);
swal.fire({
"title": "",
"text": "The application has been successfully submitted!",
"type": "success",
"confirmButtonClass": "btn btn-secondary"
});
}
});
}
});
}
return {
// public functions
init: function() {
wizardEl = KTUtil.get('kt_wizard_v2');
formEl = $('#kt_form');
initWizard();
initValidation();
initSubmit();
}
};
}();
jQuery(document).ready(function() {
KTWizard2.init();
});
Espero puedan ayudarme a identificar si falto algo o esta mal, noté que si cambio el método de post
a get
aparece el mensaje que el formulario se envió, pero no lo esta registrando en la base de datos y tampoco se me hace muy seguro enviar un formulario por medio de get
.
<div class="btn btn-success btn-md btn-tall btn-wide kt-font-bold kt-font-transform-u" data-ktwizard-type="action-submit">Submit</button>