We Keep Coding

Auto-tab between input fields with some having labels

I'm trying to build a "Jumble" style game. I want to have single character input fields with some having circles overlayed in them. I also want the user to be able to auto-tab to the next input field after filling out the input field. Here's the fields:
<form id="jumble_word">
<label><input class="inputs" type="text" maxlength="1"></label>
<input class="inputs" type="text" maxlength="1">
<input class="inputs" type="text" maxlength="1">
<input class="inputs" type="text" maxlength="1">
<input class="inputs" type="text" maxlength="1">
<input class="inputs" type="text" maxlength="1">
<input class="inputs" type="text" maxlength="1">
</form>
Here's the JQUERY that I found that auto-tabs. However it doesn't auto-tab on the first input, and after some research, I understand that .next() only works with siblings.
$(":input").keyup(function() {
if (this.value.length == this.maxLength) {
$(this).next(':input').focus();
}
});
I'm using the label tag to overlay the circle. Here's the CSS
input[type=text] {
width: 72px;
height: 72px;
box-sizing: border-box;
margin: 10px 5px;
text-align: center;
text-transform: capitalize;
font-size: 36px;
z-index: 1 !important;
}
label {
position: relative;
}
label:before {
content: "";
position: absolute;
left: 6px;
top: -34px;
bottom: 0;
width: 70px;
height: 70px;
background: url("jumble.svg") center / contain no-repeat;
}
How can I change the jquery to have it auto-tab, regardless if an input field is surrounded by a label tag?

