Develop Reference

Submit Pre Typed Text in table from PHP form to email

I have a request form in which I have a table with pre-typed text (which belongs to other field in form in HR) which is in hide/show select option. I need some help in which when the user selects the selected it shows a table with pre-typed text and when the user submits in PHP form, the recipient so gets the exact data in the email.
I have the hide/show part working but the I'm having problems sending the table with text.
i have $usersGMGroup = nl2br($_POST["acc_GMGroup"]); so i can have the text can go to next line.
Currently, I didn't have any way in which I could submit the table so I have the same table text written in textarea, which works but when I submit the form with data and the recipient gets textarea text with the other request. For example, if I sent a request for an IT service the form also sends the textarea pre type text.
Is there any way i can make the textarea with pre type text only submit when its select is selected
$(function() {
$("#groups").change(function() {
if ($(this).val() == "GM") {
$("#groups_GM").show();
$("#acc_GMGroup").show();
} else {
$("#groups_GM").hide();
$("#acc_GMGroup").hide();
}
});
});
$('#groups').trigger('change');
//---------------------Hide Functions When Program Loads--------------------------------//
$(document).ready(function() {
$("#acc_GMGroup").hide();
});
html,
body {
min-height: 100%;
}
body,
div,
form,
input,
label {
padding: 0;
margin: 0;
outline: none;
font-family: Roboto, Arial, sans-serif;
font-size: 15px;
color: #666;
line-height: 19px;
}
legend {
color: #fff;
background-color: #095484;
padding: 3px 5px;
font-size: 20px;
}
h1 {
position: absolute;
margin: 0;
font-size: 36px;
color: #fff;
z-index: 2;
}
.testbox {
display: flex;
justify-content: center;
align-items: center;
height: inherit;
padding: 20px;
}
form {
width: 75%;
padding: 20px;
border-radius: 8px;
background: #fff;
box-shadow: 0 0 50px 0 #095484;
}
.banner {
position: relative;
height: 300px;
background-image: url("");
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.banner::after {
content: "";
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
}
input {
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 17px;
font-weight: bold;
}
input {
width: calc(100% - 10px);
padding: 5px;
}
select {
width: 100%;
padding: 3px 0;
background: transparent;
font-size: 17px;
font-weight: bold;
}
.hiddenField {
display: none;
}
table.tb {
border-collapse: collapse;
width: 650px;
}
.tb th,
.tb td {
padding: 6px;
border: solid 1px #262626;
}
.tb th,
.tb td {
color: #262626;
}
.tb th {
background-color: lightblue;
}
textarea {
white-space: pre;
text-align: left;
width: 650px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="frmContact" id="frmContact" method="post" action="" enctype="multipart/form-data" class="p-3">
<div class="form-group">
<h2>Requestor's Information          Employee's Information</h2>
<hr>
<div class="row">
<div class="col-6">
<label for="userReqEmp">Requestor Name</label>
<input type="text" class="form-control w-100" id="userReqEmp" name="userReqEmp" placeholder="Type Here...">
</div>
<div class="col-6">
<label for="userNameEmp">Full Name</label>
<input type="text" class="form-control w-100" id="userNameEmp" name="userNameEmp" placeholder="Type Here...">
</div>
<div class="col-6">
<label for="userComEmp">Comments (Optional)</label>
<textarea type="text" class="form-control w-100" id="userComEmp" name="userComEmp" rows="7" placeholder="Type Here..."></textarea>
</div>
<div class="col-6">
<div class="row">
<label class="col-12" for="userEIDEmp">Employee ID</label>
</div>
<div class="row">
<div class="col-12">
<input type="text" class="form-control w-100" id="userEIDEmp" name="userEIDEmp" placeholder="Type Here...">
</div>
</div>
<div class="row">
<label class="col-12" for="userOIDEmp">One ID</label>
</div>
<div class="row">
<div class="col-12">
<input type="text" class="form-control w-100" id="userOIDEmp" name="userOIDEmp" placeholder="Type Here...">
</div>
</div>
<div class="row">
<label class="col-12" for="userDateEmp">Start Date</label>
</div>
<div class="row">
<div class="col-12">
<input type="date" class="form-control w-100" id="userDateEmp" name="userDateEmp" placeholder="Type Here...">
</div>
</div>
<div class="row">
<label class="col-12">Select Department</label>
</div>
<div class="row">
<div class="col-12">
<select id="groups" name="groups" class="form-control w-100">
<option value="">Select an option</option>
<option value="GM">GM</option>
<option value="AGM">AGM</option>
</select>
</div>
</div>
<br>
<!-- GM -->
<div class="row">
<div class="col-12" id="groups_GM" name="groups_GM" style="display: none;">
<h2>DC GM Group</h2>
<table class="tb">
<tr>
<th>Domain Group Access</th>
<!-- Title -->
</tr>
<tr>
<td>PUBLIC<br>FunctionManagers<br>Managers</td>
<!-- Content -->
</tr>
<tr>
<th>Distribution List</th>
<!-- Title -->
</tr>
<tr>
<td>Woodland Mgmt<br>DCManager<br>InboundManagers<br>SrManager</td>
<!-- Content -->
</tr>
<tr>
<th>Additional Access</th>
<!-- Title -->
</tr>
<tr>
<td>DCNet<br>AS400<br>VPN Non-Standard</td>
<!-- Content -->
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-6">
<textarea class="textarea" id="acc_GMGroup" name="acc_GMGroup">
<u>Domain Group Access</u>
PUBLIC
FunctionManagers
Managers
<u>Distribution List</u>
Woodland Mgmt
DCManager
InboundManagers
SrManagers
<u>Additional Access</u>
DCNet
AS400
VPN Non-Standard
</textarea>
</div>
</div>
</div>
<!-- End of Right Side -->
</div>
</div>
</form>

you can have it disabled by default by adding disabled attribute to it which will prevent the field from being submitted with the rest of the form
<textarea class="textarea" id="acc_GMGroup" name="acc_GMGroup" disabled>
<u>Domain Group Access</u>
PUBLIC
FunctionManagers
Managers
<u>Distribution List</u>
Woodland Mgmt
DCManager
InboundManagers
SrManagers
<u>Additional Access</u>
DCNet
AS400
VPN Non-Standard
</textarea>
and re-enable it when option selected
if ($(this).val() == "GM") {
$("#groups_GM").show();
$("#acc_GMGroup").show();
$("#acc_GMGroup").prop('disabled','');
} else {
$("#groups_GM").hide();
$("#acc_GMGroup").hide();
$("#acc_GMGroup").prop('disabled','disabled');
}

When Select Option is selected and submitted, it shows all option in hidden all the hidden text area text

I'm encountering two problems,
I have made a request form for my clients but when I submit the form and I get the email(testing the form) I see all the hidden text area text in the HTML email. For example, if I select the GM option from the select and submit it, in the email I will see the GM option plus the AGM option.
When I select and submit another category request from the form, I will get the hidden textarea text option in email too
Is there a fix for these two problems in encountering?
Here are the two codes from my send_mail.php
$usersGMGroup = nl2br($_POST["acc_GMGroup"]);
$usersAGMGroup = nl2br($_POST["acc_AGMGroup"]);
Im using nl2br for making the codes in hidden textarea go in the next line.
$(function() {
$("#groups").change(function() {
//GM Group
{
if ($(this).val() == "GM") {
$("#groups_GM").show();
$("#acc_GMGroup").show();
} else {
$("#groups_GM").hide();
$("#acc_GMGroup").hide();
}
}
//AGM Group
{
if ($(this).val() == "AGM") {
$("#groups_AGM").show();
$("#acc_AGMGroup").show();
} else {
$("#groups_AGM").hide();
$("#acc_AGMGroup").hide();
}
}
});
});
$('#groups').trigger('change');
html,
body {
min-height: 100%;
}
body,
div,
form,
input,
label {
padding: 0;
margin: 0;
outline: none;
font-family: Roboto, Arial, sans-serif;
font-size: 15px;
color: #666;
line-height: 19px;
}
legend {
color: #fff;
background-color: #095484;
padding: 3px 5px;
font-size: 20px;
}
h1 {
position: absolute;
margin: 0;
font-size: 36px;
color: #fff;
z-index: 2;
}
.testbox {
display: flex;
justify-content: center;
align-items: center;
height: inherit;
padding: 20px;
}
form {
width: 75%;
padding: 20px;
border-radius: 8px;
background: #fff;
box-shadow: 0 0 50px 0 #095484;
}
.banner {
position: relative;
height: 300px;
background-image: url("/New_Website/Walgreens Logo's/Walgreens New Logo/banner.png");
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.banner::after {
content: "";
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
}
input {
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 17px;
font-weight: bold;
}
input {
width: calc(100% - 10px);
padding: 5px;
}
select {
width: 100%;
padding: 3px 0;
background: transparent;
font-size: 17px;
font-weight: bold;
}
.hiddenField {
display: none;
}
table.tb {
border-collapse: collapse;
width: 650px;
}
.tb th,
.tb td {
padding: 6px;
border: solid 1px #262626;
}
.tb th,
.tb td {
color: #262626;
}
.tb th {
background-color: lightblue;
}
textarea {
white-space: pre;
text-align: left;
width: 650px;
}
span {
text-decoration: underline;
}
div.a {
text-indent: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-6">
<label for="userReqEmp">Requestor Name</label>
<input type="text" class="form-control w-100" id="userReqEmp" name="userReqEmp" placeholder="Type Here...">
</div>
<div class="col-6">
<label for="userNameEmp">Full Name</label>
<input type="text" class="form-control w-100" id="userNameEmp" name="userNameEmp" placeholder="Type Here...">
</div>
<div class="col-6">
<label for="userComEmp">Comments (Optional)</label>
<textarea type="text" class="form-control w-100" id="userComEmp" name="userComEmp" rows="7" placeholder="Type Here..."></textarea>
</div>
<div class="col-6">
<div class="row">
<label class="col-12" for="userEIDEmp">Employee ID</label>
</div>
<div class="row">
<div class="col-12">
<input type="text" class="form-control w-100" id="userEIDEmp" name="userEIDEmp" placeholder="Type Here...">
</div>
</div>
<div class="row">
<label class="col-12" for="userOIDEmp">One ID</label>
</div>
<div class="row">
<div class="col-12">
<input type="text" class="form-control w-100" id="userOIDEmp" name="userOIDEmp" placeholder="Type Here...">
</div>
</div>
<div class="row">
<label class="col-12" for="userDateEmp">Start Date</label>
</div>
<div class="row">
<div class="col-12">
<input type="date" class="form-control w-100" id="userDateEmp" name="userDateEmp" placeholder="Type Here...">
</div>
</div>
</div>
<div class="col-6">
<!-- style="visibility:hidden;" -->
<!-- acc means account -->
<!-- GM Group -->
<textarea style="visibility:hidden;" class="textarea" id="acc_GMGroup" name="acc_GMGroup" rows="2">
<u>Domain Group Access</u>
AP
FunctionManagers
Managers
<u>Distribution List</u>
Woodland Mgmt
WoodlandDCManager
InboundManagers
<u>Additional Access</u>
DCNet
AS400 (JOB-CAT-01)
VPN Non-Standard
</textarea>
</div>
<div class="col-6">
<!-- style="visibility:hidden;" -->
<!-- acc means account -->
<!-- AGM Group -->
<textarea style="visibility:hidden;" class="textarea" id="acc_AGMGroup" name="acc_AGMGroup" rows="2">
<u>Domain Group Access</u>
AP
FunctionManagers
Managers
<u>Distribution List</u>
Woodland Mgmt
WoodlandDCManager
InboundManagers
<u>Additional Access</u>
DCNet
AS400 (JOB-CAT-01)
VPN Non-Standard
</textarea>
</div>
<!-- Main Selection -->
<div class="col-6">
<div class="row">
<label class="col-12">Select Department</label>
</div>
<div class="row">
<div class="col-12">
<select id="groups" name="groups" class="form-control w-100">
<option selected value="">Select an option</option>
<option value="GM">GM</option>
<option value="AGM">AGM</option>
<option value="AP">AP</option>
<option value="IO">IO</option>
</select>
</div>
</div>
<br>
<!-- GM -->
<div class="row">
<div class="col-12" id="groups_GM" name="groups_GM" style="display: none;">
<h2>DC GM Group</h2>
<table class="tb">
<tr>
<th>Domain Group Access</th>
<!-- Title -->
</tr>
<tr>
<td>AP<br>FunctionManagers<br>Managers</td>
<!-- Content -->
</tr>
<tr>
<th>Distribution List</th>
<!-- Title -->
</tr>
<tr>
<td>Woodland Mgmt<br>WoodlandDCManager<br>InboundManagers</td>
<!-- Content -->
</tr>
<tr>
<th>Additional Access</th>
<!-- Title -->
</tr>
<tr>
<td>DCNet<br>AS400 (JOB-CAT-01)<br>VPN Non-Standard</td>
<!-- Content -->
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-12" id="groups_AGM" name="groups_AGM" style="display: none;">
<h2>DC AGM Group</h2>
<table class="tb">
<tr>
<th>Domain Group Access</th>
<!-- Title -->
</tr>
<tr>
<td>AP<br>FunctionManagers<br>Managers</td>
<!-- Content -->
</tr>
<tr>
<th>Distribution List</th>
<!-- Title -->
</tr>
<tr>
<td>Woodland Mgmt<br>WoodlandDCManager<br>InboundManagers</td>
<!-- Content -->
</tr>
<tr>
<th>Additional Access</th>
<!-- Title -->
</tr>
<tr>
<td>DCNet<br>AS400 (JOB-CAT-01)<br>VPN Non-Standard</td>
<!-- Content -->
</tr>
</table>
</div>
</div>
</div>

This will show the selector value chosen on form submit which should be useful in filtering out anything you don't want to be displayed in the email.
HTML
<form method='post'>
<select name='selector' required>
<option value=''>Select from the list...</option>
<option value='01'>First Value</option>
<option value='02'>Second Value</option>
<option value='03'>Third Value</option>
</select>
<button name='submit'>SUBMIT</button>
</form>
PHP
if (isset($_POST['submit'])) {
$selector_data = "";
$selector = $_POST['selector']; // Unprotected just to serve as working example
if ($selector == "01") {
$selector_data = " selector_data for first option chosen";
}
if ($selector == "02") {
$selector_data = " selector_data for second option chosen";
}
if ($selector == "03") {
$selector_data = " selector_data for third option chosen";
}
echo $selector.$selector_data;
}

Anomalous padding/margin during slideToggle() jquery

Does slideToggle() change padding or margins during the transition and than bringing them back to normality? Bacause i'm trying to toggle two forms, one for login and one for registration for a static html page, but during the transition something like a top margin is created between my forms and other stuff (A text to be precise) and than everything is resized back to how it is supposed to be.
First screen is with static page and no transition, the latter during the transition: https://imgur.com/a/R5pppq5
Here the code, I'm programming on Atom with live server plugin:
// Example starter JavaScript for disabling form submissions if there are invalid fields
var index_toggle = new Boolean(true);
$(document).ready(function() {
$("#toggle_home").click(function() {
$("#login").slideToggle("slow");
$("#register").slideToggle("slow");
$("#toggle_home_txt").fadeOut(function() {
if (index_toggle) {
$(this).html("↧ LOGIN").fadeIn();
} else {
$(this).html("↥ REGISTER").fadeIn();
}
index_toggle = !index_toggle;
});
});
});
#register {
display: none;
}
body.index {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 80px;
padding-bottom: 40px;
background-color: white;
color: #6c757d;
}
div.index {
padding-top: 40px;
padding-bottom: 0px;
border-radius: 3%;
width: 500px;
}
button {
border-radius: 20%;
padding-bottom: 10%;
padding-top: 0;
background-color: #e9ecef;
border-color: #6c757d;
border-style: solid;
color: #6c757d;
transition: 0.3s ease;
}
button:focus {
outline: none;
}
#send_butt {
width: 40px;
height: 40px;
}
button:hover {
background-color: #6c757d;
color: white;
}
button.toggle_home {
top: 0px;
padding-bottom: 2%;
transform: translate(0, -100%);
}
img.index {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translate(-50%, -100%);
background-color: #e9ecef;
border-color: white;
border-style: solid;
}
.form-signin {
width: 450px;
padding: 15px;
margin: auto;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="text-center index">
<div class="jumbotron index form-signin">
<img src="images/user_index.png" class="index" />
<p id="index_text" class="my-3">Please fill this form to create an account.</p>
<form id="login" novalidate>
<hr>
<div class="form-row">
<!-- Username input -->
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="LoginUsername" placeholder="Username" required>
</div>
</div>
</div>
<!-- Password input -->
<div class="form-row">
<input type="password" class="col-md-6 mb-3 form-control" id="LoginPassword" placeholder="Password" required>
<div class="text-right col-md-6 mb-3 form-check">
<input class="form-check-input" type="checkbox" id="LoginRemember">
<label class="form-check-label" for="LoginRemember">Remember me?</label>
</div>
</div>
</form>
<div id="div_toggle">
<hr>
<div class="toggle_home" style="float:left;">
<button id="toggle_home" class="toggle_home">
<div id="toggle_home_txt">
↥ REGISTER
</div>
</button>
</div>
</div>
<form id="register" class="form-signin mt-5" novalidate>
<div class="form-row">
<div class="col mb-3">
<input type="text" class="form-control" id="RegName" placeholder="First name" required>
</div>
<div class="col-md-6 mb-3">
<input type="text" class="form-control" id="RegSurname" placeholder="Surname" required>
</div>
</div>
<div class="form-row">
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="RegUsername" placeholder="Username" required>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegPassword" placeholder="Password" required>
</div>
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegConfirmPassword" placeholder="Confirm Password" required>
</div>
</div>
<hr/>
</form>
<div style="float:right;">
<button id="send_butt" class="mb-2">›</button>
</div>
</div>
</body>

For anyone looking for another solution to this issue, you can use a pseudo element with a fixed height in place of margins to stop the collapsing margins effect, e.g:
.hidden-element:before {
display: block;
width: 100%;
height: 24px; /* the top margin height you want */
content: '';
}
You can also use an :after for the bottom margin.

I believe the changing gap is a result of margin collapse.
Parent and first/last child
If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of its first child block ... then those margins collapse. The collapsed margin ends up outside the parent.
On page load, margins are collapsed between p.index_text and the <hr> inside form#login. When jQuery starts slideDown(), it adds overflow:hidden to the sliding element #form#login. This creates "clearance" between the <p> and the <hr> and the margin stops collapsing. Visually, the gap increases between the two elements.
There are various methods to prevent margin collapse. I chose padding since the other form already has some:
#login {
padding:15px;
}
Working example:
// Example starter JavaScript for disabling form submissions if there are invalid fields
var index_toggle = new Boolean(true);
$(document).ready(function() {
$("#toggle_home").click(function() {
$("#login").slideToggle("slow");
$("#register").slideToggle("slow");
$("#toggle_home_txt").fadeOut(function() {
if (index_toggle) {
$(this).html("↧ LOGIN").fadeIn();
} else {
$(this).html("↥ REGISTER").fadeIn();
}
index_toggle = !index_toggle;
});
});
});
#register {
display: none;
}
body.index {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 80px;
padding-bottom: 40px;
background-color: white;
color: #6c757d;
}
div.index {
padding-top: 40px;
padding-bottom: 0px;
border-radius: 3%;
width: 500px;
}
button {
border-radius: 20%;
background-color: #e9ecef;
border-color: #6c757d;
border-style: solid;
color: #6c757d;
transition: 0.3s ease;
}
button:focus {
outline: none;
}
#send_butt {
width: 40px;
height: 40px;
}
button:hover {
background-color: #6c757d;
color: white;
}
img.index {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translate(-50%, -100%);
background-color: #e9ecef;
border-color: white;
border-style: solid;
}
.form-signin {
width: 450px;
padding: 15px;
margin: auto;
}
#login {
padding:15px;
}
hr,
#register {
margin: 0 !important;
}
#div_toggle {
display: flex;
align-items: center;
}
#div_toggle:after {
content: "";
flex: 1 0 auto;
border-top: 1px solid #CCC;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="text-center index">
<div class="jumbotron index form-signin">
<img src="images/user_index.png" class="index" />
<p id="index_text" class="my-3">Please fill this form to create an account.</p>
<form id="login" novalidate>
<hr>
<div class="form-row">
<!-- Username input -->
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="LoginUsername" placeholder="Username" required>
</div>
</div>
</div>
<!-- Password input -->
<div class="form-row">
<input type="password" class="col-md-6 mb-3 form-control" id="LoginPassword" placeholder="Password" required>
<div class="text-right col-md-6 mb-3 form-check">
<input class="form-check-input" type="checkbox" id="LoginRemember">
<label class="form-check-label" for="LoginRemember">Remember me?</label>
</div>
</div>
</form>
<div id="div_toggle">
<button id="toggle_home" class="toggle_home">
<div id="toggle_home_txt">
↥ REGISTER
</div>
</button>
</div>
<form id="register" class="form-signin mt-5" novalidate>
<div class="form-row">
<div class="col mb-3">
<input type="text" class="form-control" id="RegName" placeholder="First name" required>
</div>
<div class="col-md-6 mb-3">
<input type="text" class="form-control" id="RegSurname" placeholder="Surname" required>
</div>
</div>
<div class="form-row">
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="RegUsername" placeholder="Username" required>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegPassword" placeholder="Password" required>
</div>
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegConfirmPassword" placeholder="Confirm Password" required>
</div>
</div>
<hr/>
</form>
<div style="float:right;">
<button id="send_butt" class="mb-2">›</button>
</div>
</div>
</body>
The animations also seem to jump and the end, but that may be a separate issue.
Edit
Further jumping seems to have been caused by margin on the second form, so I removed it. The translated button seemed to cause problems, too, so I rebuilt it. Code above was edited accordingly.

