Develop Reference

Why jQuery steps not changing the section

I was trying to make a multi-step form using jQuery steps. I have tried taking some code from the actual documentation but don't know why their web page isn't showing the code snippets. I tried taking the code from one tutorial blog but it is not working as I have expected. The section is not changing I am new to jQuery and never used steps I am not getting where I am going wrong.
Code :
<form id="example-form" action="#" class="tab-wizard wizard-circle wizard clearfix">
<h6>Account</h6>
<section>
<br/>
<div class="row">
<div class="col-sm-4 col-sm-push-4">
<div class="form-group">
<label for="userName-2">User name </label>
<input id="userName-2" name="userName" type="text" value="Les" class="form-control ">
</div>
<div class="form-group">
<label for="password-2">Password</label>
<input id="password-2" name="password" value ="password" type="text" class=" form-control">
</div>
<div class="form-group">
<label for="confirm-2">Confirm Password</label>
<input id="confirm-2" name="confirm" type="text" value="password" class=" form-control">
</div>
</div>
</div>
</section>
<h6>Profile</h6>
<section>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-4">
<div class="form-group">
<label for="name-2">First name</label>
<input id="name-2" name="name" type="text" class="form-control">
</div>
<div class="form-group">
<label for="surname-2">Last name</label>
<input id="surname-2" name="surname" type="text" class="form-control">
</div>
<div class="form-group">
<label for="email-2">Email</label>
<input id="email-2" name="email" type="text" class="form-control email">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="address-2">Address</label>
<input id="address-2" name="address" type="text" class="form-control">
</div>
<div class="form-group">
<label for="age-2">Age</label>
<input id="age-2" name="age" type="text" class="form-control number">
</div>
</div>
</div>
</section>
<h6>Warning</h6>
<section>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<div class="form-group">
<label>This is the question that is being asked to the user?</label>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" >
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" >
Option three. This is just a demo.
</label>
</div>
</div></div>
</div>
<hr>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-4">
<div class="form-group">
<label for="name-2">First name</label>
<input id="name-2" name="name" type="text" class="form-control">
</div>
<div class="form-group">
<label for="surname-2">Last name</label>
<input id="surname-2" name="surname" type="text" class="form-control">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="age-2">Age</label>
<input id="age-2" name="age" type="text" class="form-control number">
</div>
<div class="form-group">
<label for="email-2">Email</label>
<input id="email-2" name="email" type="text" class="form-control email">
</div>
</div>
</div>
</section>
<h6>Finish</h6>
<section>
<input id="acceptTerms-2" name="acceptTerms" type="checkbox" class=""> <label for="acceptTerms-2">I agree with the Terms and Conditions.</label>
</section>
</form>
Js code:
var form = $("#example-form");
form.steps({
headerTag: "h6",
bodyTag: "section",
transitionEffect: "fade",
titleTemplate: '<span class="step">#index#</span> #title#'
});
Apologies for the long code here, I tried making codesandbox of the example but I can't able to find the CDN for steps.css and also the CDN for steps.js was not working there.

Print html form input value or specific div content in JS with CSS

