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.
Related
I have developed a custom code input UI , where the user needs to enter the code they receive on their mobile, i was using a package before but on IOS there is an autofill feature which didn't work because there were 5 different inputs instead of just one so i had to resort to custom solution.
I created an input with boxes as background image which works great the only issue is after max length is reached the cursor was pointing for another input , as a result it messed up the input field,let me show you my code
HTML
<input class="ios" type="tel" maxlength="5" pattern="[0-9]*" inputmode="numeric"/>
CSS
.ios{
background: url("https://i.imgur.com/AGzHqot.png");
width: 280px;
height: 48px;
border: none;
padding-left: 19px;
letter-spacing: 45px;
background-repeat: no-repeat;
background-size: 100% 100%;
font-family: 'Roboto';
font-weight:500;
font-size:20px;
}
.ios:focus, .ios:focus, .ios:focus{}
outline: none}
Fiddle
Please use the fiddle for replication of issue, enter upto 6 characters you'll see the issue
Hope it's work !!!
you can achieve your goal using small jQuery function.
jQuery(document).ready(function(){
jQuery('.ios').keyup(function (event) {
var myLength = jQuery(this).val().length;
if(myLength ==1){
jQuery(this).next('.ios').focus();
}
});
});
* {box-sizing: border-box;}
.ios {border: 2px solid #efefef; border-radius: 5px; width: 40px; height: 40px; font-size:20px; text-align: center;}
.ios:focus, .ios:focus, .ios:focus{outline: 0;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group">
<input class="ios" type="tel" maxlength="1" pattern="[0-9]*" inputmode="numeric"/>
<input class="ios" type="tel" maxlength="1" pattern="[0-9]*" inputmode="numeric"/>
<input class="ios" type="tel" maxlength="1" pattern="[0-9]*" inputmode="numeric"/>
<input class="ios" type="tel" maxlength="1" pattern="[0-9]*" inputmode="numeric"/>
<input class="ios" type="tel" maxlength="1" pattern="[0-9]*" inputmode="numeric"/>
</div>
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.
I am trying to hide the input value of each individual input when clicked
My javascript is working fine but only targets the individual ID listed. I am looking for a more refined method that selects only the clicked input without having to repeat that same block of code 5 times targeting each different ID
$(document).ready(function() {
var text = document.getElementById('first_name');
var button = document.getElementById('first_name');
button.onclick = function() {
text.value = '';
text.classList.add("lowercase");
}
});
input[type=text] {
display: block;
border: none;
border-bottom: 1px solid;
width: 100%;
padding: 2rem 0 1rem;
}
input, input[type=submit] {
font-family: 'usm', sans-serif;
font-size: 0.7rem;
letter-spacing: 1pt;
text-transform: uppercase;
color: #7A7A7A;
}
input.lowercase {
text-transform: none !important;
letter-spacing: 0 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<form method="post" action="">
<input type="text" name="first_name" id="first_name" value="First Name*">
<br>
<input type="text" name="last_name" id="last_name" value="Last Name*">
<br>
<input type="text" name="email" id="email" value="Email Address*">
<br>
<input type="text" name="phone" id="phone" value="Phone Number">
<br>
<input type="text" name="message" id="message" value="Message*">
<div class="submit" >
<input type="submit" name="submit" value="Send" id="submit">
</div><!-- End of Submit -->
</form>
</body>
You can use jquery selector and use $(this)
$(document).ready(function() {
$('input[type="text"]').on('click', function(e) {
$(this).val('');
$(this).addClass('lowercase')
})
});
input[type=text] {
display: block;
border: none;
border-bottom: 1px solid;
width: 100%;
padding: 2rem 0 1rem;
}
input,
input[type=submit] {
font-family: 'usm', sans-serif;
font-size: 0.7rem;
letter-spacing: 1pt;
text-transform: uppercase;
color: #7A7A7A;
}
input.lowercase {
text-transform: none !important;
letter-spacing: 0 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<form method="post" action="">
<input type="text" name="first_name" id="first_name" value="First Name*">
<br>
<input type="text" name="last_name" id="last_name" value="Last Name*">
<br>
<input type="text" name="email" id="email" value="Email Address*">
<br>
<input type="text" name="phone" id="phone" value="Phone Number">
<br>
<input type="text" name="message" id="message" value="Message*">
<div class="submit">
<input type="submit" name="submit" value="Send" id="submit">
</div>
<!-- End of Submit -->
</form>
Maybe you should consider using placeholdr instead.
$(document).ready(function() {
$('form input[type="text"]').on('click', function() {
this.value = '';
});
});
input[type=text] {
display: block;
border: none;
border-bottom: 1px solid;
width: 100%;
padding: 2rem 0 1rem;
}
input, input[type=submit] {
font-family: 'usm', sans-serif;
font-size: 0.7rem;
letter-spacing: 1pt;
text-transform: uppercase;
color: #7A7A7A;
}
input.lowercase {
text-transform: none !important;
letter-spacing: 0 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<input type="text" name="palceholder_example" id="placeholdr_example" placeholder="Place holder example">
<form method="post" action="">
<input type="text" name="first_name" id="first_name" value="First Name*">
<br>
<input type="text" name="last_name" id="last_name" value="Last Name*">
<br>
<input type="text" name="email" id="email" value="Email Address*">
<br>
<input type="text" name="phone" id="phone" value="Phone Number">
<br>
<input type="text" name="message" id="message" value="Message*">
<div class="submit" >
<input type="submit" name="submit" value="Send" id="submit">
</div><!-- End of Submit -->
</form>
</body>
Define one function with input parameter as id and call this fn in an individual input element by passing that element's id.
function clearText(id) {
var text =
document.getElementById(id);
var button =
document.getElementById(id);
button.onclick = function() {
text.value = '';
text.classList.add("lowercase");
}
I've been able to make a section of a form that dynamically adds a tier of inputs on a button click. This new div is appended after the previous div and I am attempting to make a button that can also remove the tier if the user doesn't need it.
My problem is I cannot seem to remove the divs. I can add but not remove. When I look at the DOM I can see when the addDiv button is clicked, it is indeed adding the div and all the content is within the div, so it is being appended properly. But when I try to remove the newly appended div from it's parent element, I get the following error thrown:
addJob.js:18 Uncaught TypeError: Cannot read property 'parentNode' of undefinedremoveJob # addJob.js:18onclick # index.html:1
I'm unsure how to make my removeJob() function defined in a way that is just the reverse of how it was added.
CodePen: http://codepen.io/theodore_steiner/pen/WGEmGr
var i = 0;
function addJob() {
if (i <= 1) {
i++;
var div = document.createElement("div");
div.innerHTML = '<input type="text" class="three-lines" name="schoolBoard_' + i + '"> '+
'<input type="text" class="three-lines" name="position_' + i + '"> '+
'<input type="text" class="three-lines" name="years_' + i + '">'+
'<input type="button" value="-" onclick="removeJob()">';
document.getElementById("employmentHistory").appendChild(div);
}
}
function removeJob(div) {
document.getElementById("employmentHistory").removeChild(div.parentNode);
i--;
};
button {
height: 20px;
width: 20px;
background: none;
margin-left: 10px;
margin-top: 30px;
margin-bottom: 25px;
}
input[type="button"] {
height: 20px;
width: 20px;
background: none;
border: 1px solid #ccc;
outline: none;
margin-left: 20px;
}
input[type="button"]:focus {
outline: none;
}
input.three-lines {
margin-left: 18px;
background: none;
border: none;
border-bottom: 1px solid #b3c1cc;
width: 150px;
margin-bottom: 30px;
}
<div id="page2-content">
<div class="input-group" id="previousTeachingExperience">
<label id="teachingExpierience">Teaching Experience *</label>
<div id="employmentHistory">
<input type="text" class="three-lines" name="schoolBoard_1" placeholder="School Board" onblur="this.placeholder='Email'" onfocus="this.placeholder=''" />
<input type="text" class="three-lines" name="position_1" placeholder="Position" onblur="this.placeholder='Position'" onfocus="this.placeholder=''" />
<input type="text" class="three-lines" name="years_1" />
<input type="button" name="myButton" onclick="addJob()" value="+" />
</div>
You function is right just add the paramter "this" when you put the function in the onclick attribute, like this:
onclick="removeJob(this)"
Well, As per Below discussion passing this in the parameter is the best way to achieve this.
Below is the working code for this-
var i = 0;
var div = null;
function addJob()
{
if(i <= 1)
{
i++;
div = document.createElement("div");
div.innerHTML = '<input type="text" class="three-lines" name="schoolBoard_'+i+'"> <input type="text" class="three-lines" name="position_'+i+'"> <input type="text" class="three-lines" name="years_'+i+'"><input type="button" value="-" onclick="removeJob(this)">';
document.getElementById("employmentHistory").appendChild(div);
}
}
function removeJob(div)
{
document.getElementById("employmentHistory").removeChild(div.parentNode);
i--;
};
button
{
height: 20px;
width: 20px;
background: none;
margin-left: 10px;
margin-top: 30px;
margin-bottom: 25px;
}
input[type="button"]
{
height: 20px;
width: 20px;
background: none;
border: 1px solid #ccc;
outline: none;
margin-left: 20px;
}
input[type="button"]:focus
{
outline: none;
}
input.three-lines
{
margin-left: 18px;
background: none;
border: none;
border-bottom: 1px solid #b3c1cc;
width: 150px;
margin-bottom: 30px;
}
<div id="page2-content">
<div class="input-group" id="previousTeachingExperience">
<label id="teachingExpierience">Teaching Experience *</label>
<div id="employmentHistory">
<input type="text" class="three-lines" name="schoolBoard_1" placeholder="School Board" onblur="this.placeholder='Email'" onfocus="this.placeholder=''" />
<input type="text" class="three-lines" name="position_1" placeholder="Position" onblur="this.placeholder='Position'" onfocus="this.placeholder=''" />
<input type="text" class="three-lines" name="years_1" />
<input type="button" name="myButton" onclick="addJob()" value="+" />
</div>
Hoping this will help you :)
I am trying to create 2 divs that are next to each other but have a little space in between them. This is the following code that i have and the spacing is to far apart. I can't figure out how to set the spacing:
<style type="text/css">
.formLayout
{
background-color: #f3f3f3;
border: solid 1px #a1a1a1;
padding: 10px;
width: 300px;
border-radius: 1em;
}
.formLayout label, .formLayout input
{
display: block;
width: 120px;
float: left;
margin-bottom: 10px;
}
.formLayout label
{
text-align: right;
padding-right: 20px;
}
br
{
clear: left;
}
.box_header {
font-weight: 600;
color: #000000;
text-align: center;
border-radius: 1em;
}
</style>
<div class="formLayout" style="float:left;">
<div class="box_header">
Account Manager Information
</div>
<label>First Name</label>
<input id="fname" name="fname"><br>
<label>Last Name</label>
<input id="lname" name="lname"><br>
<label>Address</label>
<input id="address1"><br>
<label></label>
<input id="address2"><br>
<label>City</label>
<input id="address2"><br>
<label>State</label>
<input id="zip"><br>
<label>Zip</label>
<input id="zip"><br>
</div>
</div>
<div class="formLayout" style="float:right;">
<div class="box_header">
Client Information
</div>
<label>First Name</label>
<input id="fname" name="fname"><br>
<label>Last Name</label>
<input id="lname" name="lname"><br>
<label>Address</label>
<input id="address1"><br>
<label></label>
<input id="address2"><br>
<label>City</label>
<input id="address2"><br>
<label>State</label>
<input id="zip"><br>
<label>Zip</label>
<input id="zip"><br>
</div>
On your second formLayout, you can do:
style='float:left; margin-left: 20px' instead of floating right: http://jsfiddle.net/33Tma/
Obviously you can change the margin to whatever you need.
Also, you should try to avoid inline styling as much as possible.