We Keep Coding

Javascript code style property value not updating after Ajax call

I have JS code where I am changing the style of an HTML element based on an AJAX response.
So my code looks like this.
$.ajax(settings).done(function(response) {
const button_submit = document.getElementById("submit")
button_submit.disabled = response[0];
button_submit.style.cursor = '\"' + response[1] + '\"';
button_submit.style.marginTop = '\"' + response[3] + '\"';
document.getElementById("email").style.visibility = '\"' + response[2] + '\"';
})
input[type=text],
select {
width: 100%;
padding: 12px 20px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 20px;
margin-bottom: 1.2 rem;
margin-bottom: -6%;
}
#submit {
width: 100%;
background: #f39d13;
background: linear-gradient(to bottom, #f39d13 0, #c64f01 100%);
color: white;
padding: 14px 20px;
margin-top: 4%;
border: none;
border-radius: 4px;
font-size: 20px;
cursor: pointer;
}
#customForm {
border-radius: 5px;
padding: 20px;
margin: auto;
width: 65%;
}
p {
font-size: 12px;
color: gray;
margin-top: 5%;
text-align: center;
}
#email {
visibility: hidden;
font-size: 16px;
color: red;
line-height: -6px;
line-height: 1.6;
text-align: left;
display: block;
}
</head>
<div id="customForm">
<form accept-charset="UTF-8" id="" action="#action" method="POST">
<input name="inf_form_xid" type="hidden" value="dd500cb6988ssd3e0151492cb3eff8cf594" />
<input name="inf_form_name" type="hidden" value="UYTS" />
<input name="if_version" type="hidden" value="1.70.0.4582435" />
<div class="if-field">
<label for="inf_field_Email"></label>
<input id="inf_field_Email" name="inf_field_Email" placeholder="Enter your email address " type="text" /></div>
<div>
<div> </div>
</div>
<label id="email">Please enter a valid email address.</label>
<div class="ifn-submit">
<button id="submit" type="submit">Send Now</button></div>
</form>
</div>
But the style is not changing even after all of the JS function is finished.
I wonder what is wrong with my code.
The response of the AJAX is an array that I am going to put on style properties using JS.
Sample response:
['false', 'pointer', 'hidden', '-3%']

The string 'false' is not the same as the boolean false. The disabled property should be a boolean.
You shouldn't add quotes around the other properties. Quotes are part of the syntax in textual styles, they're not part of the property value itself.
$.ajax(settings).done(function(response) {
const button_submit = document.getElementById("submit")
button_submit.disabled = response[0] === 'true';
button_submit.style.cursor = response[1]';
button_submit.style.marginTop = response[3];
document.getElementById("email").style.visibility = response[2];
})
input[type=text],
select {
width: 100%;
padding: 12px 20px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 20px;
margin-bottom: 1.2 rem;
margin-bottom: -6%;
}
#submit {
width: 100%;
background: #f39d13;
background: linear-gradient(to bottom, #f39d13 0, #c64f01 100%);
color: white;
padding: 14px 20px;
margin-top: 4%;
border: none;
border-radius: 4px;
font-size: 20px;
cursor: pointer;
}
#customForm {
border-radius: 5px;
padding: 20px;
margin: auto;
width: 65%;
}
p {
font-size: 12px;
color: gray;
margin-top: 5%;
text-align: center;
}
#email {
visibility: hidden;
font-size: 16px;
color: red;
line-height: -6px;
line-height: 1.6;
text-align: left;
display: block;
}
</head>
<div id="customForm">
<form accept-charset="UTF-8" id="" action="#action" method="POST">
<input name="inf_form_xid" type="hidden" value="dd500cb6988ssd3e0151492cb3eff8cf594" />
<input name="inf_form_name" type="hidden" value="UYTS" />
<input name="if_version" type="hidden" value="1.70.0.4582435" />
<div class="if-field">
<label for="inf_field_Email"></label>
<input id="inf_field_Email" name="inf_field_Email" placeholder="Enter your email address " type="text" /></div>
<div>
<div> </div>
</div>
<label id="email">Please enter a valid email address.</label>
<div class="ifn-submit">
<button id="submit" type="submit">Send Now</button></div>
</form>
</div>

PHP User side Server Side Input Validation error

