php - input button not getting set in the POST variable
Get the solution ↓↓↓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) "[email protected]" ["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
Solution:
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 yoursendBtn
value.
Instead of callinge.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;
}
});
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: sqlstate[hy000] [1698] access denied for user 'root'@'localhost'
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.