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;
}

How to print or get the cell value from HTML TABLE(User Input) in html and javascript

I'm trying to grab the cell values from an HTML table so that I can display them into a table.
How do I grab the cell's value so that I can pass it to the table cells My JavaScript code below show a page not found?
Code:
function getValues() {
let item = itemName;
if (item == null)
alert("Please you need to fill all fields to continue");
else
alert("success")
//Data collection
var itemName = document.getElementsByName("itemName")[0].value;
var itemQty = document.getElementsByName("itemQty")[0].value;
var itemPrice = document.getElementsByName("itemPrice")[0].value;
var itemAmt = itemPrice * itemQty;
var itemDate = document.getElementsByName("itemDate")[0].value;
var total = "Your total amount of items bought is " + " " + "#" + itemAmt;
//data display
document.getElementById("tag").innerHTML = total;
document.getElementById("itemName").innerHTML = (itemName);
document.getElementById("itemQty").innerHTML = (itemQty);
document.getElementById("itemPrice").innerHTML = (itemPrice);
document.getElementById("itemAmt").innerHTML = (itemAmt);
document.getElementById("itemDate").innerHTML = (itemDate);
//conditional statement for empty field
// if ( itemAmt === true){
alert(total)
// }else{
// alert("Please you need to fill all fields to continue")
//}
}
body {
background: #fff;
}
.tag {
background: #ccc;
width: 100%;
height: 150px;
font-size: 20px;
transform: uppercase;
margin-top: 30px;
padding-top: 30px;
position: absolute;
justify-space: in-between;
}
#item {
width: 19.35%;
height: auto;
background: pink;
float: left;
text-align: center;
font-size: 10px;
border: 1px solid black;
}
.item {
width: 19.35%;
height: auto;
background: pink;
float: left;
text-align: center;
font-size: 10px;
border: 1px solid black;
.frame {
width: 90%;
height: 200px;
background: grey;
padding: 10px;
border-radius: 3px;
overflow-y: auto;
float: left;
position: relative;
color: #231ccb;
}
<div class="frame">
<p><label> Item:<input type="text" name="itemName" placeholder="item" required> </label></p>
<br>
<p><label> Quantity:<input type="text" name="itemQty" required> </label></p>
<br>
<p><label> Price :<input type="number" name="itemPrice" required> </label></p>
<!--<br>
<p><label> Amount: <input type="number" name="itemAmt" placeholder="#" required> </label></p>-->
<br>
<p><label> Date :<input type="Date" name="itemDate" required> </label></p>
</div>
<br>
<button onclick="getValues()"> Add Item </button>
</form>
<!--Table Header-->
<div class="tag">
<div id="item">Item Name</div>
<div id="item">Quantity</div>
<div id="item">Price</div>
<div id="item">Amount</div>
<div id="item">Date</div>
<!--Display item variable-->
<div class="item">
<p id="itemName"></p>
</div>
<div class="item">
<p id="itemQty"> </p>
</div>
<div class="item">
<p id="itemPrice"></p>
</div>
<div class="item">
<p id="itemAmt"> </p>
</div>
<div class="item">
<p id="itemDate"></p>
</div>
<br>
<br>
<br>
<p id="tag"> Hello world</p>
</div>

You can use the exclamation mark (!) symbol, called a bang, which is the logical NOT operator.
Below is the demo code, you can take reference from here.
! will help us to find if any input is empty or null or undefined.
const btn = document.querySelector("#add-items");
btn.addEventListener("click", addItems);
function addItems() {
let itemName = document.querySelector("#item-name").value;
let itemQnt = document.querySelector("#item-quantity").value;
if(!itemName) alert("Please provide item name.");
else if(!itemQnt) alert("Please provide item quantity.");
else alert("Success");
}
<label for="item-name"> Item Name:
<input type="text" placeholder="Item Name" id="item-name" />
</label>
<br><br>
<label for="item-quantity"> Item Quantity:
<input type="number" placeholder="Item Quantity" id="item-quantity" />
</label>
<br><br>
<button type="button" id="add-items">Add Item</button>
Now, coming to your code, a few of these needs to be changed in your code.
You are checking for itemName for null, even before its value is been ready by your code.
Thus, every time even with correct data, your if condition will be evaluated, the corresponding alert will be triggered.
You need to put everything which is related to the calculation of total price and the display code, inside your else condition after the if condition fails to evaluate to true.
function getValues() {
var itemName = document.getElementsByName("itemName")[0].value;
var itemQty = document.getElementsByName("itemQty")[0].value;
var itemPrice = document.getElementsByName("itemPrice")[0].value;
var itemDate = document.getElementsByName("itemDate")[0].value;
if (!itemName || !itemQty || !itemPrice || !itemDate) {
alert("Please you need to fill all fields to continue");
} else {
alert("success")
var itemAmt = itemPrice * itemQty;
var total = "Your total amount of items bought is " + " " + "#" + itemAmt;
//data display
document.getElementById("tag").innerHTML = total;
document.getElementById("itemName").innerHTML = (itemName);
document.getElementById("itemQty").innerHTML = (itemQty);
document.getElementById("itemPrice").innerHTML = (itemPrice);
document.getElementById("itemAmt").innerHTML = (itemAmt);
document.getElementById("itemDate").innerHTML = (itemDate);
alert(total)
}
}
}
body {
background: #fff;
}
.tag {
background: #ccc;
width: 100%;
height: 150px;
font-size: 20px;
transform: uppercase;
margin-top: 30px;
padding-top: 30px;
position: absolute;
justify-space: in-between;
}
#item {
width: 19.35%;
height: auto;
background: pink;
float: left;
text-align: center;
font-size: 10px;
border: 1px solid black;
}
.item {
width: 19.35%;
height: auto;
background: pink;
float: left;
text-align: center;
font-size: 10px;
border: 1px solid black;
.frame {
width: 90%;
height: 200px;
background: grey;
padding: 10px;
border-radius: 3px;
overflow-y: auto;
float: left;
position: relative;
color: #231ccb;
}
<div class="frame">
<p><label> Item:<input type="text" name="itemName" placeholder="item" required> </label></p>
<br>
<p><label> Quantity:<input type="text" name="itemQty" required> </label></p>
<br>
<p><label> Price :<input type="number" name="itemPrice" required> </label></p>
<br>
<p><label> Date :<input type="Date" name="itemDate" required> </label></p>
</div>
<br>
<button onclick="getValues()"> Add Item </button>
</form>
<!--Table Header-->
<div class="tag">
<div id="item">Item Name</div>
<div id="item">Quantity</div>
<div id="item">Price</div>
<div id="item">Amount</div>
<div id="item">Date</div>
<!--Display item variable-->
<div class="item">
<p id="itemName"></p>
</div>
<div class="item">
<p id="itemQty"> </p>
</div>
<div class="item">
<p id="itemPrice"></p>
</div>
<div class="item">
<p id="itemAmt"> </p>
</div>
<div class="item">
<p id="itemDate"></p>
</div>
<br>
<br>
<br>
<p id="tag"> Hello world</p>
</div>

Hiding a Html div with a selector and JavaScript not working so well

I have two divs with forms in them and I want to be able to have a selector and switch between the two. Whitch I have, and it kind of works. If you go to my JSFiddle and switch between the divs a few times you will see what I'm talking about.
here's my JSFiddle: https://urlzs.com/fN6YY
$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else{
$(".box").hide();
}
});
}).change();
});
.input_style {
width: 100%;
padding: 12px 20px;
box-sizing: border-box;
border-radius: 10px;
border-color: #000000;
border-style: solid;
background-color: #FFFFFF;
margin: 10px 0;
}
.myform {
width: 720px;
background-color: #ffff4d;
border-radius: 20px;
padding: 20px;
position: relative;
left: 60px;
top: 40px;
align: center;
}
.text {
font-family: "Goudy Old Style", serif;
font-size: 125%;
font-weight: 550;
display: inline;
margin: 15px;
}
.center {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div style="position: relative">
<div class="container blue box" style="padding: 0; margin: 0;">
<form class="myform" method="post">
<h1 class="center">Square Root</h1>
<p style="display: inline;" class="text">Select:</p>
<select class="input_style">
<option value="blue">Square Root</option>
<option value="red">Exponents</option>
</select>
<p style="display: inline;" class="text">Square Root:</p>
<input class="input_style" type="text" placeholder="Enter the
Number" name="number_1">
<input class="input_style submit" type="submit"
value="Calculate" name="square_root">
</form>
</div>
<div class="container red box" style="padding: 0; margin: 0;">
<form class="myform" method="post">
<h1 class="center">Exponents Calculator</h1>
<p style="display: inline;" class="text">Select:</p>
<select class="input_style">
<option value="red">Exponents</option>
<option value="blue">Square Root</option>
</select>
<p style="display: inline;" class="text">Number:</p>
<input class="input_style" type="text" placeholder="Enter the
Number" name="number_2">
<p style="display: inline;" class="text">Exponent:</p>
<input class="input_style" type="text" placeholder="Enter the
Exponent" name="exponent">
<input class="input_style submit" type="submit"
value="Calculate" name="exponent">
</form>
</div>
</div>
I would like it to switch between the different divs seamlessly.
Thanks A Lot!

you should set the dropdown value also when you switch.
$('select').val(optionValue);
updated Jsfiddle: https://jsfiddle.net/5Lyn4dro/
$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else{
$(".box").hide();
}
$('select').val(optionValue);
});
}).change();
});
.input_style {
width: 100%;
padding: 12px 20px;
box-sizing: border-box;
border-radius: 10px;
border-color: #000000;
border-style: solid;
background-color: #FFFFFF;
margin: 10px 0;
}
.myform {
width: 720px;
background-color: #ffff4d;
border-radius: 20px;
padding: 20px;
position: relative;
left: 60px;
top: 40px;
align: center;
}
.text {
font-family: "Goudy Old Style", serif;
font-size: 125%;
font-weight: 550;
display: inline;
margin: 15px;
}
.center {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="position: relative">
<div class="container blue box" style="padding: 0; margin: 0;">
<form class="myform" method="post">
<h1 class="center">Square Root</h1>
<p style="display: inline;" class="text">Select:</p>
<select class="input_style">
<option value="blue">Square Root</option>
<option value="red">Exponents</option>
</select>
<p style="display: inline;" class="text">Square Root:</p>
<input class="input_style" type="text" placeholder="Enter the Number" name="number_1">
<input class="input_style submit" type="submit" value="Calculate" name="square_root">
</form>
</div>
<div class="container red box" style="padding: 0; margin: 0;">
<form class="myform" method="post">
<h1 class="center">Exponents Calculator</h1>
<p style="display: inline;" class="text">Select:</p>
<select class="input_style">
<option value="blue">Square Root</option>
<option value="red">Exponents</option>
</select>
<p style="display: inline;" class="text">Number:</p>
<input class="input_style" type="text" placeholder="Enter the Number" name="number_2">
<p style="display: inline;" class="text">Exponent:</p>
<input class="input_style" type="text" placeholder="Enter the Exponent" name="exponent">
<input class="input_style submit" type="submit" value="Calculate" name="exponent">
</form>
</div>
</div>

You could use CSS animations to obtain a seamless transition.
When the corresponding selector is selected , change the display property of the div.
Example:
display:block /*When div is needed*/
display:none /*When div is not needed*/
You could further use the CSS transition property to add the desired timings.
Another option would be to use custom CSS animations using the #keyframes property.
Using this will also enable you to have a animation timing function.
If you want to use Javascript as well , this article might help you :
https://css-tricks.com/controlling-css-animations-transitions-javascript/

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.