I am trying to do both server side and user side input validation, however, when I click my submit button it's not bringing me to my thank you page.
My guessing is that when I use the below function it causes the problem.
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
Please let me know what the problem is.
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contact Us</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/contact_form.css">
<script type='text/javascript'>
function validateForm() {
var err = 0;
var fields = document.getElementsByClassName("required");
for (i=0;i<fields.length;i++){
if (fields[i].value === ""){
err += 1;
fields[i].style.backgroundColor = "#ebdded";
}
else{
fields[i].style.backgroundColor = "";
}
}
if(err > 0){
alert("Please Fill the Required Fields");
}
return false;
}
</script>
</head>
<body>
<div class="container">
<div class="form-wrap">
<div class="contact-title">
<div id="circle-container">
<div id="circle-effect">
<div class="circle" id="fifthLayer"></div>
<div class="circle" id="fourthLayer"></div>
<div class="circle" id="thirdLayer"></div>
<div class="circle" id="secondLayer"></div>
<div class="circle" id="firstLayer">Contact Me!</div>
</div>
</div>
</div>
<form name = "_contact_form" class="contact-form" onsubmit="return validateForm()" action="contactform.php" method="POST">
<div class="div-input-form">
<label class="input-label">First Name*: </label>
<input id="fname" class="user-input required" type="text" name="firstName" placeholder="First Name">
</div>
<div class="div-input-form">
<label class="input-label">Last Name*: </label>
<input id = "lname" class="user-input required" type="text" name="lastName" placeholder="Last Name">
</div>
<div class="div-input-form">
<label class="input-label">Email*:</label>
<input id = "email" class="user-input required" type="text" name="email" placeholder="Enter email addess">
</div>
<div class="div-input-form">
<label class="input-label">Phone:</label>
<input class="user-input" type="text" name="phone" placeholder="Enter phone number">
</div>
<div class="div-input-form">
<label class="input-label">Gender:</label>
<input type="radio" class="radio-radio" name = "gender" value="Male"> Male </br>
<input type="radio" class="radio-radio" name = "gender" value="Female"> Female </br>
<input type="radio" class="radio-radio" name = "gender" value="Other"> Other </br> </br>
</div>
<div class="div-input-form">
<label class="input-label">Occupation:</label>
<select name = "dropdown" class="select-occ">
<option value="Student">Student</option>
<option value="Teacher">Teacher</option>
</select>
</div>
<div class="div-input-form">
<label class="input-label">Age:</label>
<input type="radio" class="radio-radio" name = "age" value="18orBelow"> 15 or Below </br>
<input type="radio" class="radio-radio" name = "age" value="19to21"> 16 to 20 </br>
<input type="radio" class="radio-radio" name = "age" value="21orAbove"> 21 or above </br> </br>
</div>
<div class="div-input-form">
</br>
<label class="input-label">How Did You Hear About Us:</label>
<input type="checkbox" class="checkbox" name="hearaboutus"> Internet Search<br>
<input type="checkbox" class="checkbox" name="hearaboutus"> Friends or Family<br>
<input type="checkbox" class="checkbox" name="hearaboutus"> Other<br> </br>
</div>
<div class="div-input-form">
<label class="input-label">Message*:</label>
<textarea id="input_message" class="user-input required" name="message" placeholder="Your Comment..."></textarea>
</div>
<div class="div-submit-button" >
<button id ='submit' name = 'submit-button' class="submit-button">Submit</button>
</div>
</form>
</div>
</div>
</body>
</html>
contactform.php
<?php
session_start();
if(isset($_POST['submit-button'])){
if(empty($_POST["firstName"])) {
$fnameErr = "First Name is required";
}else {
$firstName = strval(test_input($_POST['firstName']));
}
if (empty($_POST["lastName"])) {
$lnameErr = "Last Name is required";
}else {
$lastName = strval(test_input($_POST['lastName']));
}
if (empty($_POST["email"])) {
$emailErr = "Last Name is required";
}else {
$emailFrom = strval(test_input($_POST['email']));
if (!filter_var($emailFrom, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Invalid email format";
}
}
if (empty($_POST["message"])) {
$mesErr = "Last Name is required";
}else {
$message = strval(test_input($_POST['message']));
}
$phone = strval(test_input($_POST['phone']));
$occupation = strval(test_input($_POST['dropdown']));
$age = strval(test_input($_POST['age']));
$hearaboutus = strval(test_input($_POST['hearaboutus']));
$_SESSION['firstname'] = $firstName;
$_SESSION['lastName'] = $lastName;
$_SESSION['emailFrom'] = $emailFrom;
$_SESSION['phone'] = $firstNaphoneme;
$_SESSION['message'] = $message;
$_SESSION['occupation'] = $occupation;
$_SESSION['age'] = $age;
$_SESSION['hearaboutus'] = $hearaboutus;
$mailTo = "gansaikhanshur#gmail.com";
$subjectLine = "E-Mail From: ".$emailFrom."; www.gansaikhanshur.com";
$emailBody = "You have received an email from ".$firstName."\n\n".$message."\n\n\n";
mail($mailTo, $subjectLine, $emailBody);
header("Location: thankupage.php");
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
thankupage.php
<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<title>Thank You Page!</title>
<link rel="stylesheet" type="text/css" href="css/support.css">
</head>
<body>
<div class="center">
<p>Thank You <?php
include 'contactform.php';
echo $_SESSION['firstname'];
session_destroy();
?></p>
Go Back
</div>
</body>
</html>
css
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body, html {
background: #DCD8D7;
height: 100%;
font-family: Helvetica, sans-serif;
}
p {
font-family: Helvetica;
font-size: 14px;
line-height: 1.7;
color: #616060;
margin: 0px;
}
input {
outline: none;
border: none;
}
textarea {
outline: none;
border: none;
}
.container {
width: 100%;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 10px;
background: transparent;
position: relative;
}
.form-wrap {
width: 770px;
background: #fff;
border-radius: 10px;
overflow: hidden;
position: relative;
}
.contact-title {
width: 100%;
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 64px 15px 64px 15px;
}
.contact-title::before {
content: "";
display: block;
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(54,84,99,0.7);
}
.contact-form {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 43px 88px 57px 190px;
}
.div-input-form {
width: 100%;
position: relative;
border-bottom: 1px solid #b2b2b2;
margin-bottom: 26px;
}
.input-label {
font-family: Helvetica;
font-size: 15px;
color: #808080;
line-height: 1.2;
text-align: right;
position: absolute;
top: 14px;
left: -105px;
width: 80px;
}
.user-input {
font-family: Helvetica;
font-size: 15px;
color: #525050;
line-height: 1.4;
display: block;
width: 100%;
background: transparent;
padding: 0 5px;
}
input.user-input {
height: 45px;
}
textarea.user-input {
min-height: 115px;
padding-top: 14px;
padding-bottom: 13px;
}
.div-submit-button {
width: 100%;
display: flex;
flex-wrap: wrap;
padding-top: 8px;
}
.submit-button {
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
min-width: 160px;
width: 100%;
height: 50px;
background-color: #3b88bb;
border-radius: 25px;
font-family: Helvetica;
font-size: 16px;
color: white;
line-height: 1.2;
}
.radio-radio
{
-webkit-appearance: none;
appearance: none;
display: inline-block;
position: relative;
background-color: #f1f1f1;
color: rgb(92, 91, 91);
top: 10px;
height: 25px;
width: 25px;
border: 0;
border-radius: 40px;
cursor: pointer;
margin-right: 7px;
outline: none;
}
.radio-radio:checked::before
{
position: absolute;
font: 13px/1 'Open Sans', sans-serif;
left: 8px;
top: 5px;
content: '\02143';
transform: rotate(40deg);
}
.checkbox
{
border-radius: 5px;
display: inline-block;
margin-right: 7px;
height: 10px;
width: 10px;
}
.select-occ {
display: block;
font-size: 14px;
font-family: sans-serif;
font-weight: 700;
color: rgb(53, 51, 51);
line-height: 1.5;
padding: 7px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 0;
border: 1px solid #aaa;
box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
border-radius: 10px;
-moz-appearance: none;
-webkit-appearance: none;
background-color: #fff;
background-repeat: no-repeat, repeat;
background-position: right .7em top 50%, 0 0;
background-size: .65em auto, 100%;
}
#circle-container {
display: flex;
align-items: center;
justify-content: center;
width: 35vw;
height: 35vh;
position:relative;
}
.circle {
width: 30vh;
height: 30vh;
position: absolute;
border-radius: 50%;
}
#firstLayer {
font-size: 23px;
font-family: "Oswald", sans-serif;
letter-spacing: 1.5px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
transition: 1s;
}
#secondLayer {
background-color: #CCCCFF ;
transition: 1s;
opacity: 0.5;
}
#thirdLayer {
background-color: black;
transition: 1s;
opacity: 0.5;
}
#fourthLayer {
background-color: cornflowerblue;
transition: 1s;
opacity: 0.5;
}
#fifthLayer {
background-color: #FFFF99;
transition: 1s;
opacity: 0.5;
}
#circle-effect {
position:relative;
width: 30vh;
height: 30vh;
border-radius: 50%;
overflow: hidden;
}
#circle-effect:hover #secondLayer {
transform: translate(0px, 75px);
}
#circle-effect:hover #thirdLayer {
transform: translate(0px, -75px);
}
#circle-effect:hover #fourthLayer {
transform: translate(75px, 0px);
}
#circle-effect:hover #fifthLayer {
transform: translate(-75px, 0px);
}

