JQuery div.show() is resizing my fields

JQuery div.show() is resizing my fields - javascript

I have a hide div that when I click on a checkbox, that div shows. My problem is that when the div shows the height of input fields are too small.
My div:
<div id="payment" style="display: none;">
<div class="form-group">
<label class="col-lg-2 col-xs-offset-2">Credit Card</label>
<div class="col-lg-2" id="sq-card-number"></div>
</div>
<div class="form-group">
<label class="col-lg-2 col-xs-offset-2">CVV</label>
<div class="col-lg-1" id="sq-cvv"></div>
</div>
<div class="form-group">
<label class="col-lg-2 col-xs-offset-2">Expiration Date</label>
<div class="col-lg-1" id="sq-expiration-date"></div>
</div>
<div class="form-group">
<label class="col-lg-2 col-xs-offset-2">Postal Code</label>
<div class="col-lg-1" id="sq-postal-code"></div>
<input type="hidden" id="card-nonce" name="nonce">
</div>
<div class="form-group">
<br />
<br />
<div class="col-xs-12 col-xs-offset-1">
<button id="applyApplication" name="applyApplication" type="button" onClick="submitApplication();" class="btn btn-success center-block" disabled>Submit Application</button>
<br />
<br />
</div>
</div>
</div>
The CSS for the input fields:
<style type="text/css">
.sq-input {
border: 1px solid #CCCCCC;
margin-bottom: 10px;
padding: 1px;
}
.sq-input--focus {
outline-width: 5px;
outline-color: #70ACE9;
outline-offset: -1px;
outline-style: auto;
}
.sq-input--error {
outline-width: 5px;
outline-color: #FF9393;
outline-offset: 0px;
outline-style: auto;
}
</style>
And I control to display that div or not by JQuery:
$('#agree').change(function() {
if($(this).is(":checked")) {
$("#payment").show();
$("#payment").scrollTop($("#payment").prop("scrollHeight"));
} else{
$("#payment").hide();
}
});
Here is the div that there is my checkbox:
<div class="form-group">
<div class="col-xs-12 col-xs-offset-2">
<div class="checkbox">
<label>
<input type="checkbox" id="agree" name="agree" value="agree" /> Agree with the terms and conditions
</label>
</div>
<br />
<br />
</div>
</div>
Everything is working fine. When my checkbox is checked it display the div, but the input fields are with height very small. BTW, if I open the firebug, the input height adjust automatically. Does anyone know why?
Thanks

Try to fix the height in your css :
.sq-input {
border: 1px solid #CCCCCC;
margin-bottom: 10px;
padding: 1px;
height: 20px;
}
Here is a Fiddle exemple : https://jsfiddle.net/qboena51/

Related

Function changing id only once. [Javascript]