It's not clear why your script is not working for .next(). There may be other elements or something blocking your script. I tested with the following.
$(function() {
$("#jumble_word > input").not(":last").keyup(function(e) {
if ($(this).val().length == 1) {
$(this).next("input").focus();
}
});
});
.inputs {
width: 72px;
height: 72px;
margin: 5px;
text-align: center;
text-transform: capitalize;
font-size: 36px;
z-index: 1 !important;
border: 1px solid #222;
}
.round {
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="jumble_word">
<input class="inputs" type="text" maxlength="1">
<input class="inputs round" type="text" maxlength="1">
<input class="inputs" type="text" maxlength="1">
<input class="inputs" type="text" maxlength="1">
<input class="inputs" type="text" maxlength="1">
<input class="inputs" type="text" maxlength="1">
<input class="inputs" type="text" maxlength="1">
</form>
This worked as expected. Typing a letter into a Field causes it to focus on the next element.

How can I display form data in a table on the same page

I'm a beginner to Javascript and CSS.
I'm creating a web app that gets the user data, for example, the name of the person, etc. So, I want the form to close when its submit button is pressed and then I want it to create a table of the submitter's info.
submitter's info never ends, so it should have the capability to store many data.
I used this login form to get an idea;
https://www.w3schools.com/howto/howto_css_login_form.asp
The code is below;
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
function all() {
let name = document.getElementById("output").value;
var finalName = document.createElement("PARAGRAPH")
name.innerHTML(name)
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Full-width input fields */
input[type=text],
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
/* Extra styles for the cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto;
/* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%;
/* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
#keyframes animatezoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
<h2>Modal Login Form</h2>
<h3 class="output"></h3>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>
<div id="id01" class="modal">
<form class="modal-content animate" action="sub2.html" method="POST">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<img src="img_avatar2.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Student Name</b></label>
<input type="text" id="name" placeholder="Enter Username" name="uname">
<label for="psw"><b>Class</b></label>
<input type="text" placeholder="Enter Password" name="psw">
<label for="psw"><b>Class Number</b></label>
<input type="text" placeholder="Enter Password" name="psw">
<div class="marks">
<label for="psw"><b>First Term Marks</b></label>
<input type="text" placeholder="Maths" name="psw">
<input type="text" placeholder="Science" name="psw">
<input type="text" placeholder="Civics" name="psw">
<input type="text" placeholder="Geography" name="psw">
<input type="text" placeholder="Religion" name="psw">
<input type="text" placeholder="Aesthetics" name="psw">
<input type="text" placeholder="Health Science" name="psw">
<input type="text" placeholder="English" name="psw">
<input type="text" placeholder="English Grammer" name="psw">
<input type="text" placeholder="P.T.S" name="psw">
<input type="text" placeholder="Computer Science" name="psw">
<input type="text" placeholder="Biology" name="psw">
<input type="text" placeholder="Chemistry" name="psw">
<input type="text" placeholder="Physics" name="psw">
<input type="text" placeholder="Combined Maths" name="psw">
<input type="text" placeholder="Commerce" name="psw">
<input type="text" placeholder="Arts" name="psw">
<label for="psw"><b>Second Term Marks</b></label>
<input type="text" placeholder="Maths" name="psw">
<input type="text" placeholder="Science" name="psw">
<input type="text" placeholder="Civics" name="psw">
<input type="text" placeholder="Geography" name="psw">
<input type="text" placeholder="Religion" name="psw">
<input type="text" placeholder="Aesthetics" name="psw">
<input type="text" placeholder="Health Science" name="psw">
<input type="text" placeholder="English" name="psw">
<input type="text" placeholder="English Grammer" name="psw">
<input type="text" placeholder="P.T.S" name="psw">
<input type="text" placeholder="Computer Science" name="psw">
<input type="text" placeholder="Biology" name="psw">
<input type="text" placeholder="Chemistry" name="psw">
<input type="text" placeholder="Physics" name="psw">
<input type="text" placeholder="Combined Maths" name="psw">
<input type="text" placeholder="Commerce" name="psw">
<input type="text" placeholder="Arts" name="psw">
<label for="psw"><b>Third Term Marks</b></label>
<input type="text" placeholder="Maths" name="psw">
<input type="text" placeholder="Science" name="psw">
<input type="text" placeholder="Civics" name="psw">
<input type="text" placeholder="Geography" name="psw">
<input type="text" placeholder="Religion" name="psw">
<input type="text" placeholder="Aesthetics" name="psw">
<input type="text" placeholder="Health Science" name="psw">
<input type="text" placeholder="English" name="psw">
<input type="text" placeholder="English Grammer" name="psw">
<input type="text" placeholder="P.T.S" name="psw">
<input type="text" placeholder="Computer Science" name="psw">
<input type="text" placeholder="Biology" name="psw">
<input type="text" placeholder="Chemistry" name="psw">
<input type="text" placeholder="Physics" name="psw">
<input type="text" placeholder="Combined Maths" name="psw">
<input type="text" placeholder="Commerce" name="psw">
<input type="text" placeholder="Arts" name="psw">
</div>
<button type="submit" onclick="all()">Done!</button>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
</div>
</form>
</div>

The problem is you are using the submit button. After clicking on it, the data is being sent and the page is immediately reloaded and all filled data is deleted. The all() function is not executed at all. You need to submit the form via an ajax request so that the page is not refreshed. Here is the article about it https://www.w3schools.com/xml/ajax_intro.asp .
But it's much more convenient to send ajax requests using jQuery library (https://jquery.com).
So you can connect this library: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>. There is how use ajax by jQuery: https://www.w3schools.com/jquery/ajax_ajax.asp
If you have difficulties, i can detale write your code, just ask me.

css show validation message above the input field

Given that I have the following html bit:
form p label {
display: block;
float: left;
font-size: 14px;
color: green;
}
#myField.error {
content: 'validation error occurred';
display: block;
}
<form>
<div id="myField">
<p class="required">
<label for="username">Username:</label>
<input type="text" name="username" id="username" class="error" maxlength="10" value="" title="Username" required />
</p>
</div>
</form>
how can I show the validation error message above the input field, floating to the right? I don't want to modify the html code manually. However, adding some span tag using jquery or js is fine. All said, a css solution is preferred.

I made small change to your html, moved the error class from input to p element. And in css used ::before CSS pseudo element (and took the liberty to add a red border for input & red color for error message)
form p label {
display: block;
float: left;
font-size: 14px;
color: green;
}
#myField .error::before {
content: 'validation error occurred';
position: absolute;
top: -4px;
color: red;
}
#myField .error input {
border-color: red;
}
<form>
<div id="myField">
<p class="required error">
<label for="username">Username:</label>
<input type="text" name="username" id="username" class="" maxlength="10" value="" title="Username" required />
</p>
</div>
</form>
JS Fiddle link for this code

How to position HTML input cursor at beginning of centered placeholder

How can I position the cursor to be at the beginning of the placeholder (not the beginning of the input field) instead of the middle, while still keeping my placeholder text centered?
<input type="text" name="input_query" id="input_query" autofocus style="text-align: center; width: 100%" placeholder="Describe what's happening in your photo" autocomplete="off"/>

Use ::placeholder to apply CSS to the placeholder only:
input {
width: 100%
}
input::placeholder {
text-align: center;
}
<input type="text" autofocus placeholder="Describe what's happening in your photo" autocomplete="off"/>
If you want the cursor to appear at the beginning of the placeholder, you can do something similar, though it's pretty weird and isn't centered once the user starts typing:
input {
width: 65%;
padding-left: 35%;
}
<input type="text" autofocus placeholder="Describe what's happening in your photo" autocomplete="off"/>

this is if you want placeholder to be in the middle but text to start from left. hope that works for you
#input_query{
text-align: left;
}
::-webkit-input-placeholder {
text-align: center;
}
:-moz-placeholder { /* Firefox 18- */
text-align: center;
}
::-moz-placeholder { /* Firefox 19+ */
text-align: center;
}
:-ms-input-placeholder {
text-align: center;
}
<input type="text" name="input_query" id="input_query" autofocus style=" width: 100%" placeholder="Describe what's happening in your photo" autocomplete="off"/>

display inline block not making divs horizontals

how to make two divs horizontal
I gave display: inline-block but not successful
providing my code below
an yo tell me how to fix it
http://codepen.io/anon/pen/vGezoo
<div class ="name-list" >
<input type="button" value="+New"><br>
<div class='gettingValues' style='border:1px solid #000;'> getting form values
<input data-name="edit" type="button" value="Edit" name="editHistory">
<input data-name="delete" type="button" name="deleteHistory" value="Delete">
</div>
</div>
<div class ="contact-details">
<p>ADD OR EDIT CONTACT (FULL NAME)</p>
<form id="localStorageTest" method="post" action="">
<label>Name:</label>
<input type="text" name="name" id="name" class="stored" value="" /><br>
<label>Email:</label>
<input type="email" name="email" id="email" class="stored" value="" /><br>
<label>Message:</label>
<textarea name="message" id="message" class="stored"></textarea><br>
<input type="submit" class="demo-button" value="Submit" />
<button type="reset" value="cancel">Cancel</button>
</form>
</div>

The following style allows to display divs side by side in all browsers:
display: table-cell;

"display: inline-block" have margin-right: 4px. You should css margin-right: -4px
.name-list {
width: 30%;
border: 1px solid green;
display: inline-block;
margin-right: -4px;
}
.contact-details {
width: 70%;
border: 1px solid red;
display: inline-block;
margin-right: -4px;
}

Two issues prevent your inline-block divs from sitting side by side.
Borders
Borders add to the size of your element by default! (GOTHCA!) so in reality your elements are (70% + 2px + 30% + 2px) or (100% + 4px) of your total space! Naturally that won't fit on one line.
This can be fixed by using css box-sizing!
box-sizing: border-box;
or the calc function!
calc(70% - 2px) and calc(30% - 2px)
Text Gaps
The second issue is that inline elements can have gaps between them, because inline-block is modeled after text, gaps between the elements in the html create a gap between elements on the page.
This can be fixed by setting the font-size!
font-size: 0px;
But don't forget to set it back after!
font-size: initial;
Or you can remove the line break between your elements!
<div>
</div><div>
</div>