Try to do the below change in your contactform.php
Wrong --> $_SESSION['phone'] = $firstNaphoneme;
Right --> $_SESSION['phone'] = $phone;
Also add ob_start() at the beginning of your code
<?php
ob_start();
/*
Your code
*/
?>

Hey Good Evening Jaona,
Please write your javascript validation like this
if(err > 0){
alert("Please Fill the Required Fields");
return false;
}
and then try it definitely work fine with all validation and redirect.
Thanks have a good evening

header("location: thankupage.php");
Thank you
Soumyanjan

Using jQuery validate not all error messages appear and input fields disappear

I am having some trouble with a form that is using jquery validate.
The problem is that when required fields are left empty and the send (submit) button is used, some error messages appear, but not all, and where the error messages do appear the input fields disappear. When then clicking some of the input fields below those required input fields (*), that did not receive error messages, the error message still appears end the input field then disappears.
Of course all error messages should appear and all input fields should remain visible. Can any help please?
Please see the form here!
<script>
autosize(document.querySelectorAll('#message_content'));
</script>
<script>
var validator = $("#comment_form").validate({
ignore: [],
rules: {
gender: {
required: true,
},
first_name: {
required: true,
minlength: 2
},
last_name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
email_again: {
required: true,
email: true
},
message_subject: {
required: true,
email: true
},
message: {
required: true,
email: true
},
hiddenRecaptcha: {
required: function () {
if (grecaptcha.getResponse() == '') {
return true;
} else {
return false;
}
}
}
}
});
</script>
html {
text-align: center
}
body {
display: inline-block;
margin: 0px auto;
text-align: left;
}
#comment_form {
width: 302px;
}
.label-radio {
font-size: 0.8em;
color: #d8e3e6;
margin-right: 10px;
font-family: questrial;
}
.inputfield3 {
height: 33px;
max-height: 33px;
width: 302px;
border-radius: 16px;
margin-top: 5px;
margin-bottom: 7px;
padding: 0px 10px 0px 10px;
overflow: hidden;
border: none;
background-color: yellow;
display: inline-block;
font-family: questrial;
font-size: 0.8em;
}
.textareafield {
height: 66px max-height: 300px;
width: 302px;
max-width: 302px;
border-radius: 16px;
margin-top: 5px;
margin-bottom: 7px;
padding: 10px 10px 10px 10px;
overflow: hidden;
border: none;
background-color: yellow;
display: inline-block;
font-family: questrial;
font-size: 0.8em;
}
#g-recaptcha-outer {
width: 302px;
height: 72px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
border-radius: 16px;
margin: -10px auto 0 auto;
}
#recaptcha-header {
margin: 0px 0px 8px 0px;
letter-spacing: -0.03em;
color: #d8e3e6;
font-size: 1.0em;
margin-top: 0px;
font-family: questrial;
font-size: 0.8em;
}
#contact_submit_button {
display: block;
text-decoration: none;
margin: 10px auto 80px auto;
width: 230px;
height: 33px;
padding: 0px 15px 0px 15px;
background-color: rgb(0, 157, 233);
color: #ffffff;
font-weight: 900;
border-radius: 16px;
border: none;
outline: none;
font-family: questrial;
}
.requiredmark {
margin: 0px 0px 0px 295px;
display: inline-block;
color: #000000;
padding: 20px 0px 0px 0px;
}
.requiredmark-radio {
margin: 0px 0px 0px 0px;
display: inline-block;
color: #d8e3e6;
font-family: questrial;
}
.error {
display: none;
margin-left: 10px;
}
.error_show {
color: red;
margin-left: 10px;
}
input.invalid,
textarea.invalid {
border: 2px solid red;
}
input.valid,
textarea.valid {
border: 2px solid green;
}
label.error {
margin-top: 50px;
float: none;
color: red;
padding-left: .5em;
vertical-align: top;
display: block;
font-family: Questrail;
}
​
<html>
<head>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script src="https://assets.webshopapp.com/photographycoursetour/autosize.js?2" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
</head>
<body>
<form id="comment_form" action="form.php" method="post">
<div class="compulsoryfield">
<input class="gender" type="radio" name="gender" value="Mr" required><label class="label-radio">Mr.</label>
<input class="gender" type="radio" name="gender" value="Ms"><label class="label-radio">Ms.</label>
<span class="requiredmark-radio">*</span>
</div>
<div class="compulsoryfield"><span class="requiredmark">*</span>
<input id="first_name" class="inputfield3" type="text" placeholder="first name" required>
</div>
<div class="compulsoryfield"><span class="requiredmark">*</span>
<input id="last_name" class="inputfield3" type="text" placeholder="last name" required>
</div>
<input class="inputfield3" type="text" placeholder="company name (if applicable)">
<input class="inputfield3" type="text" placeholder="customer number (on invoice if available)">
<br><br><br><br>
<div class="compulsoryfield"><span class="requiredmark">*</span>
<input id="email" class="inputfield3" type="email" placeholder="email address" required>
</div>
<div class="compulsoryfield"><span class="requiredmark">*</span>
<input id="email-again" class="inputfield3" type="email" placeholder="re-enter email address to confirm" required></div>
<input class="inputfield3" type="text" placeholder="telephone number (country code included)">
<br><br><br><br><br><br>
<div class="compulsoryfield"><span class="requiredmark">*</span>
<input id="message_subject" class="inputfield3" type="text" placeholder="subject of message" required>
</div>
<div class="compulsoryfield"><span class="requiredmark">*</span>
<textarea id="message_content" class="textareafield" name="text" placeholder="add your message here" rows="8" cols="39" required></textarea></div>
<p id="recaptcha-header">before sending, please show us you're real:</p>
<div><span class="requiredmark">*</span>
<div id="g-recaptcha-outer" class="compulsoryfield2">
<div class="g-recaptcha" data-sitekey="6LdBLBUUAAAAAI6eMRYRaA5B-EN_UDKGzwHtNMU1"></div>
<input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
</div>
<br><br>
<input id="contact_submit_button" type="submit" name="submit" value="SEND" onclick="myFunction()">
</form>
<br><br><br><br><br><br>
</body>
</html>