What I am trying to do: I am adding new entries whenever I submit a form and that entry should have an animation (fadeIn effect). I am adding new entries whenever I submit a form. Every entry is being added using javascript template literal in which I am adding using divisions with classes and ids. Every entry has an Id and when I use that ID to add animation, all entries get the animation as they have same ids (I know IDs should not be same that is why I am trying to change it).
What I am trying to do: I am trying to change ID of previously added entry or div.
Program is changing ID only once.
My javascript code:
var enrolledStudents = [];
let form = document.getElementById("student-enrollment-form");
const getStudentDetails = (event) => {
event.preventDefault();
// This is the important part, test if form is valid
if (form.checkValidity() === false){
// This is the magic function that displays the validation errors to the user
form.reportValidity();
return;
}
var skillsList = [];
var name = document.getElementById("name-input").value;
var email = document.getElementById("email-input").value;
var website = document.getElementById("website-input").value;
var imgLink = document.getElementById("imglink-input").value;
var gender = document.querySelector('input[name="genderRadio"]:checked').value;
var skills = document.querySelectorAll('input[type="checkbox"]');
skills.forEach(item => {
if (item.checked){
skillsList.push(item.value);
}
})
var student = {
'name': name,
'email': email,
'website': website,
'imageLink' : imgLink,
'gender': gender,
'skills': skillsList,
}
enrolledStudents.push(student)
console.log(enrolledStudents);
const studentList = document.getElementById('student-list');
studentList.innerHTML = `${
enrolledStudents.map(student => {
var passport = student.imgLink;
return `
<div class="row" id="student-id-details" style="border: 2px solid black; border-top: none; height: 120px;">
<div class="col" style="padding-top: 10px; padding-bottom: 5px; height: 100px;">
<h6 class="card-title">${student.name}</h6>
<p class="card-text">${student.gender}<br />${student.email}<br />${student.website}<br />${student.skills}</p>
</div>
</div>
`;
}).join("")
}`
const studentImages = document.getElementById("student-images");
console.log(enrolledStudents)
studentImages.innerHTML = `${
enrolledStudents.map(student => {
return `
<div class="row" id="student-id-image" style="border: 2px solid black; border-top: none; border-left: none; height: 120px">
<div class="col" style="padding-top: 10px; padding-bottom: 6px; height: 120px; align-items: centre;">
<img src=${student.imageLink}></img>
</div>
</div>
`
}).join("")
}`
setTimeout(changeIds, 3000);
}
const changeIds = () => {
var oldId = document.getElementById("student-id-details");
oldId.id = "no-animation";
console.log(document.querySelectorAll("#student-id-details"));
console.log(document.querySelectorAll("#no-animation"));
}
I cannot use any library or framework for doing this task.
In changeIds function, I am changing the ID. When I keep adding new entries there is only 1 node in no-animation NodeList (the first entry) and after that no ID change is taking effect.
What can be the problem here?
My html code for reference -
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Student Enrollment</title>
<link href="style.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<nav class="navbar text-center" style="background-color: #59CE8F;">
<div class="container-fluid text-center">
<span class="navbar-brand mb-0 h1 text-center" style="color: white;">Student Enrollment Form</span>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col" style="height: 35px;"></div>
</div>
<div class="row">
<div class="col" style="border-right: 3px solid #59CE8F;">
<form id="student-enrollment-form">
<div class="row mb-3">
<label for="name-input" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="name-input"/>
</div>
</div>
<div class="row mb-3">
<label for="email-input" class="col-sm-2 col-form-label">E-Mail</label>
<div class="col-sm-5">
<input type="email" class="form-control" id="email-input" required/>
</div>
</div>
<div class="row mb-3">
<label for="website-input" class="col-sm-2 col-form-label">Website</label>
<div class="col-sm-5">
<input type="url" class="form-control" id="website-input" required/>
</div>
</div>
<div class="row mb-3">
<label for="imglink-input" class="col-sm-2 col-form-label">Img Link</label>
<div class="col-sm-5">
<input type="url" class="form-control" id="imglink-input" required/>
</div>
</div>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">Gender</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="genderRadio" id="gridRadios1" value="male" id="male-input" checked>
<label class="form-check-label" for="gridRadios1">
Male
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="genderRadio" id="gridRadios2" value="female" id="female-input">
<label class="form-check-label" for="gridRadios2">
Female
</label>
</div>
</div>
</fieldset>
<div class="row mb-3">
<label for="skills" class="col-sm-2 col-form-control">Skills</label>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="java-gridCheck" value="Java">
<label class="form-check-label" for="gridCheck">
JAVA
</label>
</div>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="html-gridCheck" value="HTML">
<label class="form-check-label" for="gridCheck">
HTML
</label>
</div>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="css-gridCheck" value="CSS">
<label class="form-check-label" for="gridCheck">
CSS
</label>
</div>
</div>
<div class="row mb-3">
<div class="col-4">
<button type="button" class="btn btn-primary" onclick="getStudentDetails(event)">Enroll Student</button>
</div>
<div class="col-2" style="margin-left: -30px;">
<button type="clear" class="btn btn-danger">Clear</button>
</div>
</div>
</div>
</form>
<div class="col" id="student-ids">
<h3 id="right-col-header">Enrolled Students</h3>
<div class="row mb-4"></div>
<div class="row">
<div class="col-2"></div>
<div class="col-5" style="text-align: left;">
<div class="row" style="border: 2px solid black;">
<div class="col">
Description
</div>
</div>
<div class="student-list-division" id="student-list">
</div>
</div>
<div class="col-3" style="align-items: centre;">
<div class="row" style="border: 2px solid black; border-left: none;">
<div class="col">
Image
</div>
</div>
<div class="student-list-images" id="student-images">
</div>
</div>
<div class="col-2"></div>
</div>
</div>
</div>
</div>
<script src="script_js.js"></script>
</body>
</html>
My css code for animation -
#right-col-header{
text-align: center;
}
ul{
padding-left: 0;
list-style-type: none;
}
p{
font-size: 13px;
}
img{
height: 6em;
width: 6em;
}
#student-ids{
height: 90%;
overflow-x: auto;
}
#student-id-image{
animation: fadeIn 2s;
-webkit-animation: fadeIn 2s;
}
#keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#student-id-details{
animation: fadeIn 2s;
-webkit-animation: fadeIn 2s;
}
I would appreciate different solutions for achieving animations in new entries only too.