jQuery-based animations for FreeCodeCamp Project are slow and inconsistent

I'm just doing my final project for FreeCodeCamp's Front end certificate. I turned it into a fighting game, for which the button sequences initiate moves. The problem is that the animations are really buggy. Here are the details:
---Background---
-The codepen link and code are at the bottom
-When I coded it locally, everything worked great, and the player actions were were done using jquery-based animations. (I used the setTimeout(), animation(), css(), and attr() a lot to move the avatars around and switch pictures to show movement
--The problem---
-I put the code on codepen, and so I needed to host the sprite images to use them (I used dropbox). This change caused the animations to not work properly. Some of the images and sounds either load slowly or not at all. If you go to the codepen and try the buttons at the bottom you will quickly see what I mean.
---What I tried---
-I thought that maybe this might be a problem with the app taking too long to load the assets and cache them. (because some of the animations became more fluid after I repeated them) So I added a function near the top to load the photos at the beginning 'imageInit()'. But the problem persists.
Can anyone please help me figure out what is making my jquery animations so choppy and inconsistent? Am I using the wrong techniques perhaps? Please let me know if you need any more info about this. The code is below:
Thank you!
JK
The code is here: https://codepen.io/jonnnyk20/pen/XaPqrR, and here is some code form the project:
var playerSpace = $('.player-space');
var playerAvatar = $('#player-image');
var playerImages = {
"basic": "https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/goku/goku-basic.png",
"attack": "https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/goku/goku-attack.png",
"attack2": "https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/goku/goku-attack2.png",
"attack3": "https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/goku/goku-attack3.png" }
var tlp = new Audio('https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/sounds/misc/instant-transmission.mp3');
var hitSound = new Audio('https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/sounds/misc/hit.mp3');
function imageInit(obj){
for (image in obj){
$('<img/>')[0].src = console.log(obj[image]);
}
}
imageInit(miscImages);
imageInit(playerImages);
imageInit(enemyImages);
function attackAnimation(){
playerAvatar.attr("src", miscImages['blur']);
playerAvatar.fadeOut( 100, function() {
// Animation complete.
playerAvatar.fadeIn( 100, function() {
// Animation complete
playerAvatar.attr("src", playerImages['attack']);
enemyAvatar.attr("src", enemyImages['hurt']);
hitSound.play();
playerSpace.css({ left: "55%"});
setTimeout(function(){
playerAvatar.attr("src", miscImages['blur']);
playerAvatar.fadeOut( 100, function() {
playerAvatar.fadeIn( 100, function() {
playerAvatar.attr("src", playerImages['basic']);
enemyAvatar.attr("src", enemyImages['basic']);
playerSpace.css({ left: "20%"});
})
})
}, 200)
});
});
}
.container {
padding: 10px;
}
.row {
margin: 0;
}
.element {
display: inline-block;
background-color: white;
color: #0275d8;
border: solid 1px #0275d8;
border-radius: 50px;
min-width: 75px;
min-height: 75px;
text-align: center;
padding: 10px;
margin: 5px;
padding-top: 25px;
}
.progress {
margin: 5px;
}
.healthBar {
min-height: 20px;
width: 100%;
border-radius: 5px;
padding-left: 5px;
color: #023a6b;
}
.hb-label {
position: absolute;
margin-left: 5px;
font-size: small;
}
.healthBarContainer {
background-color: white;
border-radius: 5px;
margin: 5px;
border: solid 1px #3b66e6;
}
.gameInfo {
margin: 5px;
border: solid 1px gray;
padding: 5px;
/* background-color: #ececec; */
border-radius: 5px;
display: inline-block;
}
.game-screen {
background-color: #b2ebff;
border: solid 1px #0275d8;
height: 228px;
}
.game-control {
border: solid 1px #0275d8;
border-left: none;
text-align: center;
padding: 10px;
}
.button-group {
margin: auto;
}
.game-header {
border: solid 1px #0275d8;
border-bottom: none;
text-align: center;
z-index: 1;
background-color: white;
}
.game-settings {
border: solid 1px #0275d8;
border-top: none;
text-align: center;
}
.block {
margin-right: 40px;
}
.attack {
margin-bottom: -20px;
}
.dodge {
margin-top: -20px;
}
.fighter-space {
/* border: solid 1px #3b66e6; */
border-radius: 20px;
height: 100px;
width: 100px;
text-align: center;
}
.enemy-space {
position: absolute;
right: 20%;
top: 30px;
}
.player-space {
position: absolute;
left: 20%;
top: 30px;
z-index: 1;
}
.half {
float: left !important;
width: 50% !important;
z-index: 1;
}
.ki-space {
display:none;
position: absolute;
top: 30px;
left: 30%;
z-index: 1;
}
.lazer-space {
position: absolute;
top: 9px;
left: 27%;
display: none;
}
.test-actions {
margin: 10px;
}
.fighter-space.km-space {
position: absolute;
top: 25px;
left: 20%;
display:none;
z-index:1
}
.km-space {
z-index: 2
}
.fighter-space.db-space {
position: absolute;
top: -80px;
right: 20%;
display: none;
}
img#db-image {
margin-top: 40px;
}
#separate {
font-weight: bold;
margin: 10px;
font-size: large;
color: crimson
}
<div class="container">
<div class="row top-row">
<div class="col-md-12 game-header">
Title
</div>
</div>
<div class="row mid-row">
<div class="col-md-7 game-screen">
<div class="row health-bars">
<div class="col-md-6 half">
<div class="healthBarContainer">
<div class="hb-label"> Player Health: <span id="playerHealth">0</span> </div>
<div class="healthBar bg-success" id="playerHealthBar" data-p="100" >
</div>
</div>
</div>
<div class="col-md-6 half">
<div class="healthBarContainer">
<div class="hb-label"> Enemy Health: <span id="enemyHealth">0</span> </div>
<div class="healthBar bg-warning" id="enemyHealthBar" data-p="100" syle="min-width: 1em">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 fight-ring">
<div class="fighter-space player-space">
<img src="https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/goku/goku-basic.png" id="player-image" height="100" width="100">
</div>
<div id="projectlie">
<div class="fighter-space ki-space">
<img src="https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/misc/ki-blast.png" id="ki-image" height="100" width="100">
</div>
<div class="fighter-space lazer-space">
<img src="https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/misc/ki-lazer.png" id="lazer-image" height="100" width="250">
</div>
<div class="fighter-space km-space">
<img src="https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/misc/kamehameha1.png" id="km-image" height="100" width="400">
</div>
</div>
<div class="fighter-space enemy-space">
<img src="https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/frieza/frieza-basic.png" id="enemy-image" height="100" width="100">
</div>
<div class="fighter-space db-space">
<img src="https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/misc/frieza-ball.png" id="db-image" height="10" width="10">
</div>
</div>
</div>
</div>
<div class="col-md-5 game-control">
<div class="row">
<div class="button-group">
<div data-i=0 class="simon element attack">Attack</div>
</div>
</div>
<div class="row">
<div class="button-group">
<div data-i=1 class="simon element block">Block</div>
<div data-i=2 class="simon element blast">Blast</div>
</div>
</div>
<div class="button-group">
<div data-i=3 class="simon element dodge">Dodge</div>
</div>
</div>
</div>
<div class="row bottom-row">
<div class="col-md-12 game-settings">
<div class="gameInfo bg-primary" style="color: white" id="restart"> Start</div>
<div class="gameInfo"> Mode: <span id="mode">Easy</span> </div>
<div class="gameInfo"> Input Count: <span id="in-count">0</span> </div>
<div class="gameInfo"> Turn: <span id="turn">Demo</span> </div>
<div class="gameInfo" id="diff"> Change Mode</div>
</div>
<hr>
<div id="separate">--------The Buttons Below are For Testing Purposes---------</div>
<div class="col-md-12 test-actions">
<button class="btn btn-primary test-action" data-p="0" data-a="0">Attack</button>
<button class="btn btn-primary test-action" data-p="0" data-a="1">Block</button>
<button class="btn btn-primary test-action" data-p="0" data-a="2">Blast</button>
<button class="btn btn-primary test-action" data-p="0" data-a="3">Dodge</button>
<button class="btn btn-primary test-action" data-p="0" data-a="4">Finish</button>
<br>
<button class="btn btn-default test-action" data-p="1" data-a="0">E. Attack</button>
<button class="btn btn-default test-action" data-p="1" data-a="1">E. Block</button>
<button class="btn btn-default test-action" data-p="1" data-a="2">E. Blast</button>
<button class="btn btn-default test-action" data-p="1" data-a="3">E. Dodge</button>
<button class="btn btn-default test-action" data-p="1" data-a="4">E. Finish</button>
</div>
<button class="btn btn-default" id="testButton"> Test Controls</button>
</div>
enter code here
</div>