please check this code, you need to add name tag in form like name = "email" etc
<html>
<head>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script src="https://assets.webshopapp.com/photographycoursetour/autosize.js?2" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
</head>
<body>
<form id="comment_form" action="form.php" method="post">
<div class="compulsoryfield">
<input class="gender" type="radio" name="gender" value="Mr" required> <label class="label-radio">Mr.</label>
<input class="gender" type="radio" name="gender" value="Ms"><label class="label-radio">Ms.</label>
<span class="requiredmark-radio">*</span>
</div>
<div class="compulsoryfield"><span class="requiredmark">*</span>
<input id="first_name" name="first_name" class="inputfield3" type="text" placeholder="first name" required>
</div>
<div class="compulsoryfield"><span class="requiredmark">*</span>
<input id="last_name" name="last_name" class="inputfield3" type="text" placeholder="last name" required>
</div>
<input class="inputfield3" type="text" placeholder="company name (if applicable)">
<input class="inputfield3" type="text" placeholder="customer number (on invoice if available)">
<br><br><br><br>
<div class="compulsoryfield"><span class="requiredmark">*</span>
<input id="email" name="email" class="inputfield3" type="email" placeholder="email address" required>
</div>
<div class="compulsoryfield"><span class="requiredmark">*</span>
<input id="email-again" name="email-again" class="inputfield3" type="email" placeholder="re-enter email address to confirm" required></div>
<input class="inputfield3" type="text" placeholder="telephone number (country code included)">
<br><br><br><br><br><br>
<div class="compulsoryfield"><span class="requiredmark">*</span>
<input id="message_subject" name="message_subject" class="inputfield3" type="text" placeholder="subject of message" required>
</div>
<div class="compulsoryfield"><span class="requiredmark">*</span>
<textarea id="message_content" name="message_content" class="textareafield" name="text" placeholder="add your message here" rows="8" cols="39" required></textarea></div>
<p id="recaptcha-header">before sending, please show us you're real:</p>
<div><span class="requiredmark">*</span>
<div id="g-recaptcha-outer" class="compulsoryfield2">
<div class="g-recaptcha" data-sitekey="6LdBLBUUAAAAAI6eMRYRaA5B-EN_UDKGzwHtNMU1"></div>
<input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
</div>
<br><br>
<input id="contact_submit_button" type="submit" name="submit" value="SEND" onclick="myFunction()">
</form>
<br><br><br><br><br><br>
</body>
</html>
and also update this code
.inputfield3 {
height: 33px;
max-height: 33px;
width: 302px;
border-radius: 16px;
margin-top: 5px;
margin-bottom: 7px;
padding: 0px 10px 0px 10px;
overflow: hidden;
border: none;
background-color: yellow;
display: inline-block !important;
font-family: questrial;
font-size: 0.8em;
}
.textareafield {
height: 66px max-height: 300px;
width: 302px;
max-width: 302px;
border-radius: 16px;
margin-top: 5px;
margin-bottom: 7px;
padding: 10px 10px 10px 10px;
overflow: hidden;
border: none;
background-color: yellow;
display: inline-block !important;
font-family: questrial;
font-size: 0.8em;
}
please add this code also
.gender {
border-radius: 16px;
margin-top: 5px;
margin-bottom: 7px;
padding: 0px 10px 0px 10px;
overflow: hidden;
border: none;
background-color: yellow;
display: inline-block !important;
font-family: questrial;
font-size: 0.8em;
}
#gender-error {
float: right;
}
css is not perfect but it will fill your requirement
update this code
<script>
var validator = $("#comment_form").validate({
ignore: [],
rules: {
gender: {
required: true,
},
first_name: {
required: true,
minlength: 2
},
last_name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
email_again: {
required: true,
email: true
},
message_subject: {
required: true
},
message: {
required: true
},
hiddenRecaptcha: {
required: function () {
if (grecaptcha.getResponse() == '') {
return true;
} else {
return false;
}
}
}
}
});
</script>