You have to apply fade-in-animation class to new entry, current logic apply animation class to all list.
I just update your code with minor changes, i hope it'll help you out. Thank You
var enrolledStudents = [];
let form = document.getElementById("student-enrollment-form");
const getStudentDetails = (event) => {
event.preventDefault();
// This is the important part, test if form is valid
if (form.checkValidity() === false){
// This is the magic function that displays the validation errors to the user
form.reportValidity();
return;
}
var skillsList = [];
var name = document.getElementById("name-input").value;
var email = document.getElementById("email-input").value;
var website = document.getElementById("website-input").value;
var imgLink = document.getElementById("imglink-input").value;
var gender = document.querySelector('input[name="genderRadio"]:checked').value;
var skills = document.querySelectorAll('input[type="checkbox"]');
skills.forEach(item => {
if (item.checked){
skillsList.push(item.value);
}
})
var student = {
'name': name,
'email': email,
'website': website,
'imageLink' : imgLink,
'gender': gender,
'skills': skillsList,
}
enrolledStudents.push(student)
console.log(enrolledStudents);
const studentList = document.getElementById('student-list');
studentList.innerHTML = `${
enrolledStudents.map((student, index) => {
var passport = student.imgLink;
return `
<div class="row ${enrolledStudents.length === (index + 1) ? 'fade-in-animation' : ''}" style="border: 2px solid black; border-top: none; height: 120px;">
<div class="col" style="padding-top: 10px; padding-bottom: 5px; height: 100px;">
<h6 class="card-title">${student.name}</h6>
<p class="card-text">${student.gender}<br />${student.email}<br />${student.website}<br />${student.skills} ${index}</p>
</div>
</div>
`;
}).join("")
}`
const studentImages = document.getElementById("student-images");
console.log(enrolledStudents)
studentImages.innerHTML = `${
enrolledStudents.map((student, index) => {
return `
<div class="row ${enrolledStudents.length === (index + 1) ? 'fade-in-animation' : ''}" style="border: 2px solid black; border-top: none; border-left: none; height: 120px">
<div class="col" style="padding-top: 10px; padding-bottom: 6px; height: 120px; align-items: centre;">
<img src=${student.imageLink}></img>
</div>
</div>
`
}).join("")
}`
}
#right-col-header{
text-align: center;
}
ul{
padding-left: 0;
list-style-type: none;
}
p{
font-size: 13px;
}
img{
height: 6em;
width: 6em;
}
#student-ids{
height: 90%;
overflow-x: auto;
}
#keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.fade-in-animation{
animation: fadeIn 2s;
-webkit-animation: fadeIn 2s;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Student Enrollment</title>
<link href="style.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<nav class="navbar text-center" style="background-color: #59CE8F;">
<div class="container-fluid text-center">
<span class="navbar-brand mb-0 h1 text-center" style="color: white;">Student Enrollment Form</span>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col" style="height: 35px;"></div>
</div>
<div class="row">
<div class="col" style="border-right: 3px solid #59CE8F;">
<form id="student-enrollment-form">
<div class="row mb-3">
<label for="name-input" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="name-input"/>
</div>
</div>
<div class="row mb-3">
<label for="email-input" class="col-sm-2 col-form-label">E-Mail</label>
<div class="col-sm-5">
<input type="email" class="form-control" id="email-input" required/>
</div>
</div>
<div class="row mb-3">
<label for="website-input" class="col-sm-2 col-form-label">Website</label>
<div class="col-sm-5">
<input type="url" class="form-control" id="website-input" required/>
</div>
</div>
<div class="row mb-3">
<label for="imglink-input" class="col-sm-2 col-form-label">Img Link</label>
<div class="col-sm-5">
<input type="url" class="form-control" id="imglink-input" required/>
</div>
</div>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">Gender</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="genderRadio" id="gridRadios1" value="male" id="male-input" checked>
<label class="form-check-label" for="gridRadios1">
Male
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="genderRadio" id="gridRadios2" value="female" id="female-input">
<label class="form-check-label" for="gridRadios2">
Female
</label>
</div>
</div>
</fieldset>
<div class="row mb-3">
<label for="skills" class="col-sm-2 col-form-control">Skills</label>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="java-gridCheck" value="Java">
<label class="form-check-label" for="gridCheck">
JAVA
</label>
</div>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="html-gridCheck" value="HTML">
<label class="form-check-label" for="gridCheck">
HTML
</label>
</div>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="css-gridCheck" value="CSS">
<label class="form-check-label" for="gridCheck">
CSS
</label>
</div>
</div>
<div class="row mb-3">
<div class="col-4">
<button type="button" class="btn btn-primary" onclick="getStudentDetails(event)">Enroll Student</button>
</div>
<div class="col-2" style="margin-left: -30px;">
<button type="clear" class="btn btn-danger">Clear</button>
</div>
</div>
</div>
</form>
<div class="col" id="student-ids">
<h3 id="right-col-header">Enrolled Students</h3>
<div class="row mb-4"></div>
<div class="row">
<div class="col-2"></div>
<div class="col-5" style="text-align: left;">
<div class="row" style="border: 2px solid black;">
<div class="col">
Description
</div>
</div>
<div class="student-list-division" id="student-list">
</div>
</div>
<div class="col-3" style="align-items: centre;">
<div class="row" style="border: 2px solid black; border-left: none;">
<div class="col">
Image
</div>
</div>
<div class="student-list-images" id="student-images">
</div>
</div>
<div class="col-2"></div>
</div>
</div>
</div>
</div>
</body>
</html>

