We Keep Coding

Why is my hide() and show() not working even without error in JQuery? [duplicate]

This question already has answers here:
Can I make a <button> not submit a form?
(8 answers)
Closed 1 year ago.
I have a function that will show the other content and hide the recent content. But when I am clicking the submit input it's not working. I tried to use anchor tag and button tag and it has the same output.
html:
$(function(){
$('.btn .button').on('click', function(){
$('.container').show()
$('.container-two').hide()
})
})
* {
text-decoration: none;
}
body {
background: #8390A2;
}
.student {
padding-top: 10px;
padding-bottom: 20px;
}
.form .student div {
padding: 10px;
}
.form .student div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.student-name {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form .student-name div {
padding: 10px;
}
.form .student-name div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.title-header {
border-top-right-radius: 10%;
border-top-left-radius: 10%;
border-bottom: 1px solid grey;
height: 40px;
background: #efefef;
}
.title-header h3 {
text-align: center;
padding: 9px;
}
.form form div .info {
position: relative;
}
.form .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form .student div:first-child input {
width: 95%;
}
.form .info input:focus {
border-color: #4CCEE8;
}
.form .btn {
position: absolute;
padding-top: 50px;
right: 36.5%;
}
.form .btn input,
.form-two .btn input {
border-radius: 15px;
outline: none;
width: 100px;
height: 40px;
}
.form-two .address div {
padding: 10px;
}
.address .info-two {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form-two .student-info div {
padding: 10px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .address div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two form div .info {
position: relative;
}
.form-two .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form-two .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form-two .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form-two .address div:first-child input {
width: 95%;
}
.form-two .address div:last-child div {
padding-left: 1px;
}
.form-two .address div:last-child div label {
left: 8px;
}
.form-two .info input:focus {
border-color: #4CCEE8;
}
.form-two .btn {
position: absolute;
padding-top: 14px;
right: 36.5%;
}
.active {
display: none;
}
main {
border-radius: 1%;
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 13rem;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2)
}
form h4 {
margin: 10px;
}
#media only screen and (max-width: 1366px) {
main {
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 5rem;
}
}
<div class="container">
<main>
<div class="form">
<div class="title-header">
<h3>Personal Data Information</h3>
</div>
<form action="" method="POST">
<div class="student">
<div class="info">
<input type="text" name="Program">
<label>Program</label>
</div>
<div class="info">
<input type="text" name="Student #">
<label>Student #</label>
</div>
</div>
<h4>Student Name</h4>
<div class="student-name">
<div class="info">
<input type="text" name="Surname" id="surname">
<label>Surname</label>
</div>
<div class="info">
<input type="text" name="Given Name" id="givenname">
<label>Given Name</label>
</div>
<div class="info">
<input type="text" name="Middle Name" id="middlename">
<label>Middle Name</label>
</div>
<div class="info">
<input type="text" name="Auxillary Name" id="auxillaryname">
<label>Auxillary Name</label>
</div>
</div>
<div class="btn">
<input type="submit" name="submit" value="Continue" class="button">
</div>
</form>
</div>
</main>
</div>
<div class="container-two active">
<main>
<div class="form-two">
<div class="title-header">
<h3>Personal Data Information</h3>
</div>
<form action="" method="POST">
<h4>Address</h4>
<div class="address">
<div class="info">
<input type="text" name="City Address">
<label>City Address</label>
</div>
<div class="info-two" style="padding: 0px;">
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Zip Code</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Tel no.</label>
</div>
</div>
<div class="info">
<input type="email" name="Student #" style="width: 95%;">
<label>Email Address</label>
</div>
<div class="info">
<input type="text" name="City Address" style="width: 95%;">
<label>Home Address</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 34%;">
<label>Zip Code</label>
</div>
</div>
<div class="btn">
<input type="submit" name="submit" value="Continue">
</div>
</form>
</div>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" charset="utf-8"></script>
I tried to use addClass() and removeClass(), also css() but nothing happens. I also find an answer but nothing like my problem.

First of all, change the first submit type input to a button.
Instead of <input type="submit" name="submit" value="Continue" class="button">
Should be <button class="button" type="button">Continue</button>
This will prevent the form submission, and add the missing "button" class to the button.
Then modify the jquery code like this:
$(function(){
$('.btn .button').on('click', function(e){
$('.container').hide()
$('.container-two').show()
})
})
My answer was based on the assumption that you want to show the second container after pressing the first "continue" button.
$(function(){
$('.btn .button').on('click', function(e){
$('.container').hide();
$('.container-two').show();
});
});
* {
text-decoration: none;
}
body {
background: #8390A2;
}
.student {
padding-top: 10px;
padding-bottom: 20px;
}
.form .student div {
padding: 10px;
}
.form .student div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.student-name {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form .student-name div {
padding: 10px;
}
.form .student-name div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.title-header {
border-top-right-radius: 10%;
border-top-left-radius: 10%;
border-bottom: 1px solid grey;
height: 40px;
background: #efefef;
}
.title-header h3 {
text-align: center;
padding: 9px;
}
.form form div .info {
position: relative;
}
.form .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form .student div:first-child input {
width: 95%;
}
.form .info input:focus {
border-color: #4CCEE8;
}
.form .btn {
position: absolute;
padding-top: 50px;
right: 36.5%;
}
.form .btn input,
.form-two .btn input {
border-radius: 15px;
outline: none;
width: 100px;
height: 40px;
}
.form-two .address div {
padding: 10px;
}
.address .info-two {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form-two .student-info div {
padding: 10px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .address div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two form div .info {
position: relative;
}
.form-two .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form-two .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form-two .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form-two .address div:first-child input {
width: 95%;
}
.form-two .address div:last-child div {
padding-left: 1px;
}
.form-two .address div:last-child div label {
left: 8px;
}
.form-two .info input:focus {
border-color: #4CCEE8;
}
.form-two .btn {
position: absolute;
padding-top: 14px;
right: 36.5%;
}
.active {
display: none;
}
main {
border-radius: 1%;
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 13rem;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2)
}
form h4 {
margin: 10px;
}
#media only screen and (max-width: 1366px) {
main {
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 5rem;
}
}
<div class="container">
<main>
<div class="form">
<div class="title-header">
<h3>Personal Data Information 1</h3>
</div>
<form action="" method="POST">
<div class="student">
<div class="info">
<input type="text" name="Program">
<label>Program</label>
</div>
<div class="info">
<input type="text" name="Student #">
<label>Student #</label>
</div>
</div>
<h4>Student Name</h4>
<div class="student-name">
<div class="info">
<input type="text" name="Surname" id="surname">
<label>Surname</label>
</div>
<div class="info">
<input type="text" name="Given Name" id="givenname">
<label>Given Name</label>
</div>
<div class="info">
<input type="text" name="Middle Name" id="middlename">
<label>Middle Name</label>
</div>
<div class="info">
<input type="text" name="Auxillary Name" id="auxillaryname">
<label>Auxillary Name</label>
</div>
</div>
<div class="btn">
<button class="button" type="button">Continue</button>
</div>
</form>
</div>
</main>
</div>
<div class="container-two active">
<main>
<div class="form-two">
<div class="title-header">
<h3>Personal Data Information 2</h3>
</div>
<form action="" method="POST">
<h4>Address</h4>
<div class="address">
<div class="info">
<input type="text" name="City Address">
<label>City Address</label>
</div>
<div class="info-two" style="padding: 0px;">
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Zip Code</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Tel no.</label>
</div>
</div>
<div class="info">
<input type="email" name="Student #" style="width: 95%;">
<label>Email Address</label>
</div>
<div class="info">
<input type="text" name="City Address" style="width: 95%;">
<label>Home Address</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 34%;">
<label>Zip Code</label>
</div>
</div>
<div class="btn">
<input type="submit" name="submit" value="Continue">
</div>
</form>
</div>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I copied and pasted the code to codepen and found that he is trying to show the div which is already visible and trying to hide the div which is already hidden, so replaced the hide() and show() with each other.
prevent the default submit event and add hide() and show() on correct divs
$(function(){
$('.btn .button').on('click', function(e){
e.preventDefault();
$('.container').hide()
$('.container-two').show()
})
})

Option Form tag not engaging JavaScript

So I have four buttons when I click they all change the innerHTML on the player id - But I am unable to get my drop-downs to work and have them function as the buttons.
Example: When I click on the EXCEL button on the bottom, it transforms to 'Testing 2' but I would also like to have it when I change to the 'EXCEL' drop-down that it also shows 'Testing 2' but the javascript can't seem to read the onchange or that I'm not properly calling it - Does anyone know what I might be doing wrong? Would love all the help that I can get on this.
Clicking on RUN CODE SNIPPET will demonstate the full code in functioning format and non-functioning format.
var tabButtons = document.querySelectorAll('#options > button');
var tabButtons = document.querySelectorAll('#rChoices > option');
var player = document.getElementById('player');
function videoSelect(element){
if (element === "word"){
player.innerHTML = '<p>Testing 1</p>';
}
if (element === "excel"){
player.innerHTML = '<p>Testing 2</p>';
}
if (element === "powerpoint"){
player.innerHTML = '<p>Testing 3</p>';
}
if (element === "onenote"){
player.innerHTML = '<p>Testing 4</p>';
}
}
#media screen and (min-width: 768px) {
.modal-dialog {
width: 900px;
width: 850px;
}
.modal-content {
height: 650px;
}
.modal-body {
height: 460px;
overflow-y: auto;
}
}
.FT-main-category {
/* Display and Box Model */
margin-top: 12px;
margin-bottom: 12px;
padding: 12px;
border: 1px solid #8e908f;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
/* Color */
background-color: #f1f1f1;
}
.FT-main-header {
/* Display and Box Model */
margin-top: -12px;
margin-right: -12px;
margin-bottom: 8px;
margin-left: -12px;
padding: 12px;
/* Color */
background-color: #8e908f;
color: #f1f1f1;
/* Text */
font-family: Calibri, sans-serif;
font-size: 18pt;
}
.modal-footer {
margin-top: 0px;
}
.ms-rtestate-field p {
margin-bottom: 0px;
}
#x {
float: right;
padding-right: 10px;
}
#small {
font-size: 16px;
}
blockquote {
margin-bottom: 0px;
}
#submit {
border-radius: 4px!important;
}
.ext, #both1 {
display: none;
}
.form-group {
margin-bottom: 5px;
width: 450px;
}
.form {
padding-left: 0px;
padding-right: 0px;
}
#hidden_div {
padding-top: 30px;
text-align: center;
}
h2 {
font-size: 2rem!important;
}
.groupName, .totalUsers /* teamName, userCount */
{
display: none;
}
.row .row {
margin-left: 0px!important;
}
h7 {
font-size: 1.00rem!important;
}
h6 {
font-size: 1.1rem;
font-weight: bold!important;
}
#documents, .buttons, .rType, #rText, .rEmail, .groupName, .totalUsers {
text-align: left;
}
#rText {
font-size: large;
padding-right: 125px;
}
#mText {
font-size: large;
}
.container {
padding-right: 20px;
}
.container, .col-md-12 {
padding-left: 0px!important;
}
#mTextIndent, #stepHeaders {
padding-left: 5px!important;
}
#stepHeaders {
font-size: 1.1rem!important;
}
#documents img {
padding:0px 7px 5px 5px!important;
}
#documents h6 {
margin-bottom: .8rem!important;
}
#comp {
float: left!important;
}
<div class="container">
<div class="row submitHide">
<div class="col-md-6">
<form id="form" data-toggle="validator" novalidate="true">
<fieldset>
<div class="container form">
<h4 style="margin-bottom: 0px; text-align: center!important; float: none;">Application Request Form</h4>
<br/>
<div class="form-group row rChoices">
<label for="rChoices" class="col-form-label">Please choose a application below:</label><select class="form-control" id="rChoices" onchange="videoSelect(this.id)">
<option class="" selected disabled>---------</option>
<option class="word" id="word" onchange="videoSelect(this.id)">Word</option>
<option value="excel" id="excel" onchange="videoSelect(this.id)">Excel</option>
<option value="powerpoint" id="powerpoint" onchange="videoSelect(this.id)">PowerPoint</option>
<option value="onenote" id="onenote" onchange="videoSelect(this.id)">OneNote</option>
</select><div class="help-block with-errors"></div>
</div>
<div class="form-group row buttons">
<button type="submit" name="singlebutton" class="btn btn-success" id="submit">
Submit</button>
<button type="reset" name="cancelbutton" class="btn btn-warning" id="cancel" onclick="window.location.href='/TrainingResourceCenter/O365Training/Pages/EmailRetention.aspx'">
Cancel</button>
</div>
</div>
</fieldset>
</form>
</div>
<div class="col-md-6">
<div class="test">
<h4 style="margin-bottom: 0px; text-align: center!important; float: none;">Documentation</h4>
<br/>
<div class="row">
<div id="options">
<button type="button" id="word" onclick="videoSelect(this.id)">Word</button>
<button type="button" id="excel" onclick="videoSelect(this.id)">Excel</button>
<button type="button" id="powerpoint" onclick="videoSelect(this.id)">PowerPoint</button>
<button type="button" id="onenote" onclick="videoSelect(this.id)">OneNote</button>
</div>
</div>
<div id="player">
<p>Please select one of the applications from the drop-down to the left to view more information and documentation on Office 365 applications.</p>
</div>
</div>
</div>
</div>
</div>

