need to make a submit without redirect page (ajax?)

user_18574083 0
Viewed 48

I have a view where I pull the data with an "onclick" of the "Asisgnar" button and when I click on the "Enviar formulario" button, an email is sent directly with the loaded data... this works perfectly, but I would like it to be sent the mail without redirecting me to another page.

My form code

<form action="{{route('contactanos.store')}}" method="POST">
                                    {{ csrf_field() }}
                                    

                                    
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                    <div class="form-group">
                                    <label for="inspector">Inspector</label>
                                    <select class="form-select col-xs-12 col-sm-12 col-md-12" aria-label="Default select example" id="inspector" for="inspector" name="inspector" >
                                            <option selected></option>
                                            @foreach($users as $user)

                                            <option value="{{ $user->name }}">{{ $user->name }}</option>
                                            
                                            @endforeach
                                        </select>
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                    <label for="estado">Estado</label>
                                    <select class="form-select col-xs-12 col-sm-12 col-md-12" aria-label="Default select example" id="estado" for="estado" name="estado">
                                            <option selected></option>
                                            <option value="Pendiente">Pendiente</option>
                                            <option value="Coordinado">Coordinado</option>
                                            
                                            <option value="Peritando">Derivado a inspector</option>
                                            
                                            <option value="Baja">Baja</option>
                                        </select>
                                    </div>
                                  
                                            <div class="col-xs-12 col-sm-12 col-md-12">
                                                <div class="form-group">
                                                <label for="localidad">Localidad</label>
                                                    <input type="text" name="localidad" id="localidad" class="form-control" >
                                                </div>
                                            </div>
                                            <div class="col-xs-12 col-sm-12 col-md-12">
                                                    <div class="form-group">
                                                        <label for="fechaip">Fecha IP</label>
                                                        <input type="date" name="fechaip" id="fechaip" class="form-control" >
                                                    </div>
                                                </div>
                                        
                                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                                        <div class="form-group">
                                                        <label for="siniestro">Siniestro</label>
                                                        <input type="text" name="siniestro" id="siniestro" class="form-control" >
                                                        </div>
                                                    </div>
                                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                                        <div class="form-group">
                                                        <label for="inspector">Inspector</label>
                                                        <select class="form-select col-xs-12 col-sm-12 col-md-12" aria-label="Default select example" id="emailperito" for="emailperito" name="emailperito" >
                                                                <option selected></option>
                                                                @foreach($users as $user)

                                                                <option value="{{ $user->email }}">{{ $user->name }}</option>
                                                                
                                                                @endforeach
                                                            </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-xs-12 col-sm-12 col-md-12">
                                                            <div class="form-group">
                                                            <label for="email">Email taller</label>
                                                            <input type="text" name="email" id="email" class="form-control"  >
                                                            </div>
                                                        </div>
                                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                                        <div class="form-group">
                                                        <label for="patente">Patente</label>
                                                            <input type="text" name="patente" id="patente" class="form-control" >
                                                        </div>
                                                    </div>
                                            
                                            <div class="col-xs-12 col-sm-12 col-md-12">
                                                <div class="form-group">
                                                <label for="modalidad">Tipo de inspección</label>
                                                    <input type="text" name="modalidad" id="modalidad" class="form-control" >
                                                </div>
                                            </div>

                                            <input type="hidden" id="id">
                                            <button type="submit" id="updateButton" class="btn btn-success" onclick="updateData(event)">Guardar</button>
                                            <button type="submit"  class="btn btn-primary float-right">Enviar formulario</button>
                                            
                                    
                                    </form>

Controller Code to send mail

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;


//mail
use App\Mail\ContactanosMailable;
use Illuminate\Support\Facades\Mail;
use App\Models\Siniestro;



class CoordinacionesController extends Controller
{
    public function index(){
        return view('contactanos.index');
    }

    public function store(Request $request){

         
         $siniestro = Siniestro::paginate(1000);

         $this->siniestro = $siniestro;
         
        
        $email = $this->siniestro['emailperito'];
        $cc = $this->siniestro['email'];
        

        $correo = new ContactanosMailable($request->all());
        Mail::to($email)->cc($cc)->send($correo);

        return redirect()->route('siniestros.index');

        
    }
}

View.blade

My view

I have tried removing the post method and removing the "return redirect()->route('sinisters.index');" of the controller, but it doesn't work.

laravel email php ajax
2 Answers

you can do it with an ajax like this

$.ajax({
  url: '{{route("your-route")}}',
  method: "POST",
  data: {
    _token: '<?php echo csrf_token() ?>',
    ... // the rest of your form
    }
 })
user_177835350

Try this solution

add jquery in your blade file

jquery cdn

<script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>

Give class to your form

<form action="{{route('contactanos.store')}}" method="POST" class="my_form">

Change your javascript code as per below

$(document).on('submit', '.my_form', function (event) {
    event.preventDefault();

    var form = $(this);

    $.ajax({
        type: form.attr('method'),
        url: form.attr('action'),
        data: form.serialize(),
        success: function (response) {
           if(response.success){
              //handle success message
           } else {
             //handle error message
           }
        },
        error: function (xhr, textStatus, errorThrown) {
            console.log("ERROR");
        }
    });
});

change your controller->store function

public function store(Request $request){
        try {
            $siniestro = Siniestro::paginate(1000);

            $this->siniestro = $siniestro;

            $email = $this->siniestro['emailperito'];
            $cc = $this->siniestro['email'];

            $correo = new ContactanosMailable($request->all());
            Mail::to($email)->cc($cc)->send($correo);

            return response()->json([
                'success' => true,
                'message' => 'Your success message'
            ]);
        } catch (\Throwable $th) {
            return response()->json([
                'success' => false,
                'message' => 'Your error message'
            ]);
        }
   }
user_95282410
Related