Show/Hide elements (form) on link click - Submit form via ajax

I'm trying to sow and hide a form with jquery. This is being done through a link...
I want to hide all links with data-action="edit" but just show the form next to the link, as I've got some more boxes on this site.
I just want to show the form of the first box (on which the link is clicked)
Also I need the id of the div with the class "box box-primary" in which the a (data-action="save") is.
$(document).ready(function() {
$('a[data-action=edit').on('click', function() {
$('div .box-tools').addClass('hide');
$(this).next('div .spinner').removeClass('hide');
$(this).next('dl.view-data').addClass('hide');
$(this).next('form.form-data').removeClass('hide');
});
$('a[data-action=cancel').on('click', function() {
$('div .box-tools').removeClass('hide');
$('div .spinner').first().addClass('hide');
$('dl.view-data').first().removeClass('hide');
$('form.form-data').first().addClass('hide');
});
$('a[data-action=save').on('click', function() {
alert($(this).closest('form.form-data').serialize());
});
});
.box.box-primary {
border-top-color: #00acd6;
}
.box {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
border-top: 3px solid #dddddd;
}
.box {
position: relative;
background: #ffffff;
border-top: 2px solid #c1c1c1;
margin-bottom: 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 100%;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}
.hide {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<div class="box box-primary" id="basic-info">
<div class="box-header">
<h3 class="box-title">Info</h3>
<div class="box-tools block-action permanent pull-right">
<a href="javascript:void(0)" class="btn btn-default" data-action="edit">
EDIT
</a>
</div>
</div>
<div class="box-body">
<div class="text-center">
<div class="small spinner hide">
<div>Loading…</div>
</div>
</div>
<dl class="dl-horizontal view-data">
<dt>Vorname</dt>
<dd>Test</dd>
<dt>Nachname</dt>
<dd>Test</dd>
</dl>
<form class="form-horizontal form-data hide" role="form">
<input type="hidden" name="_token" value="kY4Xjk1GcbLSVYVEwkpy92xeE9ugvPRftPfLVTZF">
<div class="form-group">
<label for="first_name" class="col-sm-3 control-label">Vorname</label>
<div class="col-sm-8">
<input type="text" value="Test" name="first_name" class="form-control" id="first_name" placeholder="Vorname">
</div>
</div>
<div class="form-group">
<label for="last_name" class="col-sm-3 control-label">Nachname</label>
<div class="col-sm-8">
<input type="text" value="Test" name="last_name" class="form-control" id="last_name" placeholder="Nachname">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-8">
Speichern
Zurück
</div>
</div>
</form>
</div>
</div>
<div class="box box-primary" id="basic-info2">
<div class="box-header">
<h3 class="box-title">Info</h3>
<div class="box-tools block-action permanent pull-right">
<a href="javascript:void(0)" class="btn btn-default" data-action="edit">
EDIT
</a>
</div>
</div>
<div class="box-body">
<div class="text-center">
<div class="small spinner hide">
<div>Loading…</div>
</div>
</div>
<dl class="dl-horizontal view-data">
<dt>Vorname</dt>
<dd>Test</dd>
<dt>Nachname</dt>
<dd>Test</dd>
</dl>
<form class="form-horizontal form-data hide" role="form">
<input type="hidden" name="_token" value="kY4Xjk1GcbLSVYVEwkpy92xeE9ugvPRftPfLVTZF">
<div class="form-group">
<label for="first_name" class="col-sm-3 control-label">Vorname</label>
<div class="col-sm-8">
<input type="text" value="Test" name="first_name" class="form-control" id="first_name" placeholder="Vorname">
</div>
</div>
<div class="form-group">
<label for="last_name" class="col-sm-3 control-label">Nachname</label>
<div class="col-sm-8">
<input type="text" value="Test" name="last_name" class="form-control" id="last_name" placeholder="Nachname">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-8">
Speichern
Zurück
</div>
</div>
</form>
</div>
</div>

You need to read up on what .next() works,
but here is a working example of your code:
$(document).ready(function() {
$('a[data-action=edit').on('click', function() {
$(this).closest(".box-primary").find('dl.view-data, .box-tools').addClass('hide');
$(this).closest(".box-primary").find('.spinner, form.form-data').removeClass('hide');
});
$('a[data-action=cancel').on('click', function() {
$(this).closest(".box-primary").find('.box-tools, dl.view-data').removeClass('hide');
$(this).closest(".box-primary").find('.spinner, form.form-data').addClass('hide');
});
$('a[data-action=save').on('click', function() {
alert($(this).closest('form.form-data').serialize());
});
});
Example your edit button don't have a $(this).next('div .spinner') because if you look at your html, you a dont have any siblings, so next() don't work here.
Demo
$(document).ready(function() {
$('a[data-action=edit').on('click', function() {
$(this).closest(".box-primary").find('dl.view-data, .box-tools').addClass('hide');
$(this).closest(".box-primary").find('.spinner, form.form-data').removeClass('hide');
});
$('a[data-action=cancel').on('click', function() {
$(this).closest(".box-primary").find('.box-tools, dl.view-data').removeClass('hide');
$(this).closest(".box-primary").find('.spinner, form.form-data').addClass('hide');
});
$('a[data-action=save').on('click', function() {
alert($(this).closest('form.form-data').serialize());
});
});
.box.box-primary {
border-top-color: #00acd6;
}
.box {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
border-top: 3px solid #dddddd;
}
.box {
position: relative;
background: #ffffff;
border-top: 2px solid #c1c1c1;
margin-bottom: 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 100%;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}
.hide {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<div class="box box-primary" id="basic-info">
<div class="box-header">
<h3 class="box-title">Info</h3>
<div class="box-tools block-action permanent pull-right">
<a href="javascript:void(0)" class="btn btn-default" data-action="edit">
EDIT
</a>
</div>
</div>
<div class="box-body">
<div class="text-center">
<div class="small spinner hide">
<div>Loading…</div>
</div>
</div>
<dl class="dl-horizontal view-data">
<dt>Vorname</dt>
<dd>Test</dd>
<dt>Nachname</dt>
<dd>Test</dd>
</dl>
<form class="form-horizontal form-data hide" role="form">
<input type="hidden" name="_token" value="kY4Xjk1GcbLSVYVEwkpy92xeE9ugvPRftPfLVTZF">
<div class="form-group">
<label for="first_name" class="col-sm-3 control-label">Vorname</label>
<div class="col-sm-8">
<input type="text" value="Test" name="first_name" class="form-control" id="first_name" placeholder="Vorname">
</div>
</div>
<div class="form-group">
<label for="last_name" class="col-sm-3 control-label">Nachname</label>
<div class="col-sm-8">
<input type="text" value="Test" name="last_name" class="form-control" id="last_name" placeholder="Nachname">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-8">
Speichern
Zurück
</div>
</div>
</form>
</div>
</div>
<div class="box box-primary" id="basic-info2">
<div class="box-header">
<h3 class="box-title">Info</h3>
<div class="box-tools block-action permanent pull-right">
<a href="javascript:void(0)" class="btn btn-default" data-action="edit">
EDIT
</a>
</div>
</div>
<div class="box-body">
<div class="text-center">
<div class="small spinner hide">
<div>Loading…</div>
</div>
</div>
<dl class="dl-horizontal view-data">
<dt>Vorname</dt>
<dd>Test</dd>
<dt>Nachname</dt>
<dd>Test</dd>
</dl>
<form class="form-horizontal form-data hide" role="form">
<input type="hidden" name="_token" value="kY4Xjk1GcbLSVYVEwkpy92xeE9ugvPRftPfLVTZF">
<div class="form-group">
<label for="first_name" class="col-sm-3 control-label">Vorname</label>
<div class="col-sm-8">
<input type="text" value="Test" name="first_name" class="form-control" id="first_name" placeholder="Vorname">
</div>
</div>
<div class="form-group">
<label for="last_name" class="col-sm-3 control-label">Nachname</label>
<div class="col-sm-8">
<input type="text" value="Test" name="last_name" class="form-control" id="last_name" placeholder="Nachname">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-8">
Speichern
Zurück
</div>
</div>
</form>
</div>
</div>

highlight image when clicked on then check a radio button

You know those sites that have an image as a checkbox and which ever image is checked gets highlighted? I'm trying to do the same, but instead with a radio button and I can't seem to get it to work. Here's my code:
html
<div class="well">
<div class="row">
<div class="col-lg-4">
<label class="image-radio">
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<input type="radio" name="style" value="option1" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
<div class="col-lg-4">
<label class="image-radio">
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<input type="radio" name="style" value="option2" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
<div class="col-lg-4">
<label class="image-radio">
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<input type="radio" name="style" value="option3" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
</div>
</div>
css
.image-radio {
cursor:pointer;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:4px solid transparent;
outline:0;
}
.image-radio input[type="radio"] {
display:none;
}
.image-radio-checked {
border-color:#f58723;
}
input[type=radio] {
display:none;
}
.item-detail .item-price {
font-weight:bold;
color:#201E20;
padding-bottom:10px;
}
JavaScript
jQuery(function ($) {
// init the state from the input
$(".image-radio").each(function () {
if ($(this).find('input[type="radio"]').first().attr("checked")) {
$(this).addClass('image-radio-checked');
}
else {
$(this).removeClass('image-radio-checked');
}
});
// sync the state to the input
$(".image-radio").on("click", function (e) {
if ($(this).hasClass('image-radio-checked')) {
$(this).removeClass('image-radio-checked');
$(this).find('input[type="radio"]').first().removeAttr("checked");
}
else {
$(this).addClass('image-radio-checked');
$(this).find('input[type="radio"]').first().attr("checked", "checked");
}
e.preventDefault();
});
});
jsfiddle: https://jsfiddle.net/dwc6gf4q/5/

Do you have to use the radio buttons? If not, just keep the state in the script like you already do. When you click an image change the state to active and check the other images for being active. If one is, set it to inactive.
Then, if you need the radio buttons, you can change their state with the same function.
EDIT: Fiddled a little: https://jsfiddle.net/dwc6gf4q/41/
As far as i understood, works like you wanted.
jQuery(function ($) {
// init the state from the input
// sync the state to the input
$(".image-radio").on("click", function (e) {
$(".image-radio-checked").each(function(i){
$(this).removeClass("image-radio-checked");
});
$(this).toggleClass("image-radio-checked");
e.preventDefault();
});
});
.image-radio {
cursor:pointer;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:4px solid transparent;
outline:0;
}
.image-radio input[type="radio"] {
display:none;
}
.image-radio-checked {
border: 4px solid #f58723;
}
input[type=radio] {
display:none;
}
.item-detail .item-price {
font-weight:bold;
color:#201E20;
padding-bottom:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="well">
<div class="row">
<div class="col-lg-4">
<label class="image-radio">
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<input type="radio" name="style" value="option1" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
<div class="col-lg-4">
<label class="image-radio">
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<input type="radio" name="style" value="option2" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
<div class="col-lg-4">
<label class="image-radio">
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<input type="radio" name="style" value="option3" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
</div>
</div>

It seems to be working to me. You had some js errors because you weren't adding jquery to the fiddle...try here: https://jsfiddle.net/dwc6gf4q/6/
added jquery to fiddle

We can also do this using CSS just need to put IMG code after the radio button.
.image-radio {
cursor:pointer;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:4px solid transparent;
outline:0;
}
.image-radio input[type="radio"] {
visibility:hidden;
}
.image-radio img {display:none;}
.image-radio input[type="radio"]:checked ~ img {display:block;}
.image-radio-checked {
border-color:#f58723;
}
input[type=radio] {
display:none;
}
.item-detail .item-price {
font-weight:bold;
color:#201E20;
padding-bottom:10px;
}
<div class="well">
<div class="row">
<div class="col-lg-4">
<label class="image-radio">
<input type="radio" name="style" value="option1" />
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
<div class="col-lg-4">
<label class="image-radio">
<input type="radio" name="style" value="option2" />
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
<div class="col-lg-4">
<label class="image-radio">
<input type="radio" name="style" value="option3" />
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
</div>
</div>

Bootstrap - Reducing spacing between form-controls like textbox and label

I'm developing the a .NET(C#) MVC web-application.
I have the following bootstrap drop-down menu.
I'm trying to achieve the following two things :
1) I'm trying to reduce the spacing between a label and it's respective text-box. I tried using "col-xs-1 col-form-label" instead of "col-xs-2 col-form-label" but then the textbox overlapped the label.
2) I want to reduce the height of the textbox.
How can I achieve these?
here's my cshtml code :
<div class="container">
<div class="row">
<div class="input-group" id="adv-search">
<input type="text" class="form-control" placeholder="Search" id="searchBar" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary" onclick="ReloadData()"><span class="glyphicon glyphicon-search" aria-hidden="true" onclick="ReloadData()"></span></button>
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" title="Click To Expand"></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form" style="font-family:Calibri;font:94% 'v', sans-sarif;background-color:#FAFAFA">
<br />
<div class="form-group row">
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtChopRequestNo" onKeyDown="if (event.keyCode == 13) ReloadData()" />
</div>
<label for="ReferenceNo" class="col-xs-2 col-form-label">Reference No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtReferenceNo" onKeyDown="if (event.keyCode == 13) ReloadData()" />
</div>
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtCreatedBy" />
#*#Html.TextBox("name",null, new { id = "txtCreatedBy", style = "width:156px;" })*#
</div>
</div>
<div class="form-group row">
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtChopper" onKeyDown="if (event.keyCode == 13) ReloadData()" />
</div>
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtManager" onKeyDown="if (event.keyCode == 13) ReloadData()" />
</div>
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtLeagalApprover" onKeyDown="if (event.keyCode == 13) ReloadData()" />
</div>
</div>
//and so on
</form>
</div>
</div>
<button type="reset" class="btn btn-warning" id="clearAll" style="background-color:#cc0000" data-toggle="tooltip" title="Clear All Search Parameters">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
</div>
</div>
</div>
And here's my CSS code :
.dropdown.dropdown-lg .dropdown-menu {
margin-top: -1px;
padding: 6px 20px;
}
.input-group-btn .btn-group {
display: flex !important;
}
.btn-group .btn {
border-radius: 0;
margin-left: -1px;
}
.btn-group .btn:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.btn-group .form-horizontal .btn[type="submit"] {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.form-horizontal .form-group {
margin-left: 0;
margin-right: 0;
}
.form-group .form-control:last-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#media screen and (min-width: 1000px) {
#adv-search {
width: 1110px;
margin: 0 auto;
}
.dropdown.dropdown-lg {
position: static !important;
}
.dropdown.dropdown-lg .dropdown-menu {
min-width: 1110px;
}
}