Try using this.value for passing into the videoSelect function e.g. onclick="videoSelect(this.value)" within your select rChoices tag. Also, you're missing the option value for "word" on your first select option. You also only need onChange on the select tag, not on all of the option tags.
Alternatively, you could update your buttons to also have value="word" etc. with the same value as the ids, and then pass this.value to your videoSelect function there as well, for sake of consistency if you wanted..
var tabButtons = document.querySelectorAll('#options > button');
var tabButtons = document.querySelectorAll('#rChoices > option');
var player = document.getElementById('player');
function videoSelect(element) {
// console.log(element);
if (element === "word") {
player.innerHTML = '<p>Testing 1</p>';
}
if (element === "excel") {
player.innerHTML = '<p>Testing 2</p>';
}
if (element === "powerpoint") {
player.innerHTML = '<p>Testing 3</p>';
}
if (element === "onenote") {
player.innerHTML = '<p>Testing 4</p>';
}
}
#media screen and (min-width: 768px) {
.modal-dialog {
width: 900px;
width: 850px;
}
.modal-content {
height: 650px;
}
.modal-body {
height: 460px;
overflow-y: auto;
}
}
.FT-main-category {
/* Display and Box Model */
margin-top: 12px;
margin-bottom: 12px;
padding: 12px;
border: 1px solid #8e908f;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
/* Color */
background-color: #f1f1f1;
}
.FT-main-header {
/* Display and Box Model */
margin-top: -12px;
margin-right: -12px;
margin-bottom: 8px;
margin-left: -12px;
padding: 12px;
/* Color */
background-color: #8e908f;
color: #f1f1f1;
/* Text */
font-family: Calibri, sans-serif;
font-size: 18pt;
}
.modal-footer {
margin-top: 0px;
}
.ms-rtestate-field p {
margin-bottom: 0px;
}
#x {
float: right;
padding-right: 10px;
}
#small {
font-size: 16px;
}
blockquote {
margin-bottom: 0px;
}
#submit {
border-radius: 4px!important;
}
.ext,
#both1 {
display: none;
}
.form-group {
margin-bottom: 5px;
width: 450px;
}
.form {
padding-left: 0px;
padding-right: 0px;
}
#hidden_div {
padding-top: 30px;
text-align: center;
}
h2 {
font-size: 2rem!important;
}
.groupName,
.totalUsers
/* teamName, userCount */
{
display: none;
}
.row .row {
margin-left: 0px!important;
}
h7 {
font-size: 1.00rem!important;
}
h6 {
font-size: 1.1rem;
font-weight: bold!important;
}
#documents,
.buttons,
.rType,
#rText,
.rEmail,
.groupName,
.totalUsers {
text-align: left;
}
#rText {
font-size: large;
padding-right: 125px;
}
#mText {
font-size: large;
}
.container {
padding-right: 20px;
}
.container,
.col-md-12 {
padding-left: 0px!important;
}
#mTextIndent,
#stepHeaders {
padding-left: 5px!important;
}
#stepHeaders {
font-size: 1.1rem!important;
}
#documents img {
padding: 0px 7px 5px 5px!important;
}
#documents h6 {
margin-bottom: .8rem!important;
}
#comp {
float: left!important;
}
<div class="container">
<div class="row submitHide">
<div class="col-md-6">
<form id="form" data-toggle="validator" novalidate="true">
<fieldset>
<div class="container form">
<h4 style="margin-bottom: 0px; text-align: center!important; float: none;">Application Request Form</h4>
<br/>
<div class="form-group row rChoices">
<label for="rChoices" class="col-form-label">Please choose a application below:</label>
<select class="form-control" id="rChoices" onchange="videoSelect(this.value)">
<option class="" selected disabled>---------</option>
<option value="word" id="word">Word</option>
<option value="excel" id="excel">Excel</option>
<option value="powerpoint" id="powerpoint">PowerPoint</option>
<option value="onenote" id="onenote">OneNote</option>
</select>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row buttons">
<button type="submit" name="singlebutton" class="btn btn-success" id="submit">
Submit</button>
<button type="reset" name="cancelbutton" class="btn btn-warning" id="cancel" onclick="window.location.href='/TrainingResourceCenter/O365Training/Pages/EmailRetention.aspx'">
Cancel</button>
</div>
</div>
</fieldset>
</form>
</div>
<div class="col-md-6">
<div class="test">
<h4 style="margin-bottom: 0px; text-align: center!important; float: none;">Documentation</h4>
<br/>
<div class="row">
<div id="options">
<button type="button" id="word" onclick="videoSelect(this.id)">Word</button>
<button type="button" id="excel" onclick="videoSelect(this.id)">Excel</button>
<button type="button" id="powerpoint" onclick="videoSelect(this.id)">PowerPoint</button>
<button type="button" id="onenote" onclick="videoSelect(this.id)">OneNote</button>
</div>
</div>
<div id="player">
<p>Please select one of the applications from the drop-down to the left to view more information and documentation on Office 365 applications.</p>
</div>
</div>
</div>
</div>
</div>