HTML - How to make drop-down list content hide on button click?

I have integrated a drop-down menu into my search-bar(using Bootstrap)
.dropdown.dropdown-lg .dropdown-menu {
margin-top: -1px;
padding: 6px 20px;
}
.input-group-btn .btn-group {
display: flex !important;
}
.btn-group .btn {
border-radius: 0;
margin-left: -1px;
}
.btn-group .btn:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.btn-group .form-horizontal .btn[type="submit"] {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.form-horizontal .form-group {
margin-left: 0;
margin-right: 0;
}
.form-group .form-control:last-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#media screen and (min-width: 1000px) {
#adv-search {
width: 1110px;
margin: 0 auto;
}
.dropdown.dropdown-lg {
position: static !important;
}
.dropdown.dropdown-lg .dropdown-menu {
min-width: 1110px;
}
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<body>
<div class="container">
<div class="row">
<div class="input-group" id="adv-search">
<input type="text" class="form-control" placeholder="Search" id="searchBar" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<button type="reset" class="btn btn-warning" id="clearAll" style="background-color:#cc0000">
<span class="glyphicon glyphicon-remove"></span>
</button>
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form" style="font-family:Calibri;font-size:16px;background-color:#F7F7F7">
<br />
<div class="form-group row">
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtRequestNo" />
</div>
<label for="ReferenceNo" class="col-xs-2 col-form-label">Reference No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtReferenceNo" />
</div>
<label for="CreatedBy" class="col-xs-2 col-form-label">Created By</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtCreatedBy" />
</div>
</div>
</form>
</div>
</div>
<button type="button" class="btn btn-primary" onclick="ReloadData()"><span class="glyphicon glyphicon-search" aria-hidden="true" onclick="ReloadData()"></span>
</button>
</div>
</div>
</div>
</div>
</div>
The textboxes in drop-down act as search filters.
Currently that drop-down menu doesn't hide unless the user clicks outside of that menu. Hence it blocks the other content.
I'm trying to achieve the following :
If I enter a particular data in the textbox and hit enter the drop-down contents should hide.
e.g. I enter 1234 as a search term insisde RequestNo. and Hit Enter the entire drop-down list should get hidden (or collapse back)
(I don't require mouse-hover to achieve this)
What additions should I do to my code to accomplish this?

You can use keycode to close dropdown on enter press
$('.dropdown-menu.dropdown-menu-right').keypress(function (e) {
if (e.keyCode == 13) {
$('.dropdown.dropdown-lg').removeClass('open');
}
});
$('.dropdown-menu.dropdown-menu-right').keypress(function(e) {
if (e.keyCode == 13) {
$('.dropdown.dropdown-lg').removeClass('open');
}
});
.dropdown.dropdown-lg .dropdown-menu {
margin-top: -1px;
padding: 6px 20px;
}
.input-group-btn .btn-group {
display: flex !important;
}
.btn-group .btn {
border-radius: 0;
margin-left: -1px;
}
.btn-group .btn:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.btn-group .form-horizontal .btn[type="submit"] {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.form-horizontal .form-group {
margin-left: 0;
margin-right: 0;
}
.form-group .form-control:last-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#media screen and (min-width: 1000px) {
#adv-search {
width: 1110px;
margin: 0 auto;
}
.dropdown.dropdown-lg {
position: static !important;
}
.dropdown.dropdown-lg .dropdown-menu {
min-width: 1110px;
}
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<body>
<div class="container">
<div class="row">
<div class="input-group" id="adv-search">
<input type="text" class="form-control" placeholder="Search" id="searchBar" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<button type="reset" class="btn btn-warning" id="clearAll" style="background-color:#cc0000">
<span class="glyphicon glyphicon-remove"></span>
</button>
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form" style="font-family:Calibri;font-size:16px;background-color:#F7F7F7">
<br />
<div class="form-group row">
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtRequestNo" />
</div>
<label for="ReferenceNo" class="col-xs-2 col-form-label">Reference No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtReferenceNo" />
</div>
<label for="CreatedBy" class="col-xs-2 col-form-label">Created By</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtCreatedBy" />
</div>
</div>
</form>
</div>
</div>
<button type="button" class="btn btn-primary" onclick="ReloadData()"><span class="glyphicon glyphicon-search" aria-hidden="true" onclick="ReloadData()"></span>
</button>
</div>
</div>
</div>
</div>
</div>