How can i show a pop up modal after executing function in laravel?

Question

Hey guys so i have done a simple contact form to send out emails. How can i show a modal or a notification when i press the send button that the email has been sent? but it has to execute the email sending function first then only show the modal.

Blade:

<form role="form" enctype="multipart/form-data" action="{{action('AltHr\Portal\PortalController@sendemail')}}" method="post" class="m-t-15">
{{csrf_field()}}
  <div class="form-group form-group-default">
    <label>Full Name<span style="color:red">*</span></label>
    <input type="text" name="name" placeholder="As per IC" class="form-control" required>
  </div>
  <div class="form-group form-group-default">
    <label>Company<span style="color:red">*</span></label>
    <input type="text" name="company" placeholder="Company name" class="form-control" required>
  </div>
  <div class="form-group form-group-default">
    <label>Email<span style="color:red">*</span></label>
    <input type="email" name="email" placeholder="Company email preferred" class="form-control" required>
  </div>
  <div class="form-group form-group-default">
    <label>Phone Number</label>
    <input type="number" name="number" placeholder="Phone number optional" class="form-control">
  </div>
      <div class="form-group form-group-default">
                  <label>Category</label>
                  <select name="category" class="full-width form-control">
                    <option value="General">General</option>
      <option value="Sign Up">Sign Up</option>
      <option value="Onboarding">Onboarding</option>
      <option value="Expenses">Expenses</option>
      <option value="Travels">Travels</option>
      <option value="Leaves">Leaves</option>
      <option value="Suggestions">Suggestions</option>
                  </select>
              </div>
  <div class="form-group form-group-default">
    <label>Message<span style="color:red">*</span></label>
    <textarea name="text" placeholder="Please type your message here" style="height:100px" class="form-control" required></textarea>
  </div>
  <div class="form-group form-group-default">
    <label>Attachment</label>
    <input type="file" name="files[]" accept="file_extension|image/*|media_type" multiple>
  </div>

  <div class="sm-p-t-10 clearfix">
    <i class="pull-left small hint-text m-t-5 font-arial"><span style="color:red">*</span>indicates required field</i>
    <button class="btn btn-primary font-montserrat all-caps fs-12 pull-right xs-pull-left">Submit</button>
  </div>
  <div class="clearfix"></div>
</form>

Route:

	Route::post('send-email','PortalController@sendemail');

Controller:

public function sendemail(Request $request)
	{
		$data = array(
			'name'=> $request->name,
	        'email'=> $request->email,
	        'text'=> $request->text,
	        'category'=> $request->category,
	        'company'=> $request->company,
	        'number'=> $request->number
    	);

    	$files = $request->file('files');

	    \Mail::send('AltHr/Portal/supportemail', $data, function ($message) use($data, $files){

	        $message->from($data['email'], $data['name']);
	        $message->to('ra7veer@gmail.com')->subject($data['company'] . ' - ' .$data['category']);

	        if(count($files > 0)) {
	            foreach($files as $file) {
	                $message->attach($file->getRealPath(), array(
	                    'as' => $file->getClientOriginalName(), // If you want you can chnage original name to custom name      
	                    'mime' => $file->getMimeType())
	                );
	            }
	        }


	    });

	    \Mail::send('AltHr/Portal/supportresponse', $data, function ($message) use($data){

	        $message->from('ra7veer@gmail.com', 'alt.hr Support');
	        $message->to($data['email'])->subject('Greetings from alt.hr');

	    });
	    
		return view('AltHr.Portal.support');
	}

The code is working fine now i just need to how a modal to say that the email has been sent out. how can i do that?

Modal:

<div id="emailSentModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

Answer 1

You can use a session variable. If this session variable has value then the modal will show. something like this.

Controller

public function sendemail(Request $request)
      .....
      ...
      return view('AltHr.Portal.support')->with('modal','true');

Blade

  <script>
            @if(session()->has('modal'))
             $("#emailSentModal").modal("toggle");

            @endif
        </script>

Answer 2

You could do it by using Ajax, sending the POST request with it, and showing the modal in Javascript after getting the response.

Something similar to:

    $.ajax({
       type: "POST",
       url: {{action('AltHr\Portal\PortalController@sendemail')}},
       data: {
           // Your data here
       },
       success: function(msg)
       {
           $("#emailSentModal").modal("toggle");
       }
    });