Align buttons up and down using CSS

Im trying to make a panel with buttons that have the next arrangement side by side in columns:
But I don't know how to this.
Here is my code
<style>
* {
box-sizing: border-box;
}
input[type=text], select, textarea {
width: 50%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
color: white;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
margin: 0 auto;
display: inline-block;
}
input[type=submit]:hover {
background-color: #45a049;
display: block;
margin: 0 auto;
}
.container {
border-radius: 5px;
background-color: #23364B;
padding: 20px;
display:inline-block;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* this is for when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
body {
background-color:#23364B;
color: white;
text-align: center;
}
a:link, a:visited {
background-color: #4CAF50;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
float: right;
border: none;
border-radius: 4px;
}
a:hover, a:active {
background-color: #4CAF50;
}
<body>
<h2>Some title</h2>
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">key 1</label>
</div>
<div class="col-75">
<input type="text" id="some" name="somethig" placeholder="some text">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">key2</label>
</div>
<div class="col-75">
<input type="text" id="some again" name="more something" placeholder="more text">
</div>
</div>
<div class="row">
<input type="submit" value="action 1">
</div>
<div class="row">
<input type="submit" value="action 2">
</div>
<div class="row">
<input type="submit" value="action 3">
</div>
<div class="row">
<input type="submit" value="action 4">
</div>
<div class="row">
<input type="submit" value="action 5">
</div>
<div class="row">
<input type="submit" value="action 6">
</div>
</form>
</div>
1
</body>
Im guessing that #media screen, the .col-25 and .col-75 statements on css are messing in, but at the same time I dont see how, since this only acts (I think) in the space assignation inside the text areas,labels and buttons, but not outside this elements.
UPDATE
The statements mentioned in the css has nothing to do.

A div is a block level element, placing a element inside a div will normally move it to next line. In your case , you can use css grid system. and define how many columns you will like to have
.button-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
<h2>Some title</h2>
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">key 1</label>
</div>
<div class="col-75">
<input type="text" id="some" name="somethig" placeholder="some text">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">key2</label>
</div>
<div class="col-75">
<input type="text" id="some again" name="more something" placeholder="more text">
</div>
</div>
<div class="button-container">
<input type="submit" value="action 1">
<input type="submit" value="action 2">
<input type="submit" value="action 3">
<input type="submit" value="action 4">
<input type="submit" value="action 5">
<input type="submit" value="action 6">
</div>
</form>
</div>
1

jQuery add .css() if input value changes

I have a set of dynamic inputs and want to add css of parent element if a value entered is higher then 0.
$(document).ready(function() {
$(function() {
$('.plus').on('click', function() {
var $qty = $(this).prev('input');
var currentVal = parseInt($qty.val());
if (!isNaN(currentVal)) {
$qty.val(currentVal + 1);
}
});
$('.minus').on('click', function() {
var $qty = $(this).next('input');
var currentVal = parseInt($qty.val());
if (!isNaN(currentVal) && currentVal > 0) {
$qty.val(currentVal - 1);
}
});
});
$('document').on('change', 'input', function() {
if ($(this).val() > 0) {
$(this).closest('.inputBox').css('opacity', '1');
};
});
if ($('input').val() !== 0) {
$(this).closest('.inputBox').css('opacity', '1');
};
});
body {
font-family: 'Montserrat';
font-size: 100%;
}
.roomWrap {
display: flex;
flex-wrap: wrap;
}
.inputBox {
width: 50%;
border: 2px solid black;
max-width: 350px;
font-size: 1.8vw;
text-transform: uppercase;
font-weight: 500;
margin: 5px;
box-sizing: border-box;
padding: 22px 0px 22px 20px;
opacity: 0.2;
cursor: pointer !important;
}
.inputBox laber {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: pointer;
}
span.inputInner {
margin-left: 30px;
display: inline-block;
float: right;
padding-right: 20px;
/* padding-bottom: 20px; */
position: relative;
top: -8px;
/* height: 100%; */
}
.inputInner a {
cursor: pointer;
font-size: 3.8vw;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
top: -4px;
}
input {
width: 60px;
border: none;
text-align: center;
font-size: 3.8vw;
outline: none;
vertical-align: ;
position: relative;
top: -5px;
font-weight: 600;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inputBox">
<label for="sofa">
Sofa
<span class="inputInner">
<a class="minus">-</a>
<input name="sofa" value="0">
<a class="plus">+</a>
</span>
</label>
</div>
<div class="inputBox">
<label for="table">
Sofa
<span class="inputInner">
<a class="minus">-</a>
<input name="table" value="0">
<a class="plus">+</a>
</span>
</label>
</div>
<div class="inputBox">
<label for="piano">
Sofa
<span class="inputInner">
<a class="minus">-</a>
<input name="piano" value="0">
<a class="plus">+</a>
</span>
</label>
</div>
But I can't make it work. Could you please suggest what's wrong?
Here's the whole code: https://jsfiddle.net/dr7z7tkf/1/

To achieve what you need you should trigger a change event on the input after updating its value.
You also need to change $('document') to $(document). There's also no need for nested document.ready event handlers, as you can place all logic within a single one.
Finally, you can both DRY up and improve the logic by using a single click handler on the incrementing a elements, like this:
$(function() {
$('.plus, .minus').on('click', function() {
var $btn = $(this);
$btn.siblings('input').val(function(i, v) {
var newV = (parseInt(v, 10) || 0) + $btn.data('inc');
return newV >= 0 ? newV : v;
}).change();
});
$(document).on('change', 'input', function() {
$(this).closest('.inputBox').toggleClass('foo', parseInt(this.value, 10) > 0);
}).change();
});
body {
font-family: 'Montserrat';
font-size: 100%;
}
.roomWrap {
display: flex;
flex-wrap: wrap;
}
.inputBox {
width: 50%;
border: 2px solid black;
max-width: 350px;
font-size: 1.8vw;
text-transform: uppercase;
font-weight: 500;
margin: 5px;
box-sizing: border-box;
padding: 22px 0px 22px 20px;
opacity: 0.2;
cursor: pointer !important;
}
.inputBox laber {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: pointer;
}
span.inputInner {
margin-left: 30px;
display: inline-block;
float: right;
padding-right: 20px;
/* padding-bottom: 20px; */
position: relative;
top: -8px;
/* height: 100%; */
}
.inputInner a {
cursor: pointer;
font-size: 3.8vw;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
top: -4px;
text-decoration: none;
}
input {
width: 60px;
border: none;
text-align: center;
font-size: 3.8vw;
outline: none;
vertical-align: ;
position: relative;
top: -5px;
font-weight: 600;
}
.foo {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inputBox">
<label for="sofa">
Sofa
<span class="inputInner">
-
<input name="sofa" value="0">
+
</span>
</label>
</div>
<div class="inputBox">
<label for="table">
Table
<span class="inputInner">
-
<input name="table" value="0">
+
</span>
</label>
</div>
<div class="inputBox">
<label for="piano">
Piano
<span class="inputInner">
-
<input name="piano" value="0">
+
</span>
</label>
</div>

You need to trigger the change event while clicking on the + and - .Parse the input value on change event
$(document).ready(function() {
$(function() {
$('.plus').on('click', function() {
var $qty = $(this).prev('input');
var currentVal = parseInt($qty.val());
if (!isNaN(currentVal)) {
$qty.val(currentVal + 1);
}
$('input').trigger('change')
});
$('.minus').on('click', function() {
var $qty = $(this).next('input');
var currentVal = parseInt($qty.val());
if (!isNaN(currentVal) && currentVal > 0) {
$qty.val(currentVal - 1);
}
$('input').trigger('change')
});
});
$(document).on('change', 'input', function() {
if (parseInt($(this).val()) > 0) {
$(this).closest('.inputBox').css('opacity', '1');
}else{
$(this).closest('.inputBox').css('opacity', '0.2');
}
});
if ($('input').val() !== 0) {
$(this).closest('.inputBox').css('opacity', '1');
};
});
body {
font-family: 'Montserrat';
font-size: 100%;
}
.roomWrap {
display: flex;
flex-wrap: wrap;
}
.inputBox {
width: 50%;
border: 2px solid black;
max-width: 350px;
font-size: 1.8vw;
text-transform: uppercase;
font-weight: 500;
margin: 5px;
box-sizing: border-box;
padding: 22px 0px 22px 20px;
opacity: 0.2;
cursor: pointer !important;
}
.inputBox laber {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: pointer;
}
span.inputInner {
margin-left: 30px;
display: inline-block;
float: right;
padding-right: 20px;
/* padding-bottom: 20px; */
position: relative;
top: -8px;
/* height: 100%; */
}
.inputInner a {
cursor: pointer;
font-size: 3.8vw;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
top: -4px;
}
input {
width: 60px;
border: none;
text-align: center;
font-size: 3.8vw;
outline: none;
vertical-align: ;
position: relative;
top: -5px;
font-weight: 600;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="roomWrap">
<div class="inputBox">
<label for="bookshelf">Bookshelf<span class="inputInner"><a class="minus">-</a><input name="bookshelf" value="0"><a class="plus">+</a></span></label>
</div>
<div class="inputBox">
<label for="sofa">Sofa<span class="inputInner"><a class="minus">-</a><input name="sofa" value="0"><a class="plus">+</a></span></label>
</div>
<div class="inputBox">
<label for="love seat">Love seat<span class="inputInner"><a class="minus">-</a><input name="love seat" value="0"><a class="plus">+</a></span></label>
</div>
<div class="inputBox">
<label for="lamp">Lamp<span class="inputInner"><a class="minus">-</a><input name="lamp" value="0"><a class="plus">+</a></span></label>
</div>
<div class="inputBox">
<label for="book-box">Book box<span class="inputInner"><a class="minus">-</a><input name="book-box" value="0"><a class="plus">+</a></span></label>
</div>
<div class="inputBox">
<label for="armoir">Armoir<span class="inputInner"><a class="minus">-</a><input name="armoir" value="0"><a class="plus">+</a></span></label>
</div>
<div class="inputBox">
<label for="grand-piano">Grand piano<span class="inputInner"><a class="minus">-</a><input name="grand-piano" value="0"><a class="plus">+</a></span></label>
</div>
<div class="inputBox">
<label for="upright-piano">Upright piano<span class="inputInner"><a class="minus">-</a><input name="upright-piano" value="0"><a class="plus">+</a></span></label>
</div>
<div class="inputBox">
<label for="TV">TV<span class="inputInner"><a class="minus">-</a><input name="TV" value="0"><a class="plus">+</a></span></label>
</div>
<div class="inputBox">
<label for="TV-stand">TV stand<span class="inputInner"><a class="minus">-</a><input name="TV-stand" value="0"><a class="plus">+</a></span></label>
</div>
<div class="inputBox">
<label for="coffee-table">Coffee table<span class="inputInner"><a class="minus">-</a><input name="coffee-table" value="0"><a class="plus">+</a></span></label>
</div>
<div class="inputBox">
<label for="desk">Desk<span class="inputInner"><a class="minus">-</a><input name="desk" value="0"><a class="plus">+</a></span></label>
</div>
<div class="inputBox">
<label for="lamp">Lamp<span class="inputInner"><a class="minus">-</a><input name="lamp" value="0"><a class="plus">+</a></span></label>
</div>
<div class="inputBox">
<label for="plant">Plant<span class="inputInner"><a class="minus">-</a><input name="plant" value="0"><a class="plus">+</a></span></label>
</div>
<div class="inputBox">
<label for="mirror">Mirror<span class="inputInner"><a class="minus">-</a><input name="mirror" value="0"><a class="plus">+</a></span></label>
</div>
<div class="inputBox">
<label for="picture">Picture<span class="inputInner"><a class="minus">-</a><input name="picture" value="0"><a class="plus">+</a></span></label>
</div>
</div>

When you change the value programatically, the change event never fires, you have to trigger it manually when you click the buttons, and change the value
$qty.val(currentVal + 1).trigger('change');
FIDDLE

$qty.trigger('change') and secure the input event $(document).on('input change')
$(document).ready(function() {
$(function() {
$('.plus').on('click', function() {
var $qty = $(this).prev('input');
var currentVal = parseInt($qty.val());
if (!isNaN(currentVal)) {
$qty.val(currentVal + 1);
$qty.trigger('change');
}
});
$('.minus').on('click', function() {
var $qty = $(this).next('input');
var currentVal = parseInt($qty.val());
if (!isNaN(currentVal) && currentVal > 0) {
$qty.val(currentVal - 1);
$qty.trigger('change');
}
});
});
$(document).on('input change', 'input', function() {
if ($(this).val() > 0) {
$(this).closest('.inputBox').css('opacity', '1');
};
});
if ($('input').val() !== 0) {
$(this).closest('.inputBox').css('opacity', '1');
};
});
body {
font-family: 'Montserrat';
font-size: 100%;
}
.roomWrap {
display: flex;
flex-wrap: wrap;
}
.inputBox {
width: 50%;
border: 2px solid black;
max-width: 350px;
font-size: 1.8vw;
text-transform: uppercase;
font-weight: 500;
margin: 5px;
box-sizing: border-box;
padding: 22px 0px 22px 20px;
opacity: 0.2;
cursor: pointer !important;
}
.inputBox laber {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: pointer;
}
span.inputInner {
margin-left: 30px;
display: inline-block;
float: right;
padding-right: 20px;
/* padding-bottom: 20px; */
position: relative;
top: -8px;
/* height: 100%; */
}
.inputInner a {
cursor: pointer;
font-size: 3.8vw;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
top: -4px;
}
input {
width: 60px;
border: none;
text-align: center;
font-size: 3.8vw;
outline: none;
vertical-align: ;
position: relative;
top: -5px;
font-weight: 600;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inputBox">
<label for="sofa">
Sofa
<span class="inputInner">
<a class="minus">-</a>
<input name="sofa" value="0">
<a class="plus">+</a>
</span>
</label>
</div>
<div class="inputBox">
<label for="table">
Sofa
<span class="inputInner">
<a class="minus">-</a>
<input name="table" value="0">
<a class="plus">+</a>
</span>
</label>
</div>
<div class="inputBox">
<label for="piano">
Sofa
<span class="inputInner">
<a class="minus">-</a>
<input name="piano" value="0">
<a class="plus">+</a>
</span>
</label>
</div>

change the javascript to this and try:
$(document).ready(function() {
$(function() {
$('.plus').on('click', function() {
var $qty = $(this).prev('input');
var currentVal = parseInt($qty.val());
if (!isNaN(currentVal)) {
$qty.val(currentVal + 1);
$qty.closest('.inputBox').css('opacity', '1');
}
});
$('.minus').on('click', function() {
var $qty = $(this).next('input');
var currentVal = parseInt($qty.val());
if (!isNaN(currentVal) && currentVal > 0) {
$qty.val(currentVal - 1);
}
});
});
});
I don't really know why your code didn't work, because I saw a design problem at first sight. It was this: you made the onclick function, and then an onchange function. But, isn't it true that if you click the + or the - button you're also changing the value? So, I just put the function that changed the opacity ($qty.closest('.inputBox').css('opacity', '1');) inside of the function executed when you click the + button.

How to remove either bullets / numbers from survey form

I have developed a quiz form wherein form before question both bullets and numbers are coming. I want to remove one of this (either bullets or number).
Please see this image
* { margin:0; padding:0; }
.floatleft {float:left !important;}
.floatright {float:right !important;}
.floatnone {float:none !important;}
.alignleft {text-align:left !important;}
.alignright {text-align:right !important;}
.aligncenter {text-align:center !important;}
.no-display { display:none; }
.no-margin { margin:0 !important; }
.no-padding { padding:0 !important; }
a:focus, button:focus {outline:0px solid}
img {
max-width:100%;
height:auto;
border:0;
vertical-align:top;
}
.fix {overflow:hidden}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 10px;
color:#000;
}
a {transition: all 0.3s ease 0s;text-decoration:none;}
a:hover {
color: #fff;
text-decoration: none;
}
a:active, a:hover, a:focus {
outline: 0 none;
text-decoration: none
}
.clear{clear:both}
#wrapper
{
height:100%;
width:100%;
}
body {
color: #000;
height:100%;
width:100%;
font-size: 16px;
line-height: 20px;
text-align: left;
overflow-x:hidden;
}
#header {
width:100%;
height:100px;
}
#logo{
clear:both;
margin:20px;
}
#logo a {
display: block;
margin-left: -18px;
position: relative;
}
#quiz input {
vertical-align: middle;
}
#quiz ol {
margin: 0 0 10px 20px;
}
#quiz ol li {
margin: 0 0 20px 0;
}
#quiz ol li div {
padding: 4px 0;
}
#quiz h3 {
font-size: 17px; margin: 0 0 1px 0; color: #000;
font-family: 'Roboto', sans-serif;
font-weight:600;
}
#quiz label
{
font-family: 'Roboto', sans-serif;
font-weight:normal;
}
#results {
font: 44px Georgia, Serif;
}
center
{
font-size:xx-large;
padding:20px 0 50px 0;
font-family: 'Roboto', sans-serif;
}
.form-footer .button {
margin-right: 10px;
margin-bottom: 5px;
color: #fff;
text-shadow: 0 1px rgba(0, 0, 0, 0.08);
background-color: #ecae3d;
border: 0;
height: 42px;
line-height: 1;
font-size: 15px;
cursor: pointer;
padding: 0 35px;
text-align: center;
vertical-align: top;
display: inline-block;
-webkit-user-drag: none;
font-family: "Roboto", Arial, Helvetica, sans-serif;
font-weight: 400;
}
.form-footer .button:hover{
background-color:#DBDBDB;
color:#000;
}
#quiz {
left: 50%;
margin-left: 25%;
}
#footer{
width:100%;
height:80px;
background-color:#2D2D2D;
color:#9C9C9C;
position:absolute;
clear:both;
margin-top:2%;
}
#footer #footer-center
{
font-size:18px;
margin:auto;
font-family: "Roboto", Arial, Helvetica, sans-serif;
clear:both;
padding:20px 0 0 0 ;
}
.survey-form
{
width:100%;
min-height:500px
}
li{
padding-bottom:20px;
margin-left:0px;
padding-left:0px;
}
ul
{
padding:0px;
margin:0px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="CSS/style.css"/>
<link rel="stylesheet" type="text/css" href="CSS/responsive.css"/>
</head>
<body class="no-transition stretched">
<div id="wrapper" class="clearfix">
<header id="header" class="full-header">
<!-- Logo-->
<div id="logo">
<img src="images/sequreone-logo.png" alt="Secqureone Logo">
</div>
<!-- #logo end -->
</header>
<center></center>
<div class="survey-form" id="form">
<form action="contact.php" method="post" id="quiz">
<ul>
<li>
<h3>2+2=0?</h3>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-A" value="A. Yes" required/>
<label for="question-1-answers-A">A) Yes </label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-B" value="B. No" required/>
<label for="question-1-answers-B">B) No</label>
</div>
</li>
<li>
<h3>2+9</h3>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-A" value="A. PCI" required/>
<label for="question-2-answers-A">A) 11</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-B" value="B. HIPAA" required/>
<label for="question-2-answers-B">B) 12</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-C" value="C. FISMA" required/>
<label for="question-2-answers-C">C) 10</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-D" value="D. GLBA" required/>
<label for="question-2-answers-D">D) 9</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-E" value="E. SOX" required />
<label for="question-2-answers-E">E) 99</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-F" value="F. ISO27001" required/>
<label for="question-2-answers-F">F) 27001</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-G" value="G. others" required/>
<label for="question-2-answers-G">G) Others</label>
<input type="text" />
</div>
</li>
<li>
<h3>8*5=40?</h3>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-A" value="A. Yes" required/>
<label for="question-3-answers-A">A) Yes </label>
</div>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-B" value="B. No" required/>
<label for="question-3-answers-B">B) No </label>
</div>
</li>
<li>
<h3>7/8=1?</h3>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-A" value="A. Yes" required/>
<label for="question-4-answers-A">A) Yes</label>
</div>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-B" value="B. No" required/>
<label for="question-4-answers-B">B) No</label>
</div>
</li>
<li>
<h3>14-2=12</h3>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-A" value="A. Yes" required/>
<label for="question-5-answers-A">A) Yes </label>
</div>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-B" value="B. No" required/>
<label for="question-5-answers-B">B) No </label>
</div>
</li>
<li>
</ul>
<div class="form-footer text-left">
<button type="submit" id="submit" class="button btn-primary">Submit</button>
</div>
</form>
<div class="form-footer text-left">
<button id="next" data-btntext-sending="Next" class="NextButton">Next</button>
</div>
</div>
<div id="footer">
<center id="footer-center"> Copyright © 2016 Secqureone,Inc. All rights reserved </center>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var currentPage = 0;
var pages = 5;
var itemsPerPage = 3;
$("li h3").each(function(i, e){
$(e).text((i + 1) + ") " + $(e).text());
});
$("#next").click(function() {
$("li")
//.css("background", "#FFF")
.hide();
for(i = 1; i <= itemsPerPage; i++) {
$("li:nth-child(" + ((currentPage * itemsPerPage) + i) + ")")
//.css("background" , "red")
.show();
$("#submit").hide();
}
if(currentPage < pages - 1) {
currentPage += 1;
} else {
currentPage = 0;
$("#next").hide();
$("#submit").show();
}
});
$("#next").click();
</script>
</body>
</html>
please help how to solve this.