I have a form of a prescription. I want to print out that prescription form while submit and also want a proper format in that printout page.
form html
<form role="form" class="registration-form" id="registration_form_id">
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3>Patient Information</h3>
</div>
<div class="form-top-right">
<i class="fa fa-user"></i>
</div>
</div>
<div class="form-bottom">
<div class="form-group">
<label for="form-first-name">Name</label>
<input type="text" name="form-first-name" placeholder="name" class="form-first-name form-control require" id="name">
</div>
<div class="form-group">
<label for="form-last-name">Age</label>
<input type="number" name="form-last-name" placeholder="Age" class="form-last-name form-control require" id="age" >
</div>
<div class="form-group">
<label for="form-last-name">Mobile Number</label>
<input type="number" name="form-last-name" placeholder="Mobile Number" class="form-last-name form-control require" id="mobile_number" >
</div>
<div class="form-group">
<label for="form-last-name">Religion</label>
<input type="text" name="form-last-name" placeholder="Religion" class="form-last-name form-control require" id="religion" >
</div>
<div class="form-group">
<label for="form-last-name">Occupation</label>
<input type="text" name="form-last-name" placeholder="Occupation" class="form-last-name form-control require" id="occupation" required>
</div>
<div class="form-group">
<h4>Gender</h4>
<div class="row">
<div class="col-md-4">
Male<input class="col-md-4" type="radio" name="gender" value="1">
</div>
<div class="col-md-4">
Female<input class="col-md-4" type="radio" name="gender" value="2">
</div>
<div class="col-md-4">
Other<input class="col-md-4" type="radio" name="gender" value="3">
</div>
</div>
</div>
<div class="form-group">
<h4>Marital status</h4>
<div class="row">
<div class="col-md-4">
Married<input type="radio" class="col-md-4" name="marital_status" value="1">
</div>
<div class="col-md-4">
Single<input type="radio" name="marital_status" class="col-md-4" value="1">
</div>
</div>
</div>
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="form-about-yourself">Allergic history</label>
<textarea name="allergic_history" placeholder="Allergic history" class="form-about-yourself form-control " id="allergic_history" ></textarea>
</div>
<div class="form-group">
<label for="form-about-yourself">Personal history</label>
<textarea name="personal_history" placeholder="Personal history" class="form-about-yourself form-control " id="personal_history" ></textarea>
</div>
<button type="button" class="btn btn-previous">Previous</button>
<button type="button" class="btn" id="prescription_form_submition">Submit!</button>
</fieldset>
printout code in js
var divToPrint = document.getElementById('registration_form_id');
newWin= window.open("");
newWin.document.write('<html><style>#media print{body {font-size:16px;} #patient_doctor_info{border-bottom:1px solid #ccc;overflow:hidden;padding:20px 0 10px 0;} #patient_doctor_info span{font-size:18px;} #patient_info{float:left;} #doctor_info{float:right;} #patient_prescription_info{padding:20px 0;overflow:hidden;} #patient_old_prescription{padding-right:5%;border-bottom:1px solid #000;} #patient_new_prescription{overflow:hidden;padding:0 20px;} .new_prescription{font-size : 20px}}</style><body onload="window.print()"><div id="patient_doctor_info"><div id="patient_info"><p><lable>Name :</lable><span><b>'+name+'</b></span></p><p><lable>Mobile Number :</lable><span><b>'+mobile_no+'</b></span></p><p><lable>Age :</lable><span><b>'+age+'</b></span></p><p><lable>Gender :</lable><span><b>'+sex+'</b></span></p></div><div id="patient_prescription_info"><div id="patient_old_prescription"><p><lable>Allergy :</lable><span><b>'+allergic_history+'</b></span></p><p><lable>Social History :</lable><span><b>'+personal_history+'</b></span></p></div></div></body></html>');
newWin.print();
newWin.close();
the print pagelooks like the below image
But I want like below image
So my main questions are.....
how to printout specific div or form value of a webpage using javascript.
How to apply css in that print page?
I have googling this issue several times but still not getting proper solution.
Anybody help please ?

jQuery Effect causes button to not be enclosed by div

