Created two different PHP Laravel contact forms both submit and send at the same time when you complete one form

Question

I have created two different contact forms using PHP Laravel, AJAX and Mailgun. Both forms are working as they both send mail via Mailgun. However, when you complete and send one form, it automatically sends the other form for some reason.

Here is the jQuery(AJAX) I used to send the mail:

$("form.wpcf7-form").submit(function(e){
    e.preventDefault();
    var token = $("input[name=_token]").val(); // The CSRF token
    var first_name = $("input[name=first-name]").val();
    var last_name = $("input[name=last-name]").val();
    var email = $("input[name=email]").val();
    var phone = $("input[name=phone]").val();
    var bodyMessage = $("textarea[name=message]").val();

    $.ajax({
       type:'POST',
       url:'/contact',
       dataType: 'json',
       data:{_token: token, first_name:first_name, last_name:last_name, email:email, phone:phone, bodyMessage:bodyMessage},
       success:function(data){
           $(".email-success-messge").append(data.success).fadeIn(999);

       }
    });
});

$("form.reservation-form").submit(function(e){
    e.preventDefault();
    var token = $("input[name=_token]").val(); // The CSRF token
    var fullname = $("input[name=fullname]").val();
    var phone = $("input[name=phone]").val();
    var email = $("input[name=email]").val();
    var number_of_guests = $("select[name=number_of_guests]").val();
    var date_of_reservation = $("input[name=date]").val();
    var time_of_reservation = $("input[name=time]").val();

    $.ajax({
       type:'POST',
       url:'/dine',
       dataType: 'json',
       data:{_token: token, fullname:fullname, phone:phone, email:email, phone:phone, number_of_guests:number_of_guests, date_of_reservation:date_of_reservation, time_of_reservation:time_of_reservation},
       success:function(data){
           $(".email-success-message").append(data.success).fadeIn(999);

       }
    });
});

My ReservationController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Post;
use Mail;
use Session;

class ReservationController extends Controller
{
    public function postReservation(Request $request){

        $data = array(
            'fullname' => $request->fullname,
            'phone' => $request->phone,
            'email' => $request->email,
            'number_of_guests' => $request->number_of_guests,
            'date_of_reservation' => $request->date_of_reservation,
            'time_of_reservation' => $request->time_of_reservation
        );

        Mail::send('emails.reservation', $data, function($message) use ($data){
            $message->from($data['email']);
            $message->to('jafar@calmcollective.co.uk');
            $message->subject('Reservation Details');
        });

        return response()->json(['success' => 'Thank you for making your reservation with us!'], 200);

    }
}

My ContactController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Post;
use Mail;
use Session;

class ContactController extends Controller
{
    public function postContact(Request $request){
        $this->validate($request, ['email' => 'required|email'] );

        $data = array(
            'first_name' => $request->first_name,
            'last_name' => $request->last_name,
            'email' => $request->email,
            'phone' => $request->phone,
            'bodyMessage' => $request->bodyMessage
        );

        Mail::send('emails.contact', $data, function($message) use ($data){
            $message->from($data['email']);
            $message->to('jafar@calmcollective.co.uk');
            $message->subject('Contact Details');
        });

        return response()->json(['success' => 'Thank you for getting in touch!'], 200);

    }
}

My routes

Route::post('/contact', 'ContactController@PostContact');

Route::post('/dine', 'ReservationController@postReservation');

Screenshot of my XHR requests:

@SebastienD pardon me, I forgot. I have added it to the question now. — Jafar Salami, Feb 22 '18 at 13:04
When you post your data, what does your console say ? Are there XHR requests on both routes? — Sebastien D, Feb 22 '18 at 13:06
And `ContactController@PostContact` in your route should be `ContactController@postContact` — Sebastien D, Feb 22 '18 at 13:09
I should have been more precise, in your `Network` tab of your development tools (https://stackoverflow.com/a/3019085/7652544) — Sebastien D, Feb 22 '18 at 13:18
@SebastienD Ok I have provided a screenshot of XHR requests. They both have a 200 status but I know this because the contact forms still sent mail. — Jafar Salami, Feb 22 '18 at 14:16
If both requests are sent, the error stand in your HTML. Maybe a conflict in the structure that causes both ajax requests to be called. Post a bit more of HTML code :) — Sebastien D, Feb 22 '18 at 14:18
@SebastienD I figured it out. You were right it was my HTML. My Form element had the same classes when you submitted on the form it would send the other. — Jafar Salami, Feb 22 '18 at 15:04

score 0 · Accepted Answer · answered Feb 22 '18 at 15:05

0

From your post, there is surely an error in your HTML, a conflict between classes which causes a double Ajax call

answered Feb 22 '18 at 15:05

Sebastien D

4,369
4
18
46

Created two different PHP Laravel contact forms both submit and send at the same time when you complete one form

1 Answers1