Save a page as a pdf and upload to server - javascript

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.

Related

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>

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.

How to change the font color of both label and input onfocus of an inputbox and change it back on blur

I have attached a plunker link for what ive did
http://plnkr.co/edit/JlARpFiVEFryAhgxgWJm?p=preview
input[attribute=flag]:focus {
color: red;
}
input[attribute=flag]{
color: green;
}
<form name="Form" class="form-horizontal " style="padding-left:9%;">
<div class="form-group">
<div class="col-sm-11 ">
<label for="inputEmail" class="control-label" >Email</label><br>
<input type="email" attribute=flag class="form-control inputBorderStyle box" id="usernameLogin" name="username" required="">
</div>
</div>
<div class="form-group">
<div class="col-sm-11 "><br>
<label for="inputPassword" class="control-label">Password</label><br>
<input type="password" attribute=flag class="form-control inputBorderStyle box" id="usernamePassword" name="password" required="">
</div>
</div>
<div class="form-group last">
<div class="col-sm-11"><br>
<button type="submit" id="loginButton" class="btn btn-myprimary">LOG IN</button>
</div>
</div>
</form>
Onfocus of input i want to change the color of both label and input.
Right now im able to chnage the color of input but how to change label color onfocus and change it back to other color on blur.If anyone has idea please suggest.
Thanks in advance
Try with focusin and focusout effect.
Jsfiddle
$(document).ready(function() {
$("input").on("focusin", function() {
$(this).siblings("label").css("color","red");
$(this).css("color","red");
});
$("input").on("focusout", function() {
$(this).siblings("label").css("color","green");
$(this).css("color","green");
})
})
Try this code:
$(function(){
$('input[type=email], input[type=password]').focus(function(){
$(this).closest('div').find('label').css({color:'red'})
});
$('input[type=email], input[type=password]').blur(function(){
$(this).closest('div').find('label').css({color:'#000'})
});
});
/* Styles go here */
.inputBorderStyle{
border:0;
box-shadow:none !important;
border-bottom:1px solid black;
border-radius:0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
input[attribute=flag]:focus {
color: red;
}
input[attribute=flag]{
color: green;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script src="script.js"></script>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<form name="Form" class="form-horizontal " style="padding-left:9%;">
<div class="form-group">
<div class="col-sm-11 ">
<label for="inputEmail" class="control-label" >Email</label><br>
<input type="email" attribute=flag class="form-control inputBorderStyle box" id="usernameLogin" name="username" required="">
</div>
</div>
<div class="form-group">
<div class="col-sm-11 "><br>
<label for="inputPassword" class="control-label">Password</label><br>
<input type="password" attribute=flag class="form-control inputBorderStyle box" id="usernamePassword" name="password" required="">
</div>
</div>
<div class="form-group last">
<div class="col-sm-11"><br>
<button type="submit" id="loginButton" class="btn btn-myprimary">LOG IN</button>
</div>
</div>
</form>
</body>
</html>
</body>
</html>
The focus and blurevents allow you to bind corresponding events when an HTML element receives focus and is out of focus.
You can add onfocus and onblur event on the inputs (without jQuery)
var userField = document.getElementById("usernameLogin");
userField.addEventListener("focus",function(){
this.parent.getElementsByTagName("label")[0].style.color = 'red';
});
userField.addEventListener("blur",function(){
this.parent.getElementsByTagName("label")[0].style.color = 'green';
});
Use jquery, to attach event focus to the input and the label after that add class to input and to the the label and detach the class on blur
$("input").on("focus",function(){
$(this).addClass("focusclass")
$(this).closest(".col-md-11").first().addClass("Labelfocusclass")
}
$("input").on("blur",function(){
$(this).removeClass("focusclass")
$(this).closest(".col-md-11").first().removeClass("Labelfocusclass")
}
JavaScript Solution:
Use onfocus and onblur events like this:
function changeColor(obj) {
document.getElementById(obj).style.color = "red";
}
function removeColor(obj) {
document.getElementById(obj).style.color = "black";
}
/* Styles go here */
.inputBorderStyle {
border: 0;
box-shadow: none !important;
border-bottom: 1px solid black;
border-radius: 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
input[attribute=flag]:focus {
color: red;
}
input[attribute=flag] {
color: green;
}
<form name="Form" class="form-horizontal " style="padding-left:9%;">
<div class="form-group">
<div class="col-sm-11 "><br>
<label for="inputEmail" class="control-label" id="email">Email</label><br>
<input type="email" attribute=flag class="form-control inputBorderStyle box" id="usernameLogin" name="username" required="" onfocus="changeColor('email')" onblur="removeColor('email')">
</div>
</div>
<div class="form-group">
<div class="col-sm-11 "><br>
<label for="inputPassword" class="control-label" id="password">Password</label><br>
<input type="password" attribute=flag class="form-control inputBorderStyle box" id="usernamePassword" name="password" required="" onfocus="changeColor('password')" onblur="removeColor('password')">
</div>
</div>
<div class="form-group last">
<div class="col-sm-11"><br>
<button type="submit" id="loginButton" class="btn btn-myprimary">LOG IN</button>
</div>
</div>
</form>
check my fiddle mate and let me know i have done this using jquery
https://jsfiddle.net/estvwpvz/5/
var divs = document.getElementsByClassName('inputBorderStyle');
for(var i = 0; i < divs.length; i++)
{
document.getElementsByClassName('inputBorderStyle')[i].addEventListener("focusin", myFunction);
document.getElementsByClassName('inputBorderStyle')[i].addEventListener("focusout", myFunctionout);
}
function myFunction() {
this.style.color= "red";
this.parentElement.getElementsByTagName("label")[0].style.color = 'red';
}
function myFunctionout() {
this.style.color= "white";
this.parentElement.getElementsByTagName("label")[0].style.color = 'black';
}

JQuery div.show() is resizing my fields

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/

Javascript search box not appearing in Domtab

Here's my website: http://library.bennington.edu. We use domtabs to organize our search boxes. We're switching cataloging software, so I'm trying to replace the catalog search box with a new search box from Ebsco Discovery Services (EDS). EDS provides their own code, so I didn't have to write anything, should just be cut and paste. But when I drop the new code in, nothing appears at all, just a total blank space. If I place the code BELOW the domtabs box, it works fine. It just blanks when placed within the domtabs box, as if there's some conflict. Here's the relevant DomTab code section:
<div class="domtab">
<ul class="domtabs">
<li><a style="border-top-left-radius:9px" href="#catalog">Catalog</a></li>
<li>Journals</li>
<li>Databases</li>
<li>Reserves</li>
<li>Reference</li>
<li><a style="border-top-right-radius:9px" href="#archive">Archive</a></li>
</ul>
<div>
<h2><a name="#catalog" id="catalog"></a></h2>
<table width="425px">
<tr>
<td valign="top" width="70%">
<!--Insert new code here-->
<!--Code Ends here-->
<span>Search the library's holdings for books, ebooks, movies, music recordings, and more.</span>
<form action="http://library.bennington.edu/search/Y" method="get" style="display:block; padding: 2px 0px; margin: 0;">
<input style="border-radius:3px" type="text" name="SEARCH" size="35" value="" />
<input type="hidden" name="SORT" value="A" />
<script language="javascript">
function iiiDoSubmit_1() {
var name = "iiiFormHandle_1";
if (document.getElementById)
obj = document.getElementById(name);
else if (document.all)
obj = document.all[name];
else if (document.layers)
obj = document.layers[name];
obj.form.submit();
}
</script>
<input type="hidden" id="iiiFormHandle_1"/>
<a href=# onclick="iiiDoSubmit_1();">
<input style="border-radius:3px; width:50px; margin-top:3px; padding:2px; font-size:11px" value="Search" type="Submit" />
</a>
</form>
</td>
<td valign="top" align="right">
<span class="roundedContentInfo">
<span style="font-size:130%; border-bottom:1px solid #000; text-align:left;"><b>Other Searches</b></span>
<span>Advanced </span>
<span>Title </span>
<span>Author </span>
<span>Author & Title </span>
</span>
</td>
</tr>
</table>
</div>
And here's the code that should be dropped in:
<script src="http://support.ebscohost.com/eit/scripts/ebscohostsearch.js" type="text/javascript"></script>
<style type="text/css">
.choose-db-list{ list-style-type:none;padding:0;margin:10px 0 0 0;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:9pt;width:340px; }
.choose-db-check{ width:20px;float:left;padding-left:5px;padding-top:5px; }
.choose-db-detail{ margin-left:30px;border-left:solid 1px #E7E7E7;padding:5px 11px 7px 11px;line-height:1.4em; }
.summary { background-color:#1D5DA7;color:#FFFFFF;border:solid 1px #1D5DA7; }
.one { background-color: #FFFFFF;border:solid 1px #E7E7E7;border-top:solid 1px #FFFFFF; }
.two { background-color: #F5F5F5;border:solid 1px #E7E7E7;border-top:solid 1px #FFFFFF; }
.selected { background-color: #E0EFF7;border:solid 1px #E7E7E7;border-top:solid 1px #FFFFFF; }
#ebscohostCustomSearchBox #disciplineBlock { width:auto; }
#ebscohostCustomSearchBox .limiter { float:left;margin:0;padding:0;width:50%; }
#ebscohostsearchtext { width: 144px; }
#ebscohostsearchtext.edspub { width: 245px; }
.ebscohost-search-button.edspub {
border: 1px solid #156619;
padding: 5px 10px !important;
border-radius: 3px;
color: #fff;
font-weight: bold;
background-color: #156619;
}
.ebscohost-title.edspub {
color: #1c7020;
font-weight: bold;
}
</style>
<form id="ebscohostCustomSearchBox" action="" onsubmit="return ebscoHostSearchGo(this);" method="post" style="width:340px; overflow:auto;">
<input id="ebscohostwindow" name="ebscohostwindow" type="hidden" value="1" />
<input id="ebscohosturl" name="ebscohosturl" type="hidden" value="http://0-search.ebscohost.com.library.bennington.edu/login.aspx?direct=true&site=eds-live&scope=site&type=0&mode=bool&lang=en&authtype=cookie,ip" />
<input id="ebscohostsearchsrc" name="ebscohostsearchsrc" type="hidden" value="db" />
<input id="ebscohostsearchmode" name="ebscohostsearchmode" type="hidden" value="+" />
<input id="ebscohostkeywords" name="ebscohostkeywords" type="hidden" value="" />
<div style="background-image:url('http://support.ebscohost.com/images/logos/eds100.gif'); background-repeat:no-repeat; height:50px; width:340px; font-family:Verdana,Arial,Helvetica,sans-serif;font-size:9pt; color:#353535;">
<div style="padding-top:5px;padding-left:115px;">
<span class="ebscohost-title " style="font-weight:bold;">Research databases</span>
<div>
<input id="ebscohostsearchtext" class="" name="ebscohostsearchtext" type="text" size="23" style="font-size:9pt;padding-left:5px;margin-left:0px;" />
<input type="submit" value="Search" class="ebscohost-search-button " style="font-size:9pt;padding-left:5px;" />
<div id="guidedFieldSelectors">
<input class="radio" type="radio" name="searchFieldSelector" id="guidedField_0" value="" checked="checked" />
<label class="label" for="guidedField_0"> Keyword</label>
<input class="radio" type="radio" name="searchFieldSelector" id="guidedField_1" value="TI" />
<label class="label" for="guidedField_1"> Title</label>
<input class="radio" type="radio" name="searchFieldSelector" id="guidedField_2" value="AU" />
<label class="label" for="guidedField_2"> Author</label>
</div>
</div>
</div>
</div>
<div id="limiterblock" style="margin-left:-px; overflow: auto; ">
<div id="limitertitle" style="font-weight:bold;padding-top:25px;padding-bottom:5px;">Limit Your Results</div>
<div class="limiter" >
<input type="checkbox" id="chkFullText" name="chkFullText" checked="checked" />
<label for="chkFullText">Full Text</label>
</div>
<div class="limiter" >
<input type="checkbox" id="chkLibraryCollection" name="chkLibraryCollection" />
<label for="chkLibraryCollection">Available in Library Collection</label>
</div>
<div class="limiter" style="display:none;">
<input type="checkbox" id="chkPeerReviewed" name="chkPeerReviewed" />
<label for="chkPeerReviewed">Peer Reviewed</label>
</div>
<div class="limiter" style="display:none;">
<input type="checkbox" id="chkCatalogOnly" name="chkCatalogOnly" />
<label for="chkCatalogOnly">Catalog Only</label>
</div>
</div>
</form>
I've moved the javascript call to the top of the page, and moved the CSS to my CSS page to thin out the code, but still just getting the domtab box with normal background color as if nothing is there. :-/

Categories