Develop Reference

Showing and Hiding a div with a select in vanilla javascript

I am trying to show input elements in a form with HTML select options. There are three options (DVD, book, and furniture) and each option has its product description input field (such as weight, height, size (MB) and length).
These inputs should be hidden and only show when the select option is changed. I want to use a for loop and not if or else conditionals.
The hidden input fields do not hide and show as expected using the select button. I am still learning, any tips will be helpful.
var display = {
1: [],
2: ["book"],
3: ["dvd"],
4: ["Furniture"],
}
function selectChanged() {
var sel = document.getElementById("productType");
for (var i = 1; i < 4; i++) {
document.getElementById("product" + i).classList.add("hidden");
}
display[sel.value].forEach(function(i) {
document.getElementById("product" + i).classList.remove("hidden");
});
}
<style>
.product{
border: 1px solid #333;
padding: 5px;
width: 20%;
margin: 25px 20px;
}
.info{
text-align: center;
}
.bottom-line{
box-sizing: border-box;
border-top: 1px solid;
margin: 0 34px;
}
form{
padding: 30px;
display: flex;
flex-direction: column;
}
.input-form{
width: 100%;
}
.data-input input{
width: 20%;
padding: 12px 20px;
margin: 8px 0px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.switcher{
width: 25%;
margin: 25px;
display: inline-block;
display: flex;
justify-content: center;
}
.input-group{
margin: 20px;
display: flex;
justify-content: center;
}
.same-line{
margin: 0;
width: 25%;
}
.furniture{
width: 50%;
display: none;
}
.furniture input{
width: 20%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.describe{
margin-top: 25px;
}
.hidden{
display: none;
}
</style>
<section class="add_products">
<form class="input-form" action="" id="product_form">
<div class="data-input">
<label for="sku">SKU#:</label>
<input type="text" id="sku" name="sku">
</div>
<div class="data-input">
<label for="name">NAME:</label>
<input type="text" id="name" name="name">
</div>
<div class="data-input">
<label for="price">PRICE ($):</label>
<input type="number" id="price" name="price">
</div>
<div class="input-group switcher">
<label for="productType">Type Switcher:</label>
<select class="list_products" id="productType" name="TypeSwitcher" onchange="selectChanged()">
<option value="1">DVD</option>
<option value="2">Book</option>
<option value="3">furniture</option>
</select>
</div>
<div class="data-input product hidden">
<label for="size">Size (MB):</label>
<input type="number" class="hidden" id="size" name="price">
<p class="describe">Please provide size in (MB)</p>
</div>
<div class="furniture product hidden">
<label for="height">Height (CM):</label>
<input type="number" id="height" name="price">
</div>
<div class="furniture product hidden">
<label for="width">Width (CM):</label>
<input type="number" id="width" name="price">
</div>
<div class="furniture product hidden">
<label for="length">Length (CM):</label>
<input type="number" id="length" name="price">
<p class="describe">Please provide measurements in (CM)</p>
</div>
<div class="data-input product hidden">
<label for="weight">Weight (KG):</label>
<input type="number" id="weight" name="price">
<p class="describe">Please provide weight in KG</p>
</div>

My approach:
Put the input fields into their own divs
Give them ids that correspond to the selection options.
Use Javascript to check the selected value that you declared against the current display value of those ids and make the switch as necessary.
It's a bit different from what you were using but it works. Let me know what you think.
function selectChanged() {
var sel = document.getElementById("productType");
let dvd = document.getElementById("dvd");
let book = document.getElementById("book");
let furniture = document.getElementById("furniture");
for (var i = 1; i < 4; i++) {
dvd.style.display = sel.value == "1" ? "block" : "none";
book.style.display = sel.value == "2" ? "block" : "none";
furniture.style.display = sel.value == "3" ? "block" : "none";
}
}
.product {
border: 1px solid #333;
padding: 5px;
width: 20%;
margin: 25px 20px;
}
.info {
text-align: center;
}
.bottom-line {
box-sizing: border-box;
border-top: 1px solid;
margin: 0 34px;
}
form {
padding: 30px;
display: flex;
flex-direction: column;
}
.input-form {
width: 100%;
}
.data-input input {
width: 20%;
padding: 12px 20px;
margin: 8px 0px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.switcher {
width: 25%;
margin: 25px;
display: inline-block;
display: flex;
justify-content: center;
}
.input-group {
margin: 20px;
display: flex;
justify-content: center;
}
.same-line {
margin: 0;
width: 25%;
}
.furniture {
width: 50%;
display: block;
}
.furniture input {
width: 20%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.describe {
margin-top: 25px;
}
#dvd {
display: none;
}
#book {
display: none;
}
#furniture {
display: none;
}
<section class="add_products">
<form class="input-form" action="" id="product_form">
<div class="data-input">
<label for="sku">SKU#:</label>
<input type="text" id="sku" name="sku">
</div>
<div class="data-input">
<label for="name">NAME:</label>
<input type="text" id="name" name="name">
</div>
<div class="data-input">
<label for="price">PRICE ($):</label>
<input type="number" id="price" name="price">
</div>
<div class="input-group switcher">
<label for="productType">Type Switcher:</label>
<select class="list_products" id="productType" name="TypeSwitcher" onchange="selectChanged()">
<option value="">Please Select</option>
<option value="1">DVD</option>
<option value="2">Book</option>
<option value="3">Furniture</option>
</select>
</div>
<div id="dvd">
<div class="data-input product">
<label for="size">Size (MB):</label>
<input type="number" id="size" name="price">
<p class="describe">Please provide size in (MB)</p>
</div>
</div>
<div id="book">
<div class="furniture product">
<label for="height">Height (CM):</label>
<input type="number" id="height" name="price">
</div>
<div class="furniture product">
<label for="width">Width (CM):</label>
<input type="number" id="width" name="price">
</div>
</div>
<div id="furniture">
<div class="furniture product">
<label for="length">Length (CM):</label>
<input type="number" id="length" name="price">
<p class="describe">Please provide measurements in (CM)</p>
</div>
<div class="data-input product">
<label for="weight">Weight (KG):</label>
<input type="number" id="weight" name="price">
<p class="describe">Please provide weight in KG</p>
</div>
</div>
</form>
</section>

Select option text not fully visible?

Why is my select field's text partly invisible and not fully shown as same as the other fields I made?
https://i.stack.imgur.com/tbfqm.png
I'm trying to make the text clear and not partly invisible.
I tried to increase the height of that field and it worked, the text was fully visible, but I don't want that solution. I want that field to be the same height as the other fields I made.
I appreciate if my fellow brothers could help me.
My HTML code:
<div class="form-div">
<form class="" action="index.html" method="post">
<div class="form-subdiv name-subdiv">
<label class="name-label">Name</label>
<input class="field name-field" type="text" name="" value="" placeholder="Enter your name">
</div>
<div class="form-subdiv email-subdiv">
<label class="email-label">Email</label>
<input class="field email-field" type="email" name="" value="" placeholder="Enter your email">
</div>
<div class="form-subdiv age-subdiv">
<label class="age-label">Age (optional)</label>
<input class="field age-field" type="number" name="" value="" placeholder="Age">
</div>
<div class="form-subdiv role-subdiv">
<label class="role-label">Which option best describes your current role?</label>
<select class="" name="">
<option value="" selected disabled>Select current role</option> <option value="">Studen</option>
<option value="">Full Time Job</option> <option value="">Full Time Learner</option>
<option value="">Prefer Not To Say</option> <option value="">Other</option>
</select>
</div>
Here is my CSS code:
/*///// Form /////*/
.form-div{
width: 48%;
height: 170vh;
margin: auto;
background-color: #2a2949;
color: white;
margin-top: 3%;
font-family: 'Quicksand', sans-serif;
font-size: 1.2rem;
font-weight: bold;
overflow: auto;
}
form > *{
display: block;
/* outline: yellow solid thin; */
width: 88%;
margin: auto;
}
.form-subdiv > *{
display: block;
}
.name-subdiv{
margin-top: 5%;
}
.form-subdiv:not(.name-subdiv){
margin-top: 4%;
}
.field,select{
font-family: 'Quicksand', sans-serif;
font-weight: bold;
font-size: 1rem;
margin-top: 1%;
width: 100%;
height: 2.5rem;
border-radius: 7px;
box-sizing: border-box;
padding: 2%;
}

Update: padding: 2%; to: padding: 0 2%;
The top and bottom padding is clipping the text.

jQuery Multi-Step Wizard Form

I trying to submit a form (perl script) with a demo of jQuery Multi-Step Wizard Form but for the life of me I cannot get it to submit to my test script NoScript.pl.
I have read the documentation and really cant seem to figure it out any help is appreciated.
window.onload = function() {
$(function() {
var $signupForm = $('#SignupForm');
$signupForm.validationEngine();
$signupForm.formToWizard({
submitButton: 'SaveAccount',
showProgress: true, //default value for showProgress is also true
nextBtnName: 'Forward >>',
prevBtnName: '<< Previous',
showStepNo: true,
validateBeforeNext: function() {
return $signupForm.validationEngine('validate');
}
});
$('#txt_stepNo').change(function() {
$signupForm.formToWizard('GotoStep', $(this).val());
});
$('#btn_next').click(function() {
$signupForm.formToWizard('NextStep');
});
$('#btn_prev').click(function() {
$signupForm.formToWizard('PreviousStep');
});
});
}
body {
font-family: Lucida Sans, Arial, Helvetica, Sans-Serif;
font-size: 13px;
margin: 20px;
}
#header {
text-align: center;
border-bottom: solid 1px #b2b3b5;
margin: 0 0 20px 0;
}
fieldset {
border: none;
width: 320px;
}
legend {
font-size: 18px;
margin: 0px;
padding: 10px 0px;
color: #b0232a;
font-weight: bold;
}
label {
display: block;
margin: 15px 0 5px;
}
input[type=text],
input[type=password] {
width: 300px;
padding: 5px;
border: solid 1px #000;
}
button,
.prev,
.next {
background-color: #b0232a;
padding: 5px 10px;
color: #fff;
text-decoration: none;
}
button:hover,
.prev:hover,
.next:hover {
background-color: #000;
text-decoration: none;
}
button {
border: none;
}
#controls {
background: #eee;
box-shadow: 0 0 16px #999;
height: 30px;
position: fixed;
padding: 10px;
top: 0;
left: 0;
width: 100%;
dex: 1
}
#controls h1 {
color: #666;
display: inline-block;
margin: 0 0 8px 0
}
#controls input[type=text] {
border-color: #999;
margin: 0 25px;
width: 120px
}
#steps {
margin: 80px 0 0 0
}
.prev {
float: left
}
.next {
float: right
}
.steps {
list-style: none;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0
}
.steps li {
color: #b0b1b3;
font-size: 24px;
float: left;
padding: 10px;
transition: all -moz-transition:all .3s;
-webkit-transition: all -o-transition:all .3s
}
.steps li span {
font-size: 11px;
display: block
}
.steps li.current {
color: #000
}
.breadcrumb {
height: 37px
}
.breadcrumb li {
background: #eee;
font-size: 14px
}
.breadcrumb li.current:after {
border-top: 18px solid transparent;
border-bottom: 18px solid transparent;
border-left: 6px solid;
content: ' ';
position: absolute;
top: 0;
right: -6px
}
.breadcrumb li.current {
background: #666;
color: #eee;
position: relative
}
.breadcrumb li:last-child:after {
border: none
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/artoodetoo/formToWizard/v0.0.2/jquery.formtowizard.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-en.min.js"></script>
<form id="SignupForm" action="http://www.smldesign.net/cgi-bin/NoScript.pl" method="post">
<fieldset>
<legend>Account information</legend>
<label for="Name">Name</label>
<input id="Name" type="text" class="validate[required]" />
<label for="Email">Email</label>
<input id="Email" type="text" class="validate[custom[email],required]" />
<label for="Password">Password</label>
<input id="Password" type="password" />
</fieldset>
<fieldset>
<legend>Company information</legend>
<label for="CompanyName">Company Name</label>
<input id="CompanyName" type="text" class="validate[required]" />
<label for="Website">Website</label>
<input id="Website" type="text" />
<label for="CompanyEmail">CompanyEmail</label>
<input id="CompanyEmail" type="text" />
</fieldset>
<fieldset>
<legend>Billing information</legend>
<label for="NameOnCard">Name on Card</label>
<input id="NameOnCard" type="text" />
<label for="CardNumber">Card Number</label>
<input id="CardNumber" type="text" />
<label for="CreditcardMonth">Expiration</label>
<select id="CreditcardMonth">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select id="CreditcardYear">>
<option value="2018">2018</option>
<option value="2019">2019</option>
</select>
<label for="Address1">Address 1</label>
<input id="Address1" type="text" />
<label for="Address2">Address 2</label>
<input id="Address2" type="text" />
<label for="City">City</label>
<input id="City" type="text" />
<label for="City">Country</label>
<select id="Country">
<option value="CA">Canada</option>
<option value="US">United States of America</option>
<option value="UM">United States Minor Outlying Islands</option>
<option value="VI">United States Virgin Islands</option>
</select>
</fieldset>
<p>
<input id="SaveAccount" type="button" value="Submit form" />
</p>
</form>

To fix this issue have you attempted using jQuery's $.submit() function when the final step is called. This would be:
$("#SaveAccount").click(function() {
$("#SignupForm").submit();
}
Remember the "Submit Form" button only shows up at the final step, you just need to add this snippet of code to your Javascript after the $('#btn_prev').click(function(){...} function.
window.onload = function() {
$(function() {
var $signupForm = $('#SignupForm');
$signupForm.validationEngine();
$signupForm.formToWizard({
submitButton: 'SaveAccount',
showProgress: true, //default value for showProgress is also true
nextBtnName: 'Forward >>',
prevBtnName: '<< Previous',
showStepNo: true,
validateBeforeNext: function() {
return $signupForm.validationEngine('validate');
}
});
$('#txt_stepNo').change(function() {
$signupForm.formToWizard('GotoStep', $(this).val());
});
$('#btn_next').click(function() {
$signupForm.formToWizard('NextStep');
});
$('#btn_prev').click(function() {
$signupForm.formToWizard('PreviousStep');
});
$("#SaveAccount").click(function() {
$("#SignupForm").submit();
});
});
}
body {
font-family: Lucida Sans, Arial, Helvetica, Sans-Serif;
font-size: 13px;
margin: 20px;
}
#header {
text-align: center;
border-bottom: solid 1px #b2b3b5;
margin: 0 0 20px 0;
}
fieldset {
border: none;
width: 320px;
}
legend {
font-size: 18px;
margin: 0px;
padding: 10px 0px;
color: #b0232a;
font-weight: bold;
}
label {
display: block;
margin: 15px 0 5px;
}
input[type=text],
input[type=password] {
width: 300px;
padding: 5px;
border: solid 1px #000;
}
button,
.prev,
.next {
background-color: #b0232a;
padding: 5px 10px;
color: #fff;
text-decoration: none;
}
button:hover,
.prev:hover,
.next:hover {
background-color: #000;
text-decoration: none;
}
button {
border: none;
}
#controls {
background: #eee;
box-shadow: 0 0 16px #999;
height: 30px;
position: fixed;
padding: 10px;
top: 0;
left: 0;
width: 100%;
dex: 1
}
#controls h1 {
color: #666;
display: inline-block;
margin: 0 0 8px 0
}
#controls input[type=text] {
border-color: #999;
margin: 0 25px;
width: 120px
}
#steps {
margin: 80px 0 0 0
}
.prev {
float: left
}
.next {
float: right
}
.steps {
list-style: none;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0
}
.steps li {
color: #b0b1b3;
font-size: 24px;
float: left;
padding: 10px;
transition: all -moz-transition:all .3s;
-webkit-transition: all -o-transition:all .3s
}
.steps li span {
font-size: 11px;
display: block
}
.steps li.current {
color: #000
}
.breadcrumb {
height: 37px
}
.breadcrumb li {
background: #eee;
font-size: 14px
}
.breadcrumb li.current:after {
border-top: 18px solid transparent;
border-bottom: 18px solid transparent;
border-left: 6px solid;
content: ' ';
position: absolute;
top: 0;
right: -6px
}
.breadcrumb li.current {
background: #666;
color: #eee;
position: relative
}
.breadcrumb li:last-child:after {
border: none
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/artoodetoo/formToWizard/v0.0.2/jquery.formtowizard.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-en.min.js"></script>
<form id="SignupForm" action="http://www.smldesign.net/cgi-bin/NoScript.pl" method="post">
<fieldset>
<legend>Account information</legend>
<label for="Name">Name</label>
<input id="Name" type="text" class="validate[required]" />
<label for="Email">Email</label>
<input id="Email" type="text" class="validate[custom[email],required]" />
<label for="Password">Password</label>
<input id="Password" type="password" />
</fieldset>
<fieldset>
<legend>Company information</legend>
<label for="CompanyName">Company Name</label>
<input id="CompanyName" type="text" class="validate[required]" />
<label for="Website">Website</label>
<input id="Website" type="text" />
<label for="CompanyEmail">CompanyEmail</label>
<input id="CompanyEmail" type="text" />
</fieldset>
<fieldset>
<legend>Billing information</legend>
<label for="NameOnCard">Name on Card</label>
<input id="NameOnCard" type="text" />
<label for="CardNumber">Card Number</label>
<input id="CardNumber" type="text" />
<label for="CreditcardMonth">Expiration</label>
<select id="CreditcardMonth">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select id="CreditcardYear">>
<option value="2018">2018</option>
<option value="2019">2019</option>
</select>
<label for="Address1">Address 1</label>
<input id="Address1" type="text" />
<label for="Address2">Address 2</label>
<input id="Address2" type="text" />
<label for="City">City</label>
<input id="City" type="text" />
<label for="City">Country</label>
<select id="Country">
<option value="CA">Canada</option>
<option value="US">United States of America</option>
<option value="UM">United States Minor Outlying Islands</option>
<option value="VI">United States Virgin Islands</option>
</select>
</fieldset>
<p>
<input id="SaveAccount" type="button" value="Submit form" />
</p>
</form>

I believe the above answer is correct.
At no point does it appear that you are actually forcing your FORM that posts the Perl script to execute a submit.
The jQuery submit method can do that for you.
p.s., your credit-card submission form appears to be non-TLS

Images disappearing when printing on form

I've started the Daily UI challenge to push myself and I've hit a stumbling block.
When I input digits into the Card Number field it seems to overwrite the images I've imported.
Could be something really obvious but I just can't put my finger on it.
Code is a bit all over the place but I'm relatively new to this sorry!
#import url("https://fonts.googleapis.com/css?family=Arimo|Roboto");
#import url("https://fonts.googleapis.com/css?family=Roboto+Condensed");
#wrapper {
height: 600px;
width: 600px;
background-color: white;
margin: 0 auto;
border-radius: 10px;
padding: 20px;
text-align: center;
font-family: "Roboto", sans-serif;
}
#creditcard {
height: 200px;
width: 400px;
background-color: rgba(55, 153, 255, 1);
margin: 0 auto;
border-radius: 10px;
box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.32);
font-family: "Roboto Condensed", sans-serif;
}
.numberInput {
padding-left: 3px;
width: 125px;
float: left;
margin: 20px 10px 10px 10px;
line-height: 1em;
font-size: 30px;
border-radius: 10px;
border: 0px solid white;
box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.32);
outline-width: 0;
}
.nameInput {
margin-top: 20px;
width: 250px;
line-height: 1em;
font-size: 30px;
border-radius: 10px;
border: 0px solid white;
box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.32);
outline-width: 0;
}
#expiryInfo {
margin: 10px 0px 0px 170px;
width: 250px;
font-size: 30px;
}
select {
border-radius: 10px;
border: 0px solid white;
}
label {
font-size: 30px;
}
#visalogo {
height: 20px;
margin-left: 300px;
margin-top: 10px;
}
#chiplogo {
height: 30px;
float: left;
margin-left: 50px;
margin-top: 50px;
}
#submit {
border: none;
border-radius: 10px;
background: grey;
transition: 0.5s ease-in-out;
transition-property: background, color;
font-size: 30px;
margin-top: 50px;
box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.32);
padding: 10px;
font-family: "Roboto", sans-serif;
}
#submit:hover {
background: rgba(55, 153, 255, 1);
color: white;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Credit Card Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="wrapper">
<div id="creditcard">
<div id="cardContent">
<img id="visalogo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Visa_Inc._logo.svg/800px-Visa_Inc._logo.svg.png" alt="visa logo">
<img id="chiplogo" src="https://cdn3.iconfinder.com/data/icons/electronic-3/500/Chip-512.png" alt="chip logo">
<div id="printNumbers">
</div>
</div>
</div>
<div id="divinfocontainer">
<form id="numberinfo">
<br>
<label for="box1">Card Number</label>
<div class="box1">
<input id="numberInput" class="numberInput" type="number" onkeyUp="document.getElementById('creditcard').innerHTML=this.value">
</div>
<div class="box2">
<input id="numberInput" class="numberInput" type="number" onkeyUp="document.getElementById('creditcard').innerHTML=this.value">
</div>
<div class="box3">
<input id="numberInput" class="numberInput" type="number" onkeyUp="document.getElementById('creditcard').innerHTML=this.value">
</div>
<div class="box4">
<input id="numberInput" class="numberInput" type="number" onkeyUp="document.getElementById('creditcard').innerHTML=this.value">
</div>
</form>
<div id="name">
<label for="nameInput">Name on Card<br></label>
<input class="nameInput" type="text">
</div>
<div id="expiryInfo">
<label>Expiration Date</label>
<select>
<option value="01">January</option>
<option value="02">February </option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select>
<option value="13"> 2018</option>
<option value="14"> 2019</option>
<option value="15"> 2020</option>
<option value="16"> 2021</option>
</select>
</div>
</div>
<div id="submitButton">
<button id="submit">
Continue to checkout
</button>
</div>
</div>
</body>
</html>