Some of your inputs receive the class "error", which places them in "display:none", this is why they are disappearing. The "error" class is set on JQuery error labels and it makes them "display:none" when the error is gone.

How to use contents of h2 tag as subject of email?

I would like my subject to change according to the specific button pressed. Each button represents a different order choice, and changes the value of the h2 tag. I would like the contents of this h2 tag to be the subject of my email in PHP. How do I do this?
// JavaScript Document
// Validating Empty Field
//function check_empty() {
//if (document.getElementById('name').value == "" || document.getElementById('email').value == "") {
//alert("Please fill out all fields.");
//} else {
// alert("Order Successful!");
//}
//}
//Function To Display Popup
function div_show1() {
document.getElementById("ordertype").innerHTML = "$400 Website Order";
document.getElementById('abc').style.display = "block";
}
function div_show2() {
document.getElementById("ordertype").innerHTML = "$500 Website Order";
document.getElementById('abc').style.display = "block";
}
function div_show3() {
document.getElementById("ordertype").innerHTML = "$700 Website Order";
document.getElementById('abc').style.display = "block";
}
//Function to Hide Popup
function div_hide() {
document.getElementById('abc').style.display = "none";
}
#charset "utf-8";
/* CSS Document */
#abc {
width: 100%;
height: 100%;
opacity: 0.97;
top: 0;
left: 0;
display: none;
position: fixed;
background-color: #313131;
overflow: auto;
z-index: 9999999;
}
img#close {
position: absolute;
right: -14px;
top: -14px;
cursor: pointer;
}
div#popupContact {
position: absolute;
left: 50%;
top: 17%;
margin-left: -202px;
font-family: coolfont;
}
form {
max-width: 300px;
min-width: 250px;
padding: 20px 50px;
border: 2px solid gray;
border-radius: 10px;
font-family: coolfont;
background-color: #fff;
}
#moveupwards {
margin-top: -20px;
}
p {
margin-top: 30px;
}
h2 {
background-color: #FEFFED;
padding: 20px 35px;
margin: -10px -50px;
text-align: center;
border-radius: 10px 10px 0 0;
font-family: info;
}
hr {
margin: 10px -50px;
border: 0;
border-top: 1px solid #ccc;
}
input[type=text] {
width: 82%;
padding: 10px;
margin-top: 30px;
border: 1px solid #ccc;
padding-right: 40px;
font-size: 16px;
font-family: coolfont;
}
input[type=email] {
width: 82%;
padding: 10px;
margin-top: 30px;
border: 1px solid #ccc;
padding-right: 40px;
font-size: 16px;
font-family: coolfont;
}
textarea {
width: 82%;
height: 95px;
padding: 10px;
resize: none;
margin-top: 30px;
border: 1px solid #ccc;
padding-right: 40px;
font-size: 16px;
font-family: coolfont;
margin-bottom: 30px;
}
#submit {
text-decoration: none;
width: 100%;
text-align: center;
display: block;
background-color: #FFBC00;
color: #fff;
border: 1px solid #FFCB00;
padding: 10px 0;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
}
#media only screen and (max-width: 457px) {
form {
max-width: 200px;
min-width: 150px;
padding: 10px 50px;
margin-left: 50px;
}
input[type=text] {
padding-right: 30px;
}
textarea {
padding-right: 30px;
}
}
#media only screen and (max-width: 365px) {
form {
max-width: 140px;
min-width: 90px;
padding: 10px 50px;
margin-left: 80px;
}
input[type=text] {
padding-right: 10px;
}
textarea {
padding-right: 10px;
}
}
<a class="button" id="popup" onclick="div_show1()">ORDER NOW</a>
<a class="button" id="popup" onclick="div_show2()">ORDER NOW</a>
<a class="button" id="popup" onclick="div_show3()">ORDER NOW</a>
<div id="abc">
<!-- Popup Div Starts Here -->
<div id="popupContact">
<!-- Contact Us Form -->
<form action="form.php" id="form" method="post" name="form" enctype="multipart/form-data">
<img id="close" src="images/redcross.png" width="50" onclick="div_hide()">
<h2 id="ordertype" name="ordertype" type="text">#</h2>
<hr>
<div id="moveupwards">
<input id="name" name="name" required="required" placeholder="Name" type="text">
<input id="email" name="email" required="required" placeholder="Email" type="email">
<textarea id="message" name="message" placeholder="Comments/Questions"></textarea>
<input id="submit" name="submit" class="submit" type="submit" value="Order">
</div>
</form>
</div>
<!-- Popup Div Ends Here -->
</div>
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: -';
$to = 'example#gmail.com';
$subject = $_GET['ordertype'];
$body = "From: ".$name.
"\r\n E-Mail: ".$email.
"\r\n Message: \r\n".$message;
if ($_POST['submit']) {
if (mail($to, $subject, $body, $from)) {
echo '<script>
alert("Order has been placed. We will be in touch with you shortly."); location.href="#";
</script>';
} else {
echo '<p>Something went wrong, go back and try again!</p>';
}
}
?>