When using jQuery effect, my div collapses a little as it is sliding and the div coming in is also collapsed a little. It will be a responsive website, so I do not think I should put a width or height. I tried one suggestion I read about using position: absolute, but it did not produce the result I wanted. Is there a way to keep the div from collapsing any? I want each div to look the same when sliding as it does when not sliding.
This fiddle shows the effect and how the divs look when sliding.
CODE:
<div class="well basicInformation">
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">Basic Information</h4>
</a>
</div>
<div class="row">
<div class="col-md-5">
<label for="firstname">First Name</label>
<input type="text" id="firstname" class="form-control" placeholder="First name" ng-model="firstname" required autofocus />
</div>
<div class="col-md-2">
<label for="MI">Middle Initial</label>
<input type="text" id="MI" class="form-control" ng-model="middlename" />
</div>
<div class="col-md-5">
<label for="lastname">Last Name</label>
<input type="text" id="lastname" class="form-control" placeholder="Last name" ng-model="lastname" required />
</div>
</div>
<div class="row">
<div class="col-md-12">
<label for="address">Address</label>
<input type="text" id="address" class="form-control" placeholder="Address Line 1" ng-model="address" required />
</div>
</div>
<div class="row">
<div class="col-md-12">
<label for="address2">Address 2</label>
<input type="text" id="address2" class="form-control" placeholder="Address Line 2" ng-model="address2" />
</div>
</div>
<div class="row">
<div class="col-md-3">
<label for="city">City</label>
<input type="text" id="city" class="form-control" placeholder="City" ng-model="city" />
</div>
<div class="col-md-2">
<label for="address2">Locale/State</label>
<input type="text" id="locale" class="form-control" placeholder="Locale/State" ng-model="locale" />
</div>
<div class="col-md-2">
<label for="address2">Region</label>
<input type="text" id="region" class="form-control" placeholder="Region" ng-model="region" />
</div>
<div class="col-md-3">
<label for="address2">Country</label>
<input type="text" id="country" class="form-control" placeholder="Country" ng-model="country" />
</div>
<div class="col-md-2">
<label for="address2">Postal Code</label>
<input type="text" id="postalCode" class="form-control" placeholder="Postal Code" ng-model="postalCode" />
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="phone">Phone (Default)</label>
<input type="radio" id="radioHome1" /><label> Home</label>
<input type="radio" id="radioMobile1" /><label> Mobile</label>
<input type="tel" id="phone" class="form-control" placeholder="Phone" ng-model="contactData" required />
</div>
<div class="col-md-6">
<label for="phone2">Phone 2 (Alternate)</label>
<input type="radio" id="radioHome2" /><label> Home</label>
<input type="radio" id="radioMobile2" /><label> Mobile</label>
<input type="tel" id="phone2" class="form-control" placeholder="Phone 2" ng-model="contactData2" />
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="email">Email address</label>
<input type="email" id="email" class="form-control" placeholder="Email address" ng-model="emailAddress" required />
</div>
<div class="col-md-6">
<label for="password">Password</label>
<input type="password" id="password" class="form-control" placeholder="Password" ng-model="password" required />
</div>
</div>
<div class="row">
<div class="col-md-offset-10 col-md-2">
<button id="submitBasicInformation" class="btn btn-lg btn-primary btn-block">Next</button>
</div>
</div>
</div>
<div class="well faaInformation" style="display: none;">
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">FAA Required Information</h4>
</a>
</div>
<div class="row">
<div class="col-md-6">
<label for="federalRegistrationId">Federal Registration ID</label>
<input type="text" id="federalRegistrationId" class="form-control" placeholder="Federal Registration ID" ng-model="federalRegistrationId" required />
</div>
<div class="col-md-6">
<label for="pilotNumber">Pilot Number</label>
<input type="text" id="pilotNumber" class="form-control" ng-model="pilotNumber" required />
</div>
</div>
<div class="row">
<div class="col-md-offset-10 col-md-2">
<button id="submitRegistration" class="btn btn-lg btn-primary btn-block" type="submit">Submit</button>
</div>
</div>
</div>
var hideoptions = { "direction": "left", "mode": "hide" };
var showoptions = { "direction": "right", "mode": "show" };
$("#submitBasicInformation").on('click', function () {
$.when($(".basicInformation").effect("slide", hideoptions, 1250)).then(function (data, textStatus, jqXHR) {
$(".faaInformation").effect("slide", showoptions, 1250);
});
});

It looks like your animation is adding style attributes during the animation. You can see this if you slow down the animation and inspect the element. It's adding a static height and width during the animation. I was able to fix the height and width by adding this to your .faaInformation css
height: auto !important;
width: auto !important;

Why is the following code scrolling the page down?