You add list-style: none; to your ul tag
* { margin:0; padding:0; }
.floatleft {float:left !important;}
.floatright {float:right !important;}
.floatnone {float:none !important;}
.alignleft {text-align:left !important;}
.alignright {text-align:right !important;}
.aligncenter {text-align:center !important;}
.no-display { display:none; }
.no-margin { margin:0 !important; }
.no-padding { padding:0 !important; }
a:focus, button:focus {outline:0px solid}
img {
max-width:100%;
height:auto;
border:0;
vertical-align:top;
}
.fix {overflow:hidden}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 10px;
color:#000;
}
a {transition: all 0.3s ease 0s;text-decoration:none;}
a:hover {
color: #fff;
text-decoration: none;
}
a:active, a:hover, a:focus {
outline: 0 none;
text-decoration: none
}
.clear{clear:both}
#wrapper
{
height:100%;
width:100%;
}
body {
color: #000;
height:100%;
width:100%;
font-size: 16px;
line-height: 20px;
text-align: left;
overflow-x:hidden;
}
#header {
width:100%;
height:100px;
}
#logo{
clear:both;
margin:20px;
}
#logo a {
display: block;
margin-left: -18px;
position: relative;
}
#quiz input {
vertical-align: middle;
}
#quiz ol {
margin: 0 0 10px 20px;
}
#quiz ul {
list-style: none;
}
#quiz ol li {
margin: 0 0 20px 0;
}
#quiz ol li div {
padding: 4px 0;
}
#quiz h3 {
font-size: 17px; margin: 0 0 1px 0; color: #000;
font-family: 'Roboto', sans-serif;
font-weight:600;
}
#quiz label
{
font-family: 'Roboto', sans-serif;
font-weight:normal;
}
#results {
font: 44px Georgia, Serif;
}
center
{
font-size:xx-large;
padding:20px 0 50px 0;
font-family: 'Roboto', sans-serif;
}
.form-footer .button {
margin-right: 10px;
margin-bottom: 5px;
color: #fff;
text-shadow: 0 1px rgba(0, 0, 0, 0.08);
background-color: #ecae3d;
border: 0;
height: 42px;
line-height: 1;
font-size: 15px;
cursor: pointer;
padding: 0 35px;
text-align: center;
vertical-align: top;
display: inline-block;
-webkit-user-drag: none;
font-family: "Roboto", Arial, Helvetica, sans-serif;
font-weight: 400;
}
.form-footer .button:hover{
background-color:#DBDBDB;
color:#000;
}
#quiz {
left: 50%;
margin-left: 25%;
}
#footer{
width:100%;
height:80px;
background-color:#2D2D2D;
color:#9C9C9C;
position:absolute;
clear:both;
margin-top:2%;
}
#footer #footer-center
{
font-size:18px;
margin:auto;
font-family: "Roboto", Arial, Helvetica, sans-serif;
clear:both;
padding:20px 0 0 0 ;
}
.survey-form
{
width:100%;
min-height:500px
}
li{
padding-bottom:20px;
margin-left:0px;
padding-left:0px;
}
ul
{
padding:0px;
margin:0px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="CSS/style.css"/>
<link rel="stylesheet" type="text/css" href="CSS/responsive.css"/>
</head>
<body class="no-transition stretched">
<div id="wrapper" class="clearfix">
<header id="header" class="full-header">
<!-- Logo-->
<div id="logo">
<img src="images/sequreone-logo.png" alt="Secqureone Logo">
</div>
<!-- #logo end -->
</header>
<center></center>
<div class="survey-form" id="form">
<form action="contact.php" method="post" id="quiz">
<ul>
<li>
<h3>2+2=0?</h3>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-A" value="A. Yes" required/>
<label for="question-1-answers-A">A) Yes </label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-B" value="B. No" required/>
<label for="question-1-answers-B">B) No</label>
</div>
</li>
<li>
<h3>2+9</h3>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-A" value="A. PCI" required/>
<label for="question-2-answers-A">A) 11</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-B" value="B. HIPAA" required/>
<label for="question-2-answers-B">B) 12</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-C" value="C. FISMA" required/>
<label for="question-2-answers-C">C) 10</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-D" value="D. GLBA" required/>
<label for="question-2-answers-D">D) 9</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-E" value="E. SOX" required />
<label for="question-2-answers-E">E) 99</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-F" value="F. ISO27001" required/>
<label for="question-2-answers-F">F) 27001</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-G" value="G. others" required/>
<label for="question-2-answers-G">G) Others</label>
<input type="text" />
</div>
</li>
<li>
<h3>8*5=40?</h3>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-A" value="A. Yes" required/>
<label for="question-3-answers-A">A) Yes </label>
</div>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-B" value="B. No" required/>
<label for="question-3-answers-B">B) No </label>
</div>
</li>
<li>
<h3>7/8=1?</h3>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-A" value="A. Yes" required/>
<label for="question-4-answers-A">A) Yes</label>
</div>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-B" value="B. No" required/>
<label for="question-4-answers-B">B) No</label>
</div>
</li>
<li>
<h3>14-2=12</h3>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-A" value="A. Yes" required/>
<label for="question-5-answers-A">A) Yes </label>
</div>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-B" value="B. No" required/>
<label for="question-5-answers-B">B) No </label>
</div>
</li>
<li>
</ul>
<div class="form-footer text-left">
<button type="submit" id="submit" class="button btn-primary">Submit</button>
</div>
</form>
<div class="form-footer text-left">
<button id="next" data-btntext-sending="Next" class="NextButton">Next</button>
</div>
</div>
<div id="footer">
<center id="footer-center"> Copyright © 2016 Secqureone,Inc. All rights reserved </center>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var currentPage = 0;
var pages = 5;
var itemsPerPage = 3;
$("li h3").each(function(i, e){
$(e).text((i + 1) + ") " + $(e).text());
});
$("#next").click(function() {
$("li")
//.css("background", "#FFF")
.hide();
for(i = 1; i <= itemsPerPage; i++) {
$("li:nth-child(" + ((currentPage * itemsPerPage) + i) + ")")
//.css("background" , "red")
.show();
$("#submit").hide();
}
if(currentPage < pages - 1) {
currentPage += 1;
} else {
currentPage = 0;
$("#next").hide();
$("#submit").show();
}
});
$("#next").click();
</script>
</body>
</html>