As mentioned by #chris85, <h2> elements are not posted when submitting a form.
You may want to check out the HTML forms guide # MDN.
I suggest populating a hidden <input> with the content of the <h2>.
Something like this demonstration:
function set_value() {
var title = document.getElementById("ordertitle"),
type = document.getElementById("ordertype");
title.innerHTML = type.value = "$400 Website Order";
}
function show_hidden() {
// for demonstration purposes
var type = document.getElementById("ordertype");
type.type="text";
}
document.getElementById("set_value").addEventListener('click',set_value);
document.getElementById("show_hidden").addEventListener('click',show_hidden);
<form action="form.php" method="post" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="ordertype" id="ordertype" />
<h2 id="ordertitle"></h2>
<button id="set_value" >Set Value</button>
<button id="show_hidden">Show Hidden Input</button>
</form>
Also, since you've set your form to method="post", you'll want to retrieve the value from the $_POST array rather than $_GET:
$subject = $_POST['ordertype'];
For reference, see The Post Method.

Issues with jQuery Validate onkeyup and highlighting

I am having issues with jQuery Validate. This is the first time I have created a form using Validate and am a little confused on why some of the things are not working. I uploaded it to JsFiddle HERE so that it does not become overwhelming on here, but they require that I add a little code so for the first issue I will include an example of what I tried below.
$('.awesome-form').validate({
onkeyup:true,
errorElement: 'div',
errorClass: 'formError',
I am trying to get it to validate onkeyup. I have tried to add onkeyup like it says in the documentation like above, but this does not do what I want it to do. The name field and the message field will not show an error until I click enter. Every now and then I can get it to appear but it is usually only after multiple clicks and submits.
I am having an issue with the custom highlight. For some reason it works only on the message input. essentially I would like it so that when an error occurs it will immediately turn the border-bottom to red.

$(function() {
$('.awesome-form .input-group input, textarea').focusout(function() {
var text_val = $(this).val();
if (text_val === "") {
$(this).removeClass('has-value');
} else {
$(this).addClass('has-value');
}
});
});
$(function() {
$.validator.setDefaults({
highlight: function(element) {
$(element)
.closest('.formInput')
.addClass('errorHighlight');
},
unhighlight: function(element) {
$(element)
.closest('.formInput')
.removeClass('errorHighlight');
}
});
$('.awesome-form').validate({
errorElement: 'div',
errorClass: 'formError',
errorContainer: '#errorPanel',
errorLabelContainer: '#errorPanel ul',
onkeyup:function(element) {
$(element).valid();
},
wrapper: 'li',
rules: {
name: {
required: true
},
email: {
required: true,
email: true
},
message: {
required: true
}
},
messages: {
name: {
required: 'Please include at least a first name'
},
email: {
required: 'Please include your email address',
email: 'Invalid email address'
},
message: {
required: 'Please include a short message'
}
}
});
});
.chosenContact {
cursor: pointer;
display: flex;
box-sizing: border-box;
width: 100px;
flex-direction: column;
align-items: flex-start;
margin: 0 5px;
}
.chosenContact p {
margin: 0;
padding: 0;
font-size: 14px;
}
label input {
display: none;
}
label input[type="radio"]:checked + img {
background: red;
border: solid 4px red;
}
input,
textarea {
background: none;
border: solid 2px #232323;
color: #232323;
padding: 15px 40px;
font-size: 18px;
display: inline-block;
}
input:focus,
input:active,
textarea:focus,
textarea:active {
outline: none;
}
input[type="text"],
input[type="email"],
textarea {
border: none;
border-bottom: 2px solid #232323;
min-width: 300px;
}
input[type="text"]..errorHighlight,
input[type="email"].errorHighlight,
textarea.errorHighlight {
width: 170px;
background-color: red;
max-height: 70px;
}
input[type="submit"]:active {
color: white;
background: red;
border: red;
}
.input-group {
display: inline-block;
margin: 20px 0 20px 0;
position: relative;
}
.input-group input,
textarea {
padding: 15px 0px;
}
textarea {
width: 100%;
}
.errorHighlight {
border: none;
background-color: red;
border-bottom: 2px solid red;
}
.input-group label {
position: absolute;
top: 50%;
left: 0px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-family: "Georgia", "Cambria", "Times New Roman", "Times", serif;
font-style: italic;
font-size: 18px;
color: #999;
pointer-events: none;
-webkit-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s;
}
.input-group input:focus + label,
.input-group input.has-value + label,
.input-group textarea:focus + label,
.input-group textarea.has-value + label {
top: -10px;
font-size: 12px;
color: #aaa;
}
.input-group-submit {
display: flex;
justify-content: space-around;
align-items: center;
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.min.js"></script>
</head>
<body>
<div class="contactUs">
<form class="awesome-form" name="contactForm" action="phpScripts/contactForm.php" method="post">
<div class="contactWho">
<label class="chosenContact">
<input type="radio" name="who" value="Boss" checked>
<img src="http://www.placecage.com/100/100" alt="">
<p class="contactStaffName">Boss Man</p>
</label>
<label class="chosenContact">
<input type="radio" name="who" value="staff1">
<img src="http://www.placecage.com/100/100" alt="">
<p class="contactStaffName">Staff Member 1</p>
</label>
<label class="chosenContact">
<input type="radio" name="who" value="staff2">
<img src="http://www.placecage.com/100/100" alt="">
<p class="contactStaffName">Staff Member 2</p>
</label>
</div>
<div class="sayWhat">
<div class="nameAndEmail">
<div class="input-group">
<input class="formInput" type="text" name="name">
<label class="formLabel">Your Full Name</label>
</div>
<div class="input-group">
<input class="formInput" type="email" name="email">
<label class="formLabel">Your Email Address</label>
</div>
</div>
<div class="input-group">
<textarea class="formInput" name="message" rows="10"></textarea>
<label class="formLabel">How Can I Help You?</label>
</div>
<div class="input-group-submit">
<input type="submit" value="Contact Us">
</div>
</div>
</form>
<div id="errorPanel">
<ul>
</ul>
</div>
</div>
</body>
</html>