This is the code. Basically it adds a sign up form to the page:
var currentTime = new Date($.now())
$(panel).addClass('panel-logged-out')
//this -> $('.am-signup').html('<div class="am-info alert-box secondary">Please sign-in to your CLO account.</div><div class="am-popup" style="top: 596px; left: 0px;"> <div class="am-popup-header"> <div class="am-popup-title"></div></div><div class="am-popup-content"><div id="ajax-link" style="display: block;"><div class="am-layout-two-coll"> <div class="am-layout-two-coll-top"></div><div class="am-coll-left"> <div class="am-coll-content"> <div class="am-form am-login-form"> <form name="login" method="post" action="/amember/login"> <fieldset> <legend> Member Login </legend> <div class="_row" id="recaptcha-_row" style="display: none;" data-recaptcha-theme="red"> <div class="element-title" style="display:none;"></div><div class="element am-element-recaptcha" id="recaptcha-element"> </div></div><div class="_row"> <div class="element-title"> <label class="element-title" for="login"> E-Mail Address </label> </div><div class="element"> <input type="text" id="login" name="amember_login" size="15" value="" autofocus="autofocus"> </div></div><div class="_row"> <div class="element-title"> <label class="element-title" for="pass"> Password </label> </div><div class="element"> <input type="password" id="pass" name="amember_pass" size="15"> </div></div><div class="_row"> <div class="element-title"> <label class="element-title" for="remember"> Remember my password? </label> </div><div class="element"> <input type="checkbox" name="remember_login" value="1"> </div></div><div class="_row"> <div class="element"> <input class="button" type="submit" value="Login"> </div></div></fieldset> <input type="hidden" name="login_attempt_id" value="' + currentTime + '"><input type="hidden" name="amember_redirect_url" value="/amember/signup"> </form> </div></div></div><div class="am-coll-right"> <div class="am-coll-content"> <div class="am-form am-sendpass-form"> <form name="sendpass" method="post" action="/amember/sendpass"> <fieldset> <legend> Lost password?</legend> <div class="_row"> <div class="element-title"> <label for="sendpass"> Enter your E-Mail Address </label> </div><div class="element"> <input type="text" name="login" id="sendpass" size="15"> </div></div><div class="_row"> <div class="element"> <input class="button" type="submit" value="Get Password"> </div></div></fieldset> </form> </div></div></div><div class="am-layout-two-coll-bottom"></div></div></div></div></div>')
For some reason it makes the page scroll to the form, and the problem disappears if I comment the code out. What could be the problem?
This is the live site: http://www.chineselearnonline.com/amember/signup/fullcourse
EDIT:
Here's the formatted version of the commented code:
Not sure if it has something to do with it, though.
<div class="am-info alert-box secondary">Please sign-in to your CLO account.</div>
<div class="am-popup" style="top: 596px; left: 0px;">
<div class="am-popup-header">
<div class="am-popup-title"></div>
</div>
<div class="am-popup-content">
<div id="ajax-link" style="display: block;">
<div class="am-layout-two-coll">
<div class="am-layout-two-coll-top"></div>
<div class="am-coll-left">
<div class="am-coll-content">
<div class="am-form am-login-form">
<form name="login" method="post" action="/amember/login">
<fieldset>
<legend> Member Login </legend>
<div class="_row" id="recaptcha-_row" style="display: none;" data-recaptcha-theme="red">
<div class="element-title" style="display:none;"></div>
<div class="element am-element-recaptcha" id="recaptcha-element"> </div>
</div>
<div class="_row">
<div class="element-title">
<label class="element-title" for="login"> E-Mail Address </label>
</div>
<div class="element">
<input type="text" id="login" name="amember_login" size="15" value="" autofocus="autofocus"> </div>
</div>
<div class="_row">
<div class="element-title">
<label class="element-title" for="pass"> Password </label>
</div>
<div class="element">
<input type="password" id="pass" name="amember_pass" size="15"> </div>
</div>
<div class="_row">
<div class="element-title">
<label class="element-title" for="remember"> Remember my password? </label>
</div>
<div class="element">
<input type="checkbox" name="remember_login" value="1"> </div>
</div>
<div class="_row">
<div class="element">
<input class="button" type="submit" value="Login"> </div>
</div>
</fieldset>
<input type="hidden" name="login_attempt_id" value="' + currentTime + '">
<input type="hidden" name="amember_redirect_url" value="/amember/signup"> </form>
</div>
</div>
</div>
<div class="am-coll-right">
<div class="am-coll-content">
<div class="am-form am-sendpass-form">
<form name="sendpass" method="post" action="/amember/sendpass">
<fieldset>
<legend> Lost password?</legend>
<div class="_row">
<div class="element-title">
<label for="sendpass"> Enter your E-Mail Address </label>
</div>
<div class="element">
<input type="text" name="login" id="sendpass" size="15"> </div>
</div>
<div class="_row">
<div class="element">
<input class="button" type="submit" value="Get Password"> </div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="am-layout-two-coll-bottom"></div>
</div>
</div>
</div>
</div>

Autofocus?
If you put autofocus in the username input field, the browser makes autofocus inmediately
<input .... autofocus="autofocus">
Remove it and it works.

Copy function only working on some inputs

