input button not getting set in the POST variable - php

Question

I have a page with two forms. I need to know which button is submitting the form. When the form gets submitted I am checking the set status of the button, but it doesn't seem to be set. Can anyone help?
HTML
<div id="contact-wrapper" class="">
<h1 style="color: white">Send me an email.</h1>
<div id="msg-status"></div>
<form id="contact" method="post">
<div class="contact-title">Email Address</div>
<input type="email" name="emailAddress" id="email-addr-txt" placeholder="Your Email Address" require>
<div class="contact-title">Subject</div>
<input type="text" name="emailSubject" id="email-subject-txt" placeholder="Subject" require>
<div class="contact-title">Message</div>
<textarea name="emailMessage" id="email-msg-txt" placeholder="Message" require></textarea>
<input type="submit" name="sendBtn" value="Send" id="send-msg-btn">
</form>
</div>
PHP
<?php
$phpconsole = "";
if ($_SERVER['REQUEST_METHOD'] === 'POST'){
if (isset($_POST["loginBtn"])) {
//Do Stuff
}
if (isset($_POST["sendBtn"])) {
//Do Stuff
}
$phpconsole = var_dump($_POST); }
?>
JavaScript
$('#contact').submit(function(e){
e.preventDefault();
email_regex = /^\b[A-Z0-9._%-]+#[A-Z0-9.-]+\.[A-Z]{2,4}\b$/i;
var msg = "";
if ($('#email-addr-txt').val() == ""){
msg += "<p>The email address is missing!</p>";
} else if (!email_regex.test($('#email-addr-txt').val())) {
msg += "<p>The email address is invalid!</P>"
}
if ($('#email-subject-txt').val() == "") {
msg += "<p>The Subject is missing!</p>";
}
if ($('#email-msg-txt').val() == "") {
msg += "<p>The message is missing!</p>"
}
var heightOfContactWrapper = $('#contact-wrapper').height();
if (msg != "") { // There were errors that need to be delt with before sending message.
msg = "<h2>There were errors.</h2>" + msg;
$('#msg-status').html(msg);
$('#msg-status').addClass('msg-status-fail');
var heightOfMsgStatus = $('#msg-status').height() + $('#contact-wrapper').height() + "px";
$('#contact-wrapper').css('height', (heightOfContactWrapper + $('#msg-status').height() + "px"));
} else { //No errors found.
$('#msg-status').removeClass('msg-status-fail');
$('#msg-status').addClass('msg-status-success');
$('#msg-status').html("<h2>Message is sending. Please wait.</h2>")
$('#contact-wrapper').css('height', (heightOfContactWrapper + $('#msg-status').height() + "px"));
$('#contact').unbind('submit').submit();
}
});
Output of var_dump is
array(3) { ["emailAddress"]=> string(13) "asdf#aedf.com"
["emailSubject"]=> string(4) "asdf" ["emailMessage"]=> string(4)
"asdf" }
Errors are:
Notice: Undefined index: loginBtn in /var/www/new-site/index.php on
line 5 Notice: Undefined index: SendBtn in /var/www/new-site/index.php
on line 5

Answer 1

The problem is that your Javascript code ends up being the thing that triggers the form submit, not your button. If you removed your JS code you'd see your sendBtn value.
Instead of calling e.preventDefault in your .submit() callback, you could just return true if you want the form submission to continue, or false if you don't. That way, you don't have to call $('#contact').submit() to get your form to submit, or even unbind your submit handler. Something like this:
$('#contact').submit(function(e){
email_regex = /^\b[A-Z0-9._%-]+#[A-Z0-9.-]+\.[A-Z]{2,4}\b$/i;
var msg = "";
if ($('#email-addr-txt').val() == ""){
msg += "<p>The email address is missing!</p>";
} else if (!email_regex.test($('#email-addr-txt').val())) {
msg += "<p>The email address is invalid!</P>"
}
if ($('#email-subject-txt').val() == "") {
msg += "<p>The Subject is missing!</p>";
}
if ($('#email-msg-txt').val() == "") {
msg += "<p>The message is missing!</p>"
}
var heightOfContactWrapper = $('#contact-wrapper').height();
if (msg != "") { // There were errors that need to be delt with before sending message.
msg = "<h2>There were errors.</h2>" + msg;
$('#msg-status').html(msg);
$('#msg-status').addClass('msg-status-fail');
var heightOfMsgStatus = $('#msg-status').height() + $('#contact-wrapper').height() + "px";
$('#contact-wrapper').css('height', (heightOfContactWrapper + $('#msg-status').height() + "px"));
return false;
} else { //No errors found.
$('#msg-status').removeClass('msg-status-fail');
$('#msg-status').addClass('msg-status-success');
$('#msg-status').html("<h2>Message is sending. Please wait.</h2>")
$('#contact-wrapper').css('height', (heightOfContactWrapper + $('#msg-status').height() + "px"));
return true;
}
});