In your HTML, you have:
<input id="numberInput" class="numberInput" type="number" onkeyUp="document.getElementById('creditCard').innerHTML=this.value">
You are getting element by ID 'creditCard', which is the entire credit card.
Try changing that to:
<input id="numberInput" class="numberInput" type="number" onkeyUp="document.getElementById('printNumbers').innerHTML=this.value">
That way, you will get the element by ID 'printNumbers' instead, which will replace the innerHTML of the #printNumbers element.

You should have used document.getElementById('printNumbers').innerHTML=this.value instead of document.getElementById('creditcard').innerHTML=this.value.
Second one just replaces the entire html with this.value.

Fix div position in a form

I am using the same form on two different pages. On the first one every div is tidy in the desired position. On the second page, there is a select that only appears after a change (jquery trigger), which causes the div below it to appear first on the right but after the trigger it moves on the left. I'd like the div which contains radio buttons to be on the left side at all times, just like it is on the first page. The part that I'd like to fix is #center-add-new-event-form .container-field input[type=radio].
This is the css.
#center-add-new-event-form,
#center-add-new-event-form * {
box-sizing: border-box;
}
#center-add-new-event-form {
padding: 20px 10px 0px;
}
#center-add-new-event-form .container-field {
width: 50%;
float: left;
padding: 0 10px;
margin-bottom: 20px;
vertical-align: top;
}
#center-add-new-event-form .container-field label {
display: block;
font-weight: 600;
margin-bottom: 5px;
}
#center-add-new-event-form .container-field input[type=text],
#center-add-new-event-form .container-field select {
height: 34px;
border: 1px solid #ddd;
padding: 0 7px;
display: block;
width: 100%;
}
#center-add-new-event-form .container-field input[type=radio]
{
height: 34px;
border: 1px solid #ddd;
padding: 0 7px;
display: block;
width: 100%;
}
#center-add-new-event-form .center-error-message {
font-size: 0.9em;
color: darkred;
display: block;
margin-left: 1px;
}
.center-event-actions {
border-top: 1px solid #ddd;
padding: 20px 20px 15px;
text-align: right;
}
.clearfix:before,.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
#media screen and (max-width: 767px) {
#center-add-new-event-form .container-field {
float: none;
width: 100%;
}
}
<form id="center-add-new-event-form" class="clearfix">
<div class="container-field" style="width: 100%">
<label></label>
<div id="center-request-details">
</div>
</div>
<div class="container-field">
<label for="teaching-requests"></label>
<select id="input-teaching-requests" name="teaching-requests" class="create-request-event ui-widget-content ui-corner-all">
<option value=""></option>
<option value=""></option>
</select>
<span class="center-error-message"></span>
</div>
<div class="container-field">
<label for="request-date"></label>
<input type="text" name='request-date' class="create-request-event event-datepicker ui-widget-content ui-corner-all">
<span class="center-error-message"></span>
</div>
</div>
<div class="container-field">
<label for="teaching-start-time"></label>
<input type="text" name="teaching-start-time" class="create-request-event event-timepicker text ui-widget-content ui-corner-all">
<span class="center-error-message"></span>
</div>
<span class="clearfix"></span>
<div class="container-field">
<label for="teaching-end-time"></label>
<input type="text" name="teaching-end-time" class="create-request-event event-timepicker text ui-widget-content ui-corner-all">
<span class="center-error-message"></span>
</div>
<div class="container-field">
<label for="teaching-teacher"></label>
<div id='contanier-teacher-selection'>
</div>
<span class="center-error-message"></span>
</div>
<div class="container-field pull-left" align="left">
<label for="recursive-events" align="left">
<input type="radio" align="left" name="recursive" value="daily"/>Daily
<input type="radio" align="left" name="recursive" value="weekly"/>Weekly
<input type="radio" align="left" name="recursive" value="monthly"/>Monthly
</label>
</div>
<span class="center-error-message"></span>
</form>
<div class="center-event-actions">
<button id="cancel-add-new-event" class='button' data-izimodal-close="" data-izimodal-transitionout="bounceOutDown"></button>
<button id="add-new-event" class='button button-primary'></button>
</div>
Before
After

It looks like it is caused by container-field <= width: 50% and float
so when this div appears it appears next to last one
the solution add
<span class="clearfix"></span>
before the the element with radio buttons

This might work:
#center-add-new-event-form .container-field input[type=radio]:before
{
height: 34px;
border: 1px solid #ddd;
padding: 0 7px;
display: block;
width: 100%;
}
#center-add-new-event-form .container-field input[type=radio]:after
{
height: 34px;
border: 1px solid #ddd;
padding: 0 7px;
display: block;
width: 100%;
float: right;
}