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
Related
I am creating a simple bug tracker that uses a modal to pop up different bugs. The problem I have is that when I delete a bug, there is a thin grey box where the background of the modal was. So basically the list of bugs is empty but it shows the background of the modal even when it should not be there. For example , if you load up the files and open with live server; create a new bug, then delete the bug, you will see the grey box where the bug was just at. I am trying to have the background not be there, when there is no bugs in the list. Any help is greatly appreciated.
I have tried changing the opacity of the modal and issuesList as well as background color, but tbh I am completely lost on how to dynamically change the opacity.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous">
<script src="https://kit.fontawesome.com/4582c8b826.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/css/styles.css">
<title>Issue Tracker</title>
</head>
<body>
<div class="contaienr">
<h1>Issue Tracker</h1>
<div class="jumbotron">
<h3>Add New Issue:</h3>
<form id="issueinputform">
<div class="form-group">
<label for="issueDescription">Description</label>
<input type="text" class="form-control" id="issueDescription" placeholder="Describe the issue ...">
</div>
<div class="form-group">
<label for="issueSeverity">Severity</label>
<select class="form-control" id="issueSeverity">
<option value="Low">Low</option>
<option value="Medium">Medium</option>
<option value="High">High</option>
</select>
</div>
<div class="form-group">
<label for="issueAssignedTo">Assigned To</label>
<input type="text" class="form-control" id="issueAssignedTo" placeholder="Enter responsible ...">
</div>
<button id="add-issue" onclick="submitIssue()" class="btn btn-primary">Add</button>
</form>
</div>
<div class="col-lg-12">
<div id="issuesList">
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="emptyField" tabindex="-1" role="dialog" aria-labelledby="emptyFieldLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="emptyFieldLabel">Invalid Input!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Please provide the desciption of the issue and also the person name who you want to assign the issue.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
app.js
function submitIssue(e) {
const getInputValue = id => document.getElementById(id).value;
const description = getInputValue('issueDescription');
const severity = getInputValue('issueSeverity');
const assignedTo = getInputValue('issueAssignedTo');
const id = Math.floor(Math.random() * 100000000) + '';
const status = 'Open';
if ((description.length == 0) || (assignedTo.length == 0)) {
alert("Please fill all fields with required data.");
document.getElementById('add-issue').setAttribute("data-toggle", "modal");
document.getElementById('add-issue').setAttribute("data-target", "#emptyField")
}
else {
document.getElementById('add-issue').removeAttribute("data-toggle", "modal");
document.getElementById('add-issue').removeAttribute("data-target", "#emptyField")
const issue = { id, description, severity, assignedTo, status };
let issues = [];
if (localStorage.getItem('issues')) {
issues = JSON.parse(localStorage.getItem('issues'));
}
issues.push(issue);
localStorage.setItem('issues', JSON.stringify(issues));
fetchIssues();
}
}
const closeIssue = id => {
const issues = JSON.parse(localStorage.getItem('issues'));
const currentIssue = issues.find(issue => issue.id == id);
currentIssue.status = 'Closed';
currentIssue.description = `<strike>${currentIssue.description}</strike>`
localStorage.setItem('issues', JSON.stringify(issues));
fetchIssues();
}
const deleteIssue = id => {
const issues = JSON.parse(localStorage.getItem('issues'));
const remainingIssues = issues.filter(issue => ((issue.id) != id))
localStorage.removeItem('issues');
localStorage.setItem('issues', JSON.stringify(remainingIssues));
fetchIssues();
}
const fetchIssues = () => {
const issues = JSON.parse(localStorage.getItem('issues'));
const issuesList = document.getElementById('issuesList');
issuesList.innerHTML = '';
for (let i = 0; i < issues.length; i++) {
const { id, description, severity, assignedTo, status } = issues[i];
issuesList.innerHTML += `<div class="well">
<h6>Issue ID: ${id} </h6>
<p><span class="label label-info"> ${status} </span></p>
<h3> ${description} </h3>
<p><i class="fa-solid fa-bolt"></i> ${severity}</p>
<p><i class="fa-solid fa-user"></i> ${assignedTo}</p>
<button onclick="closeIssue(${id})" class="btn btn-warning">Close</button>
<button onclick="deleteIssue(${id})" class="btn btn-danger">Delete</button>
</div>`;
}
}
fetchIssues();
styles.css
*{
box-sizing: border-box;
}
.jumbotron{
background: rgb(225, 224, 224);
margin-top: 20px;
margin-left: 150px;
margin-right: 150px;
padding-left: 60px;
padding-right: 60px;
padding-top: 50px;
padding-bottom: 50px;
border-radius: 6px;
}
.container{
}
p{
margin: 0 0 10px;
}
h1{
font-size: 36px;
margin-top: 20px;
margin-bottom: 10px;
margin-left: 150px;
}
/* .col-lg-12{
display: block;
font-size: 14px;
line-height: 1.42857143;
color: #333;
} */
#issuesList{
padding-top: 40px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
display: block;
margin-left: 170px;
margin-right: 170px;
margin-top: 40px;
margin-bottom: 20px;
background-color: rgb(233, 233, 233);
border-radius: 6px;
border: solid grey transparent ;
border-width: thin;
}
h6{
font-size: 12px;
font-family: inherit;
margin-bottom: 10px;
}
h3{
margin-bottom: 10px;
margin-top: 30px;
font-weight: 500;
line-height: 1.1;
}
.label{
background-color: #5bc0de;
border: solid rgb(10, 198, 240);
border-radius: 0.25em;
padding: 3px;
color: white;
line-height: 1;
font-weight: 700;
font-size: 75%;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
#add-issue{
margin-top: 20px;
}
.container::after{
clear: both
}
.modal
{
opacity:0.5 !important;
}
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'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>
I am attempting to create a form that outputs the entered data when "submit" is clicked to a textarea.
Currently I can get it to submit to the area below the form but am unsure how to have multiple ID's in a single textarea.
<html>
<head>
<script>
function showInput() {
document.getElementById('display').innerHTML =
document.getElementById("user_input").value;
document.getElementById('name').innerHTML =
document.getElementById("user_name").value;
document.getElementById('stepsTaken').innerHTML =
document.getElementById("user_stepsTaken").value.replace(/(?:\r\n|\r|\n)/g, '<br />');
document.getElementById('theDate').innerHTML =
document.getElementById("user_theDate").value.replace(/(?:\r\n|\r|\n)/g, '<br />');
}
</script>
</head>
<body>
<script type="text/javaScript">
function Qreplace(e) {
var textfield = document.getElementById(e);
var regex = /#test/gi;
textfield.value = textfield.value.replace(regex, "1. test\n2. test");
var regex = /#report/gi;
textfield.value = textfield.value.replace(regex, "1. report\n2. report");
}
</script>
<form action="javascript:void(0);">
<p>
<label><b>Enter a Message</b></label><p>
<input type="text" id="user_input" required><p>
<label><b>Enter a name</b></label><p>
<input type="text" id="user_name" required><p>
<textarea id="user_stepsTaken" onkeyup="Qreplace('user_stepsTaken')" placeholder="Actions taken and notes..." style="height: 91px; max-height: 350px;" required></textarea>
<label for="sme">TL/SME Assist*</label>
<br>
Yes <input required="" type="radio" onclick="javascript:smeCheck();" value="Yes" name="TL/SME" id="yesCheck">
No <input type="radio" onclick="javascript:smeCheck();" value="No" name="TL/SME" id="noCheck"><br>
<div id="ifyes" style="display:none">
<input type="text" id="smeAssist" name="smeAssist" placeholder="Name or Initials of the TL/SME that provided assistance">
<!-- Hide/Show SME additonal options based on radio check box -->
<script type="text/javascript">
function smeCheck() {
if (document.getElementById('yesCheck').checked) {
document.getElementById('ifyes').style.display = 'block';
} else document.getElementById('ifyes').style.display = 'none';
}
</script>
</div>
<div style="display:block; margin-left: 0px;">
<label for="dateStarted">Issue Started*</label>
<input type="date" id="user_theDate" name="theDate" class="select">
</div>
<input type="submit" onclick="showInput();"><br/>
</form>
<label>Your input: </label>
<p><span id='display'></span></p>
<p><span id='name'></span></p>
<div id='stepsTaken'></div>
<div id='theDate'></div>
</body>
</html>
Thank you for any help I am quite unfamiliar with Javascript.
So the end result I am trying to accomplish is have the user input to output into a textarea with the following formatting below.
Message: Message here
Name: Name here
Info: Actions Taken
Date: 2018-12-13
you should keep return false; in function showInput() as form get submitted and there will be nothing to show
or make input type="button" instead of type="submit"
I found a solution to the issue using Jquery as follows
$('#summary').click(function() {
var name = $('#clientName').val()
var message = $('#errorMessage').val()
var ret = "Name: "+name+" \n\rMessage: " + message;
console.log(ret)
$(".output-container").fadeIn();
$("#output").text(ret);
})
$("#copyForm").click(function(){
$("#output").select();
document.execCommand('copy');
$(".success").fadeIn();
});
body {font-family: Helvetica;background-color: #1E365E;}
* {box-sizing: border-box;}
input[type=text], select, textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #1E365E;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=button] {
background-color: #1E365E;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=radio] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=date] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit]:hover {
background-color: #1E365E;
}
input[type=button]:hover {
background-color: #1E365E;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin: 5%;
}
.output-container {
display: none;
margin-top: 50px;
}
#output {
height: 300px;
}
.success {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class="container">
<h2>Testing Copy</h2>
<form id="myForm" action="/action_page.php">
<label for="cName">Client Name*</label>
<input type="text" id="clientName" name="cName" placeholder="Client Name...">
<label for="errorMessage">Error Message</label>
<input type="text" id="errorMessage" name="errorMessage" placeholder="Any error messages?">
</form>
<button id="summary">View Summary</button>
<div class="output-container">
<textarea id="output">
<h2>Form Content</h2>
</textarea>
<button id="copyForm">Copy Summary</button>
</div><!-- #end output-container -->
<p class="success"><strong>Form successfully copied</strong></p>
</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.