RSVP form not submitting

RSVP form not submitting
0

#1

Would like feedback on a website I am creating. It is the second website in which I’ve coded.

http://www.danielwedsnicole.com

I’m also having issues with the RSVP form. The submit button does not send form data. I’ve never worked with PHP or Ajax before so I can’t figure out the exact problem.


#2

you’ve got syntax error in main.js (remove }); at the end).
In the validate method you have to specify rules and submitHandler for it to work properly.

There might be problems in servers side code, but without seeing the code it’s hard to tell.


#3

PHP code

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $name = strip_tags(trim($_POST["name"]));
            $name = str_replace(array("\r","\n"),array(" "," "),$name);
    $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
    $events = ($_POST["events"]);
    $guests = ($_POST["guests"]);
    $guestinfo = trim($_POST["guestinfo"]);
    $message = trim($_POST["message"]);

    if (empty($name) OR empty($events) OR empty($guests) OR empty($guestinfo) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
        header("HTTP/1.0 404 Not Found?");
        echo "Oops! There was a problem with your submission. Please complete the form and try again.";
        exit;
    }

    $recipient = "danielwedsnicole@gmail.com";

    $subject = "RSVP from $name";

    $email_content = "Name: $name\n\n";
    $email_content .= "Email: $email\n\n";
    $email_content .= "Events: $events\n\n";
    $email_content .= "Guests: $guests\n\n";
    $email_content .= "Guests details: $guestinfo\n\n";
    $email_content .= "Message:\n$message\n\n";

    $email_headers = "From: $name <$email>";

    if (mail($recipient, $subject, $email_content, $email_headers)) {
        header('HTTP/1.0 200 OK');
        echo "Thank You! Your message has been sent.";
    } else {
        header('HTTP/1.0 500 Internal Server Error');
        echo "Oops! Something went wrong and we couldn't send your message.";
    }
} else {
    header('HTTP/1.0 403 Forbidden');
    echo "There was a problem with your submission, please try again.";
}

Ajax Code

$(function() {
    var form = $('#rsvp-form');
    var formMessages = $('#form-messages');

    $(form).submit(function(e) {
        e.preventDefault();

        var formData = $(form).serialize();

        $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData
        })
        .done(function(response) {
            $(formMessages).removeClass('alert alert-danger');
            $(formMessages).addClass('alert alert-success');
            $(formMessages).text(response);

            $('#cname').val('');
            $('#cemail').val('');
            $('#cevents').val('');
            $('#cguests').val('');
            $('#cguestinfo').val('');
            $('#cmessage').val('');
        })
        .fail(function(data) {
            $(formMessages).removeClass('alert alert-success');
            $(formMessages).addClass('alert alert-danger');

            if (data.responseText !== '') {
                $(formMessages).text(data.responseText);
            } else {
                $(formMessages).text('Oops! An error occured and your message could not be sent.');
            }
        });
    });
});

#4

main.js file

$(document).ready(function() {

$('#cguests').on("change", function(){

    if ($(this).val() == "") {
        $('.guestinfo-group').slideUp(); //hide
        console.log('not selected');
    } else if ($(this).val() == 'No Guests' ) {
        $('.guestinfo-group').slideUp(); //hide
        console.log('No guests');
        $('#cguestinfo').val('No Guests'); //Pass data to the field so mailer.php can send the form.

    } else {
        $('.guestinfo-group').slideDown(); //show
        $('#cguestinfo').val(''); //Clear data
        console.log('Has guests');
    }

});

/* ======= jQuery form validator ======= */
$(".rsvp-form").validate({
messages: {
    name: {
      required: 'Please enter your full name'
  },
  email: {
    required: 'Please enter your email'
  },
  events: {
    required: 'Are you attending?'
  },
  guests: {
    required: 'How many guests?'
  },
  guestinfo: {
    required: 'Please provide name(s)'
  },
}
});


});


#5

i fixed the error in the main.js file. could you elaborate on the validate method? I provided code if you could please take a look.


#6

Take a look at the example below (you need to add rules and submitHandler to prevent default behavior, specifying only messages doesn’t prevent an invalid form to be submitted, it just shows messages).

	var validator = $("#signupform").validate({
		rules: {
			firstname: "required",
			lastname: "required",
			username: {
				required: true,
				minlength: 2,
				remote: "users.action"
			},
			password: {
				required: true,
				minlength: 5
			},
			password_confirm: {
				required: true,
				minlength: 5,
				equalTo: "#password"
			},
			email: {
				required: true,
				email: true,
				remote: "emails.action"
			},
			dateformat: "required",
			terms: "required"
		},
		messages: {
			firstname: "Enter your firstname",
			lastname: "Enter your lastname",
			username: {
				required: "Enter a username",
				minlength: jQuery.validator.format("Enter at least {0} characters"),
				remote: jQuery.validator.format("{0} is already in use")
			},
			password: {
				required: "Provide a password",
				minlength: jQuery.validator.format("Enter at least {0} characters")
			},
			password_confirm: {
				required: "Repeat your password",
				minlength: jQuery.validator.format("Enter at least {0} characters"),
				equalTo: "Enter the same password as above"
			},
			email: {
				required: "Please enter a valid email address",
				minlength: "Please enter a valid email address",
				remote: jQuery.validator.format("{0} is already in use")
			},
			dateformat: "Choose your preferred dateformat",
			terms: " "
		},
		// specifying a submitHandler prevents the default submit, good for the demo
		submitHandler: function() {
			alert("submitted!");
		}
	});

#8

well I’m also using the jQuery validation plugin