2

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.

6
  • no estoy seguro que sea esto, pero mira en el boton submit del formulario, abres una etiqueta <div> y cierras un </button>: <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> Commented el 22 ago. 2019 a las 21:55
  • initValidation no coincide con los name que tienes.
    – Shassain
    Commented el 9 sept. 2019 a las 1:56
  • Si los corrijo funciona la validacion pero igual sigue sin enviar el formulario, solo se queda cargando, no los envia a la ruta Empresas.store, donde se supone deberia ir? Commented el 9 sept. 2019 a las 2:39
  • Si inspeccionas el action del form ¿tiene la ruta que corresponde? otra cosa que puedes ver son los request que esta haciendo tu aplicación a través de la consola, revisa que esta enviando o si esta recibiendo algún tipo de error.
    – vicasas
    Commented el 9 sept. 2019 a las 15:19
  • Ya le hiciste seguimiento por consola? te bota algún error? revisaste en la pantalla network el request y response? que te aparece? que respuesta http tienes? Commented el 10 sept. 2019 a las 21:37

1 respuesta 1

0

Lo mas facil que puedes hacer es esto;

$("#formulario",).on("submit", function(e){
      e.preventDefault();

var data=$(this).serialize()
//asi se usa si no hay cmapos tipo file
//var data = new FormData(this);
//asi se usa si hay campos tipo file
  $.ajax({
      type:"Post",
      dataType:"json",
      contentType: false,  
      cache: false,  
      processData:false,  
      data:data,
      url:url,
    success: function(resp){
       if(resp["message"]==="OK"){
        }
     }
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.