I have a copy function set up on my checkout page. The sole purpose of it is to copy the text that was entered for the customers shipping information that they entered and display it further down the page in a confirmation section.
It is working great for the customers name and address1 line. The address2, city, state, and zipcode line will not show up though. I have no idea why. I am doing the exact same thing as I am doing for the address1 and name. I have tried changing data-copy names, but nothing is working.
This is where the customer would enter their shipping info at.
<div class="shippinginfocontainer">
<span class="summarytitle"><p>Enter Shipping Information</p>
</span><br>
<div class="center">
<div class="field">
<label class="paddingleft" for="fullname">Full Name</label>
<div class="center"><input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" required></div>
</div>
<div class="field">
<label class="paddingleft" for="streetline1">Street Line 1</label>
<div class="center"><input type="text" class="biginputbarinline preview" id="ShipTostreetline1" data-copy="#address1" name="ShipTostreetline1" required></div>
</div>
<div class="field">
<label class="paddingleft" for="streetline2">Street Line 2</label>
<div class="center"><input type="text" class="biginputbarinline" id="ShipTostreetline2" data-copy="#address2" name="ShipTostreetline2" value="<?php echo escape($user->data()->streetline2); ?>"></div>
</div>
<div class="field">
<label class="paddingleft" for="city">City</label>
<div class="center"><input type="text" class="biginputbarinline" id="ShipTocity" data-copy="#confirmcity" name="ShipTocity" value="<?php echo escape($user->data()->city); ?>" required></div>
</div>
</div>
<div class="formleftcenter">
<div class="field">
<label for="state">State</label>
<input type="text" class="mediuminputbar" id="ShipTostate" data-copy="#confirmstate" name="ShipTostate" value="<?php echo escape($user->data()->state); ?>" required>
</div>
<div class="formrightcenter">
<div class="field">
<label for="zipcode">Zip Code</label>
<input type="text" class="mediuminputbar" id="ShipTozipcode" name="ShipTozipcode" value="<?php echo escape($user->data()->zipcode); ?>" required>
</div>
I then am copying the text to here(I left the state one out):
<p>Shipping to:</p>
<p><div id="name"></div></p>
<p><div id="address1"></div></p>
<p><div id="address2"></div></p>
<p><div id="confirmcity"></div></p>
<p><div id="confirmzip"></div></p>
The Jquery
$(document).ready(function() {
$(".preview").on('input', function() {
$($(this).data('copy')).html($(this).val());
});
});
Any idea why it is not working on those inputs?

You only have the 'preview' class on your full name and address1 lines.
Your jquery selector is selecting all elements on the page with the class 'preview', so the logic inside will only apply to HTML elements with the class 'preview'.
You'll want to change the rest of your inputs to also include the 'preview' class.

You have preview class in name & address 1 input field
<input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" required>
but you dont have preview class in other input fields
<input type="text" class="biginputbarinline" id="ShipTostreetline2" data-copy="#address2" name="ShipTostreetline2">
add preview in other input field classes

I can't speak to the php part, but the HTML and jquery should look something like this:
window.addAddress = function() {
var inputs = $('input').map(function () {
return $(this).val();
});
var i = 0;
$.each($('.data'), function(){
$(this).html(inputs[i]);
i++;
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shippinginfocontainer"> <span class="summarytitle"><p>Enter Shipping Information</p>
</span>
<br>
<div class="center">
<div class="field">
<label class="paddingleft" for="fullname">Full Name</label>
<div class="center">
<input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" value="Mickey Gordon" required>
</div>
</div>
<div class="field">
<label class="paddingleft" for="streetline1">Street Line 1</label>
<div class="center">
<input type="text" class="biginputbarinline preview" id="ShipTostreetline1" data-copy="#address1" name="ShipTostreetline1" value="Suite 105" required>
</div>
</div>
<div class="field">
<label class="paddingleft" for="streetline2">Street Line 2</label>
<div class="center">
<input type="text" class="biginputbarinline" id="ShipTostreetline2" data-copy="#address2" name="ShipTostreetline2" value="701 Rackamac Ln">
</div>
</div>
<div class="field">
<label class="paddingleft" for="city">City</label>
<div class="center">
<input type="text" class="biginputbarinline" id="ShipTocity" data-copy="#confirmcity" name="ShipTocity" value="Oxnard" required>
</div>
</div>
</div>
<div class="formleftcenter">
<div class="field">
<label for="state">State</label>
<input type="text" class="mediuminputbar" id="ShipTostate" data-copy="#confirmstate" name="ShipTostate" value="California" required>
</div>
<div class="formrightcenter">
<div class="field">
<label for="zipcode">Zip Code</label>
<input type="text" class="mediuminputbar" id="ShipTozipcode" name="ShipTozipcode" value="93031" required>
</div>
<p>Shipping to:</p>
<p>
<div id="name" class="data"></div>
</p>
<p>
<div id="address1" class="data"></div>
</p>
<p>
<div id="address2" class="data"></div>
</p>
<p>
<div id="confirmcity" class="data"></div>
</p>
<p>
<div id="confirmzip" class="data"></div>
</p>
<input type="button" value="Add" onclick="addAddress()" />