I'm trying to add a form to a page that will have a date picker. I connected the bootstrap datepicker, it works, but I have hidden it for now, if you remove display: none it will work
$(function () {
$("#datepicker").datepicker({
autoclose: true,
todayHighlight: true
}).datepicker('update', new Date());
});
label {
color: #808694;
font-family: Montserrat;
font-size: 10px;
font-weight: bold;
letter-spacing: 0;
line-height: 16px;
text-transform: uppercase;
}
input {
margin-right: 20px;
box-sizing: border-box;
outline: none;
border: none;
background-color: #F4F5F8;
width: 50px;
}
.span-wrapper {
display: flex;
align-items: flex-end;
}
span {
color: #808694;
font-family: Montserrat;
font-size: 8px;
font-weight: bold;
letter-spacing: 0;
line-height: 16px;
text-transform: uppercase;
text-align: center;
width: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<div class="contacts-call-form">
<form class="js-form" action="{{ route('send-comment') }}">
<div class="col-md-6">
<div class="call-form-item-date">
<label for="date">Select a date *</label>
<div class="input-wrapper">
<input class="js-form-month" id="month" type="text" name="month">
<input class="js-form-day" id="day" type="text" name="day">
<input class="js-form-year" id="year" type="text" name="year">
<div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy" style="display: none">
<input class="form-control" type="text" readonly />
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
<div class="span-wrapper">
<span for="month">Month</span>
<span for="day">Day</span>
<span for="year">Year</span>
</div>
</div>
</div>
</form>
</div>
What is the question, there are three fields, month, day and year. Is it possible to do something so that when you click on any of these three fields, a calendar opens, and when a date is selected, these fields are filled with the selected date?
Yes, using hooks like changeDate we can use getDate to get the selected date, then retrieve the day, month and year and insert those in the <input>:
// Initialize datepicker
const dp = $("#datepicker").datepicker({
todayHighlight: true
});
// Show datepicker on <input> click
$('.input-wrapper > input').on('click', (e) => dp.datepicker("show"));
// On date change
const y = document.getElementById('year');
const m = document.getElementById('month');
const d = document.getElementById('day');
dp.on('changeDate',function(ev){
const date = dp.datepicker('getDate');
y.value = date.getFullYear();
d.value = date.getDate();
m.value = date.getMonth() + 1;
dp.datepicker('hide')
})
label {
color: #808694;
font-family: Montserrat;
font-size: 10px;
font-weight: bold;
letter-spacing: 0;
line-height: 16px;
text-transform: uppercase;
}
input {
margin-right: 20px;
box-sizing: border-box;
outline: none;
border: none;
background-color: #F4F5F8;
width: 50px;
}
.span-wrapper {
display: flex;
align-items: flex-end;
}
span {
color: #808694;
font-family: Montserrat;
font-size: 8px;
font-weight: bold;
letter-spacing: 0;
line-height: 16px;
text-transform: uppercase;
text-align: center;
width: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<div class="contacts-call-form">
<form class="js-form" action="{{ route('send-comment') }}">
<div class="col-md-6">
<div class="call-form-item-date">
<label for="date">Select a date *</label>
<div class="input-wrapper">
<input class="js-form-month" id="month" type="text" name="month">
<input class="js-form-day" id="day" type="text" name="day">
<input class="js-form-year" id="year" type="text" name="year">
<div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy" style="display: none">
<input class="form-control" type="text" readonly />
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
<div class="span-wrapper">
<span for="month">Month</span>
<span for="day">Day</span>
<span for="year">Year</span>
</div>
</div>
</div>
</form>
</div>
I have created a snippet, which works, let me provide some basic insights:
you need to handle a click event on all the three date parts
that click event can trigger a click event on the datepicker's calendar
the datepicker's change event needs to be handled
so that the three date parts are being filled whenever needed
$(function () {
$("#datepicker").datepicker({
autoclose: true,
todayHighlight: true
}).datepicker('update', new Date());
$("#datepicker .form-control").change(function(ev) {
let parts = this.value.split("-");
if (parts.length === 3) {
document.getElementById("month").value = parts[0];
document.getElementById("day").value = parts[1];
document.getElementById("year").value = parts[2];
}
});
});
label {
color: #808694;
font-family: Montserrat;
font-size: 10px;
font-weight: bold;
letter-spacing: 0;
line-height: 16px;
text-transform: uppercase;
}
input {
margin-right: 20px;
box-sizing: border-box;
outline: none;
border: none;
background-color: #F4F5F8;
width: 50px;
}
.span-wrapper {
display: flex;
align-items: flex-end;
}
span {
color: #808694;
font-family: Montserrat;
font-size: 8px;
font-weight: bold;
letter-spacing: 0;
line-height: 16px;
text-transform: uppercase;
text-align: center;
width: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<div class="contacts-call-form">
<form class="js-form" action="{{ route('send-comment') }}">
<div class="col-md-6">
<div class="call-form-item-date">
<label for="date">Select a date *</label>
<div class="input-wrapper">
<input class="js-form-month" onclick='document.querySelector("#datepicker i").click()' id="month" type="text" name="month">
<input class="js-form-day" onclick='document.querySelector("#datepicker i").click()' id="day" type="text" name="day">
<input class="js-form-year" onclick='document.querySelector("#datepicker i").click()' id="year" type="text" name="year">
<div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy" style="display: none">
<input class="form-control" type="text" readonly />
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
<div class="span-wrapper">
<span for="month">Month</span>
<span for="day">Day</span>
<span for="year">Year</span>
</div>
</div>
</div>
</form>
</div>
Related
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');
}
I've finished making a form for my website and I've set in the action attribute of form an email where I want this form to be sent, but I never receive anything. My other problem is how can I make the form only be allowed to be sent to the email if all the inputs have been filled and if the checkbox has been ticked? Else receives an error saying you have to fill everything. My idea is to make a Q&A, a person submits their info and question and receive an email with an answer, but I'm not receiving anything and I want the form to have a certain specification to be sent. I'll leave below the HTML of the Q&A tab and only the CSS relevant to that tab. I guess this can be fixed with if statements in JS but I tried and haven't had luck.
Code
/*Everything beneath has to do with the Q&A tab*/
#Q-A-BG {
background: url('Images/Q&A-BG.jpg');
background-size: cover;
}
;
.Questions {
display: flex;
flex-direction: column;
}
.Questions h1 {
text-align: center;
padding: 30px 0px 10px 0px;
}
.Questions input[type='text'],
.Questions input[type=email],
.Questions textarea {
font-size: inherit;
padding-left: 10px;
}
.Questions input,
.Questions textarea {
width: 450px;
height: 40px;
border-radius: 3px;
border: 1px solid grey;
}
.Questions textarea {
font-family: 'Montserrat', sans-serif;
height: 100px;
}
.InputSection {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 25px;
}
.InputSection select,
.InputSection option {
width: 450px;
height: 40px;
padding: 5px;
font-size: 16px;
-webkit-appearance: none;
font-family: 'Montserrat', sans-serif;
}
.InputSection label {
align-self: start;
margin-left: 550px;
}
.InputSection a {
text-decoration: none;
color: white;
font-weight: bold;
}
.InputSection a:hover,
.InputSection a:active {
text-decoration: underline;
}
.InputSection button {
align-self: flex-start;
margin-left: 560px;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
background-color: #5995DA;
border: none;
border-radius: 3px;
padding: 10px 10px;
cursor: pointer;
}
.Checkbox input {
margin-top: 10px;
height: 15px;
width: 15px;
border-radius: 3px;
margin-left: 10px;
}
#SubmitButton:hover {
opacity: 0.8;
}
#SubmitButton:active {
opacity: 0.5;
}
.InputSection input[type='text']:invalid,
.InputSection input[type='email']:invalid,
.InputSection input[type='checkbox']:invalid {
border: 1px solid #D55C5F;
color: #D55C5F;
box-shadow: none;
}
.InputSection input[type='text']:valid,
.InputSection input[type='email']:valid {
background-color: aliceblue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<title>What's out there</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#200&display=swap" rel="stylesheet">
<style>
</style>
<link rel='stylesheet' href='../styles.css' />
</head>
<body id='Q-A-BG'>
<header class="Header Subsection">
<!-- This is the menu-->
<nav class="Header-Container">
<ul class="Menu SubsectionMenu">
<li>Home</li>
<li>Q&A</li>
<li>Images</li>
<li>Blog</li>
</ul>
</nav>
</header>
<article class="Questions">
<!--This has to do with the Information section-->
<h1> Submit your question</h1>
<form action='WOT.QuestionsAnswers#gmail.com' method='get' class='Information-Section'>
<div class="InputSection">
<label for='full-name'> First name</label>
<input id='full-name' name='full-name' type='text' placeholder="First Name" />
</div>
<div class="InputSection">
<label for='full-name'> Last name</label>
<input id='full-name' name='full-name' type='text' placeholder="Last Name" />
</div>
<div class="InputSection">
<label for='email'> Email</label>
<input id='email' name='email' type='email' placeholder='Your Email' />
</div>
<div class="InputSection">
<label for='Education'>Level of education</label>
<select id='Education' name='Education'>
<option value='None'></option>
<option value='Hs'>High School</option>
<option value='Pu'>Physics undergraduate</option>
<option value='Pg'>Physics graduate</option>
<option value='Al'>Adult with little knowledge of physics</option>
<option value='As'>Adult with some knowledge of physics</option>
<option value='Ac'>Adult with college level knowledge of physics</option>
</select>
</div>
<div class="InputSection">
<label for='abstract'> Your question</label>
<textarea id='abstract' name='abstract' placeholder="Be precise and describe your question in less than 100 words"></textarea>
</div>
<div class="InputSection">
<label class='Checkbox' for='available'>
<input id='available' name='available' type='checkbox' value='Agrees to the terms'/>
<span> I accept the Terms and Conditions</span>
</label>
</div>
<div class="InputSection">
<button id="SubmitButton">Submit</button>
</div>
</form>
</article>
</body>
</html>
Use a required in the end of your input field.
E.g.: <input id='email' name='email' type='email' placeholder='Your Email' required/>
From W3schools:
The required attribute is a boolean attribute.
When present, it specifies that an input field must be filled out
before submitting the form.
Note: The required attribute works with the following input types:
text, search, URL, tel, email, password, date pickers, number,
checkbox, radio and file.
Just put "required" in the input type tag
i.e.
<input id='full-name' name='full-name' type='text' required placeholder="First Name"/>
there is html attribute which allow you to validate if field contains something called required what you have to do is to insert it in every input you want to contain something or not be empty even the check-box like the following
<input type="text" name="" required>
or you can validate the form with JavaScript if you want to.
And what you have to do about form submission is to pass mailto before write the email thereafter write it like the following
<form method="post" action="mailto:someone#example.com">
</form>
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/
I'm doing a small project using Bootstrap. Now I come across a responsive problem, wish someone can help me out.
First and most important problem is: when this web page shown on a 21 inches screen, the layout is totally broken. I tried to adjust the 'lg-col=x', but it still doesn't work.
Similarly, when I show it on a narrow screen, the button doesn't laid nicely.
<!-- Down payment calculation -->
function downpayment() {
var pvalue = document.formval.p_value.value;
var down = Math.ceil(pvalue * 0.6);
document.formval2.field1.value = ("The down payment is " + "$" + down.toFixed(0));
}
<!-- Monthly payment calculation -->
function monthly() {
var pvalue = document.formval.p_value.value; // pick the form input value (property value)
var rate = document.formval.int_rate.value; // pick the form input value (interest rate)
var t = document.formval.period.value; // pick the form input value (tenure)
var loan = pvalue * 0.4;
var r = rate / 100 / 12; // to calculate monthly rate
var monthly = (loan * r * Math.pow((1 + r), t * 12)) / (Math.pow((1 + r), t * 12) - 1);
if (monthly.toFixed(0) == "Infinity") {
document.formval3.field2.value = ("Please complete the input");
} else if (monthly.toFixed(0) == "NaN") {
document.formval3.field2.value = ("Please complete the input");
} else {
document.formval3.field2.value = ("The monthly payment is: " + "$" + monthly.toFixed(0));
}
}
<!-- Total amount calculation -->
function total() {
var pvalue = document.formval.p_value.value; // pick the form input value (property value)
var rate = document.formval.int_rate.value; // pick the form input value (interest rate)
var t = document.formval.period.value; // pick the form input value (tenure)
var loan = pvalue * 0.4;
var r = rate / (12 * 100); // to calculate rate percentage..
var monthly = (loan * r * Math.pow((1 + r), t * 12)) / (Math.pow((1 + r), t * 12) - 1);
// to calculate compound interest..
var total = monthly * 12 * t + pvalue * 0.6 + 650;
if (total.toFixed(0) == "NaN") {
document.formval4.field3.value = ("Please complete the input");
} else {
document.formval4.field3.value = ("The total amount is: " + "$" + total.toFixed(0));
}
}
<!-- JQ effect -->
$(function() {
$("#Calculated").click(function() {
$("[name='field1']").show(1000)
})
})
$(function() {
$("#monthly-Calculate").click(function() {
$("[name='field2']").show(1000)
})
})
$(function() {
$("#sum").click(function() {
$("[name='field3']").show(1000)
})
})
$(function() {
$("#Reset").click(function() {
$("[name='field3']").slideUp(1000)
$("[name='field2']").slideUp(1000)
$("[name='field1']").slideUp(1000)
})
})
.jumbotron {
position: relative;
background: #000 url("https://s14.postimg.org/brfoy05nl/homeloan.jpg") center center;
width: 100%;
height: 230px;
background-size: contain;
overflow: hidden;
}
h2 {
padding-top: 30px;
font-size: 50px;
text-shadow: 1px 1px 2px white;
}
form {
margin-top: 35px;
margin-left: 80px;
}
body {
background-image: url(https://images.unsplash.com/photo-1473181488821-2d23949a045a?dpr=1&auto=format&fit=crop&w=767&h=511&q=80&cs=tinysrgb&crop=);
background-size: cover;
}
label {
display: initial;
font-weight: normal;
padding-right: 40px;
text-shadow: 1px 1px 1px grey;
}
.input-group {
padding-top: 10px;
}
.btn-primary {
color: #fff;
background-color: #413ba0;
border-color: black;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
color: #fff;
background-color: #775858;
}
.btn-success {
color: #fff;
background-color: #83a03b;
border-color: black;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open>.dropdown-toggle.btn-success {
color: #fff;
background-color: #775858;
}
.btn-info {
color: #fff;
background-color: #a03b97;
border-color: black;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open>.dropdown-toggle.btn-info {
color: #fff;
background-color: #775858;
}
.btn-warning {
color: #fff;
background-color: #d63e3e;
border-color: black;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open>.dropdown-toggle.btn-warning {
color: #fff;
background-color: black;
}
.btn {
font-size: 13px;
text-shadow: 1px 3px 3px black;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Anmei International</title>
<link rel="icon" href="https://www.iconexperience.com/_img/g_collection_png/standard/512x512/currency_dollar.png" />
<link href="http://pg.gaarsam.com//html/assets/bootstrap/css/bootstrap.css" media="screen" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Arimo:400i|PT+Sans" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body style="font-family: 'Montserrat Light', sans-serif;">
<div class="jumbotron text-center">
<h2 style="color:White; font-family: 'PT Sans', sans-serif; font-size: 60px;">Property Investment Calculator</h2>
</div>
<!-- Input form -->
<form name="formval" class="form-horizontal" style="font-size:20px; color: black; font-family: 'PT Sans', sans-serif; width: 50%; margin-left: 25%">
<!-- Property Value -->
<div class="form-group" style="padding-bottom: 0.5%">
<label for="input" class="control-label" style="font-weight: bold">Property Value</label>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control input-sm" id="property_value" name="p_value" placeholder="Please input property price" style="font-family: 'PT Sans', sans-serif; font-size: 16px;">
</div>
</div>
<!-- Loan Tenure -->
<div class="form-group" style="padding-bottom: 0.5%">
<label for="input" class="control-label" style="font-weight: bold">Loan Tenure</label>
<div class="input-group">
<!-- 15 years -->
<label style="color: #962121; font-weight: bold; margin-right: 5%;">15 years
<input type="radio" id="fifteen_years" name="period" value="15" style="font-family: 'PT Sans', sans-serif; font-size: 16px; margin-left: 3%;" onclick="getValue(this)" required="">
</label>
<!-- 30 years -->
<label style="color: #962121; font-weight: bold;">30 years
<input type="radio" id="thirty_years" name="period" value="30" style="font-family: 'PT Sans', sans-serif; font-size: 16px; margin-left: 3%;" onclick="getValue(this)">
</label>
</div>
</div>
<!-- APR -->
<div class="form-group" style="padding-bottom: 0.5%">
<label for="input" class="control-label" style="font-weight: bold">Annual Percentage Rate</label>
<div class="input-group">
<input type="text" class="form-control input-sm" id="idROI" name="int_rate" style="font-family: 'PT Sans', sans-serif; font-size: 16px;">
<span class="input-group-addon">%</span>
</div>
</div>
<!-- button -->
<div class="form-group">
<!-- Downpayment -->
<button type="button" id="Calculated" name="calculate" value="downpayment" onclick="downpayment()" class="btn btn-primary col-lg-3 col-md-10 col-sm-10" style="margin-right: 2%; padding: 5px;">Calculate down payment</button>
<!-- Monthly payment -->
<button type="button" id="monthly-Calculate" name="calculate" value="monthly" onclick="monthly()" class="btn btn-success col-lg-3 col-md-10 col-sm-10" style="margin-right: 2%; padding: 5px;">Calculate monthly payment</button>
<!-- Total -->
<button type="button" id="sum" name="calculate" value="toal" onclick="total()" class="btn btn-info col-lg-3 col-md-10 col-sm-10" style="margin-right: 12%; padding: 5px;">Calculate total amount</button>
<!-- Reset -->
<button type="reset" id="Reset" class="btn btn-warning col-lg-1 col-md-10 col-sm-10" style="padding: 5px;">Reset</button>
</div>
</form>
< <!-- Output form -->
<!-- Down payment output -->
<form name="formval2" class="form-horizontal col-lg-3 col-md-10 col-sm-10">
<div class="form-group">
<output name="field1" style="display:none; font-size:20px; padding:10px; text-align: center; font-family: 'Arimo', sans-serif; color: black; background-color: white; border-radius: 25px; text-shadow: 1px 1px 1px grey;"></output>
</div>
</form>
<!-- Monthly payment output -->
<form name="formval3" class="form-horizontal col-lg-3 col-md-10 col-sm-10">
<div class="form-group">
<output name="field2" style="display:none; font-size:20px; padding:10px; text-align: center; font-family: 'Arimo', sans-serif; color: black; background-color: white; border-radius: 25px; text-shadow: 1px 1px 1px grey;"></output>
</div>
</form>
<!-- Total amount output -->
<form name="formval4" class="form-horizontal col-lg-3 col-md-10 col-sm-10">
<div class="form-group">
<output name="field3" style="display:none; font-size:20px; padding:10px; text-align: center; font-family: 'Arimo', sans-serif; color: black; background-color: white; border-radius: 25px; text-shadow: 1px 1px 1px grey;"></output>
</div>
</form>
<script type="text/javascript" src="http://pg.gaarsam.com//html/assets/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://pg.gaarsam.com//html/assets/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://pg.gaarsam.com//html/assets/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="english.js"></script>
</body>
</html>
As I said in the comment, I'm not 100% sure of what you are calling broken.
You can upload an image to imgur, then embed the link in your post.
As for your button issue I'm not sure what you are referring to, but one thing to try is to wrap your col classes in a parent .row div
This question already has answers here:
Best way to track onchange as-you-type in input type="text"?
(16 answers)
Closed 8 years ago.
I am trying to detach if input text box is changed (user has stopped typing) using javascript so that I can validate the form and show the error message if required. I know it can be done using jQuery but I wish to do it in pure javascript.
http://jsfiddle.net/xstqLkz4/2/
The above link demonstrate it using jQuery
I don't have much code. I am not sure from where to start.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript validate</title>
<link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
<script src="domready.js"></script>
<script>
DomReady.ready(function() {
(function () {
var Username = document.getElementById("Username");
var Password = document.getElementById("Password");
var DOB = document.getElementById("DOB");
var Email = document.getElementById("Email");
var Country = document.getElementById("Country");
if (Username.length <= 5){
alert("Less then 5");
}
})();
});
</script>
<style>
body{
font-family: 'Lato', sans-serif;
position: absolute;
}
label{
font-size: 1.2em;
margin-right: 5px;
}
input[type='text'], input[type='password']{
border: none;
padding: 7px;
background-color: rgba(242, 240, 240, 1);
font-family: 'Lato', sans-serif;
font-size: 0.85em;
font-weight: 100;
}
input[type='password'], input[type='text'], input[type='submit']{
margin-top: 18px;
}
input[type='password']{
margin-left: 32px;
}
input[type='submit']{
padding: 10px 119px;
background-color: #F2F0F0;
border: medium none;
font-family: "Lato",sans-serif;
margin-top: 24px;
font-size: 1.4em;
font-weight: 500;
}
#wrp{
width: 800px;
position: relative;
left: 438px;
top: 32px;
}
#Username{
margin-left: 25px;
}
#DOB{
margin-left: 3px;
}
#Email{
margin-left: 70px;
}
#Country{
margin-left: 43px;
}
.errortxt{
color: rgba(206, 145, 145, 1);
}
.error{
background-color: rgba(242, 228, 228, 1);
}
</style>
</head>
<body>
<div id="wrp">
<form action="">
<div>
<label for="Username">Username</label>
<input type="text" id="Username">
</div>
<div>
<label for="Password">Password</label>
<input type="password" id="Password">
</div>
<div>
<label for="DOB">Date of birth</label>
<input type="text" id="DOB">
</div>
<div>
<label for="Gender">Gender</label>
<div>
<label for="Male">Male</label>
<input type="radio">
<label for="Female">Female</label>
<input type="radio">
</div>
</div>
<div>
<label for="Email">Email</label>
<input type="text" id="Email">
</div>
<div>
<label for="Country">Country</label>
<input type="text" id="Country">
</div>
<div>
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
The jsFiddle seems pretty straight forward (although, the timing might be a bit short).
This code ...
$("#input").on("input" ...
... seems to indicate that it is being run on a single <input> tag. You might want to shift this to a class and perform the validation where the alert() fires.