I'm trying to reduce the spacing between a label and it's respective text-box.
Give your texboxes a css class (pull-left or whatever you want to call it) and then use css to pull the textboxes to the left.
.pull-left {
margin-left: -20px; /* Try with different values until you are happy */
}
I want to reduce the height of the textbox.
Try using padding and line-height and play with the numbers until you are happy with the height:
input[type="text"]{ padding: 20px 10px; line-height: 28px; }
The above will apply 20px to top and bottom and 10px to left and right. Here are some other ways:
padding: 20px 10px 20px 10px; /*top right bottom left*/
Finally make sure these margins play well when you are changing the size of the screen. If it looks good on big screen, it may not look good on smaller screens so choose something which will look good across all screens.

Save a page as a pdf and upload to server

I have web forms that I have my staff fill out for various purposes that I would like to save the completed form itself and turn it into a PDF, which I can then upload to my database and store for reference.
For example, here is a form that I would like to be able to save as a pdf after the user has inputted the fields:
http://jsfiddle.net/davellan/e7msc41a/
HTML
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 rcshadow">
<div class="row">
<div class="rcpage">
<div class="row">
<h1>Add New Contact</h1>
<hr>
</div>
<div class="row">
<div class="panel panel-primary">
<div class="panel-heading">Contact Information:</div>
<div class="panel-body">
<form role="form" id="newprofile" name="newprofile" style="display:inline" action="" method="post">
<input type="hidden" name="Update" value="true" />
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label for="FirstName">First Name:</label>
<input required class="form-control" type="text" id="FirstName" name="FirstName" value="">
</div>
<div class="form-group">
<label for="MiddleName">Middle Name:</label>
<input class="form-control" type="text" id="MiddleName" name="MiddleName" value="">
</div>
<div class="form-group">
<label for="LastName">Last Name:</label>
<input required class="form-control" type="text" id="LastName" name="LastName" value="">
</div>
<div class="form-group">
<label for="Email">Email:</label>
<input class="form-control" type="email" id="Email" name="Email" value="">
</div>
<div class="form-group">
<label for="Phone1">Home Phone:</label>
<input class="form-control" type="tel" id="Phone1" name="Phone1" value="">
</div>
<div class="form-group">
<label for="Phone2">Cell Phone:</label>
<input class="form-control" type="tel" id="Phone2" name="Phone2" value="">
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="StreetAddress1">Address 1:</label>
<input class="form-control" type="text" id="StreetAddress1" name="StreetAddress1" value="">
</div>
<div class="form-group">
<label for="StreetAddress2">Address 2:</label>
<input class="form-control" type="text" id="StreetAddress2" name="StreetAddress2" value="">
</div>
<div class="form-group">
<label for="City">City:</label>
<input class="form-control" type="text" id="City" name="City" value="">
</div>
<div class="form-group">
<label for="State">State:</label>
<input class="form-control" type="text" id="State" name="State" value="">
</div>
<div class="form-group">
<label for="PostalCode">Zip Code:</label>
<input class="form-control" type="text" id="PostalCode" name="PostalCode" value="">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="form-group">
<label for="LeadType">Select Lead Type:</label>
<select required class="form-control" id="LeadType" name="LeadType" value="options">
<option value="">Lead Type</option>
<option value="14587">Adult MMA</option>
<option value="14589">Kids MMA</option>
<option value="14591">Bootcamp</option>
<option value="8673">Shooting Club</option>
</select>
</div>
<div class="form-group">
<input class="btn btn-primary center-block" id="ProfileButton" name="ProfileButton" type="submit" value="Add New Profile">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
CSS
/* START
** Div and container setup */
/* Set a max-width for horizontal fluid layout and make it centered */
.container-fluid {
margin-right: auto;
margin-left: auto;
max-width: 970px;
}
/* Make background highlightable */
.highlightable:hover {
background-color:#e7e7e7;
}
/* Spacer */
.spacer {
padding:10px;
}
/* Padding */
.padding10 {
padding:10px;
}
/* Shadow for Page Outline */
.rcshadow {
-moz-box-shadow: 0px 0px 30px 10px #000;
-webkit-box-shadow: 0px 0px 30px 10px #000;
-khtml-box-shadow: 0px 0px 30px 10px #000;
box-shadow: 0px 0px 30px 10px #000;
-moz-border-radius: 0px 0px 15px 15px;
border-radius: 0px 0px 15px 15px;
}
/* Page Outline */
.rcpage {
background-color:#FFF;
padding:10px 30px 20px;
margin-left:auto;
margin-right:auto;
-moz-border-radius: 0px 0px 15px 15px;
border-radius: 0px 0px 15px 15px;
}
/* Body */
body {
margin:0;
padding:0;
font-size:100%;
font-family:verdana, arial, 'sans serif';
background-color:#3b607e;
color:#000000;
}
tr.clickable-row {
cursor: pointer;
}
/* END
** Div and container setup */
/* START
** Typography */
h1 {
font-size:2em;
color:#739CBF;
font-weight:bold;
text-shadow: #000 1px 1px 2px;
text-align:center;
}
h2 {
font-size:1.4em;
color:#3b607e;
font-weight:bold;
}
h3 {
font-size:1.4em;
color:red;
font-weight:bold;
}
h4 {
font-size:1.4em;
color:#000;
font-weight:bold;
}
/* Used for search text */
.smalltext {
font-size:xx-small;
color:#ABABAB;
}
.error {
color:red;
font-weight:bold;
}
/* text for footer that goes against background */
.bgtext {
color: silver;
}
/* Form Error Code */
input.error {
background: red;
color: white;
}
/* Form Error Code */
label.error {
color: red;
}
/* END
** Typography */
The resources that I have searched around all seem to be very old projects from 2007 to 2011.
The workflow that would be ideal is as follows:
1. User fills out a webform
2. Upon submitting webform, the page is rendered into a pdf
3. The pdf is then uploaded to my database
What would be the best way of accomplishing this using php or javascript?

As Dagon pointed out below there is a PHP class called TCPDF (which has a link in the comment) that should work for you.
Anther option is FPDF, which is also a PHP class that lets you make PDF files. This seemed to work for a similar question Best way to create a PDF with PHP. They have even have a tutorial page. Warning: This option has been updated recently.

We Keep Coding

JavaScript is the programming language of the Web.

JQuery div.show() is resizing my fields - javascript

Try to fix the height in your css : .sq-input { border: 1px solid #CCCCCC; margin-bottom: 10px; padding: 1px; height: 20px; } Here is a Fiddle exemple : https://jsfiddle.net/qboena51/

Related

Function changing id only once. [Javascript]

Show/Hide elements (form) on link click - Submit form via ajax

highlight image when clicked on then check a radio button

Bootstrap - Reducing spacing between form-controls like textbox and label

Save a page as a pdf and upload to server

Categories

Resources