Either remove jQuery code
$("li h3").each(function(i, e){
$(e).text((i + 1) + ") " + $(e).text());
});
OR add style
#quiz ul li{
list-style:none;
}
Here is the updated code:
* {
margin: 0;
padding: 0;
}
#quiz ul li {
list-style: none;
}
.floatleft {
float: left !important;
}
.floatright {
float: right !important;
}
.floatnone {
float: none !important;
}
.alignleft {
text-align: left !important;
}
.alignright {
text-align: right !important;
}
.aligncenter {
text-align: center !important;
}
.no-display {
display: none;
}
.no-margin {
margin: 0 !important;
}
.no-padding {
padding: 0 !important;
}
a:focus,
button:focus {
outline: 0px solid
}
img {
max-width: 100%;
height: auto;
border: 0;
vertical-align: top;
}
.fix {
overflow: hidden
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 10px;
color: #000;
}
a {
transition: all 0.3s ease 0s;
text-decoration: none;
}
a:hover {
color: #fff;
text-decoration: none;
}
a:active,
a:hover,
a:focus {
outline: 0 none;
text-decoration: none
}
.clear {
clear: both
}
#wrapper {
height: 100%;
width: 100%;
}
body {
color: #000;
height: 100%;
width: 100%;
font-size: 16px;
line-height: 20px;
text-align: left;
overflow-x: hidden;
}
#header {
width: 100%;
height: 100px;
}
#logo {
clear: both;
margin: 20px;
}
#logo a {
display: block;
margin-left: -18px;
position: relative;
}
#quiz input {
vertical-align: middle;
}
#quiz ol {
margin: 0 0 10px 20px;
}
#quiz ol li {
margin: 0 0 20px 0;
}
#quiz ol li div {
padding: 4px 0;
}
#quiz h3 {
font-size: 17px;
margin: 0 0 1px 0;
color: #000;
font-family: 'Roboto', sans-serif;
font-weight: 600;
}
#quiz label {
font-family: 'Roboto', sans-serif;
font-weight: normal;
}
#results {
font: 44px Georgia, Serif;
}
center {
font-size: xx-large;
padding: 20px 0 50px 0;
font-family: 'Roboto', sans-serif;
}
.form-footer .button {
margin-right: 10px;
margin-bottom: 5px;
color: #fff;
text-shadow: 0 1px rgba(0, 0, 0, 0.08);
background-color: #ecae3d;
border: 0;
height: 42px;
line-height: 1;
font-size: 15px;
cursor: pointer;
padding: 0 35px;
text-align: center;
vertical-align: top;
display: inline-block;
-webkit-user-drag: none;
font-family: "Roboto", Arial, Helvetica, sans-serif;
font-weight: 400;
}
.form-footer .button:hover {
background-color: #DBDBDB;
color: #000;
}
#quiz {
left: 50%;
margin-left: 25%;
}
#footer {
width: 100%;
height: 80px;
background-color: #2D2D2D;
color: #9C9C9C;
position: absolute;
clear: both;
margin-top: 2%;
}
#footer #footer-center {
font-size: 18px;
margin: auto;
font-family: "Roboto", Arial, Helvetica, sans-serif;
clear: both;
padding: 20px 0 0 0;
}
.survey-form {
width: 100%;
min-height: 500px
}
li {
padding-bottom: 20px;
margin-left: 0px;
padding-left: 0px;
}
ul {
padding: 0px;
margin: 0px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="CSS/style.css" />
<link rel="stylesheet" type="text/css" href="CSS/responsive.css" />
</head>
<body class="no-transition stretched">
<div id="wrapper" class="clearfix">
<header id="header" class="full-header">
<!-- Logo-->
<div id="logo">
<a href="index.html" class="standard-logo">
<img src="images/sequreone-logo.png" alt="Secqureone Logo">
</a>
</div>
<!-- #logo end -->
</header>
<center></center>
<div class="survey-form" id="form">
<form action="contact.php" method="post" id="quiz">
<ul>
<li>
<h3>2+2=0?</h3>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-A" value="A. Yes" required/>
<label for="question-1-answers-A">A) Yes</label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-B" value="B. No" required/>
<label for="question-1-answers-B">B) No</label>
</div>
</li>
<li>
<h3>2+9</h3>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-A" value="A. PCI" required/>
<label for="question-2-answers-A">A) 11</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-B" value="B. HIPAA" required/>
<label for="question-2-answers-B">B) 12</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-C" value="C. FISMA" required/>
<label for="question-2-answers-C">C) 10</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-D" value="D. GLBA" required/>
<label for="question-2-answers-D">D) 9</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-E" value="E. SOX" required />
<label for="question-2-answers-E">E) 99</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-F" value="F. ISO27001" required/>
<label for="question-2-answers-F">F) 27001</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-G" value="G. others" required/>
<label for="question-2-answers-G">G) Others</label>
<input type="text" />
</div>
</li>
<li>
<h3>8*5=40?</h3>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-A" value="A. Yes" required/>
<label for="question-3-answers-A">A) Yes</label>
</div>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-B" value="B. No" required/>
<label for="question-3-answers-B">B) No</label>
</div>
</li>
<li>
<h3>7/8=1?</h3>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-A" value="A. Yes" required/>
<label for="question-4-answers-A">A) Yes</label>
</div>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-B" value="B. No" required/>
<label for="question-4-answers-B">B) No</label>
</div>
</li>
<li>
<h3>14-2=12</h3>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-A" value="A. Yes" required/>
<label for="question-5-answers-A">A) Yes</label>
</div>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-B" value="B. No" required/>
<label for="question-5-answers-B">B) No</label>
</div>
</li>
<li>
</ul>
<div class="form-footer text-left">
<button type="submit" id="submit" class="button btn-primary">Submit</button>
</div>
</form>
<div class="form-footer text-left">
<button id="next" data-btntext-sending="Next" class="NextButton">Next</button>
</div>
</div>
<div id="footer">
<center id="footer-center">Copyright © 2016 Secqureone,Inc. All rights reserved</center>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var currentPage = 0;
var pages = 5;
var itemsPerPage = 3;
$("#next").click(function() {
$("li")
//.css("background", "#FFF")
.hide();
for (i = 1; i <= itemsPerPage; i++) {
$("li:nth-child(" + ((currentPage * itemsPerPage) + i) + ")")
//.css("background" , "red")
.show();
$("#submit").hide();
}
if (currentPage < pages - 1) {
currentPage += 1;
} else {
currentPage = 0;
$("#next").hide();
$("#submit").show();
}
});
$("#next").click();
</script>
</body>
</html>