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");
}
Related
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.
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.
The required attribute in input type display's once at a time. Is it possible to display required notification in html5 all at once when the user submits the form?
This snippet will help you to implement form validation.
Here we are adding a data attribute data-required to identify the required field and implement the validation logic.
var $ = jQuery;
$('#form').on('submit', function(e) {
e.preventDefault();
let validation = validateForm($(this))
})
validateForm = (formElement) => {
let form = formElement;
let valid = true;
$('.error').remove();
const generalError = "<span class='error'>This Field can not be empty</span>";
form.find('.form-group').each(function(index, item) {
let formItem = $(item).find('.form-item');
// check only inputs with validation required
if (formItem.data('required')) {
let type = formItem.data('field');
let formItemLength = formItem.val().length
if (formItem.val() === '') {
$(item).append(generalError)
valid = false
}
if (formItem.attr('type') == 'checkbox' && !formItem.is(':checked')) {
$(item).append(generalError)
valid = false
}
}
})
return valid
}
form {
padding: 20px;
background: #2c3e50;
color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
form label,
form input,
form button {
border: 0;
margin-bottom: 3px;
display: block;
width: 100%;
}
form input {
height: 25px;
line-height: 25px;
background: #fff;
color: #000;
padding: 0 6px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
form button {
height: 30px;
line-height: 30px;
background: #e67e22;
color: #fff;
margin-top: 10px;
cursor: pointer;
}
form .error {
color: #ff0000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form id="form" method="post">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-item" id="name" name="name" data-field="name" data-required="required">
</div>
<div class="form-group">
<label for="lastname">Lastname</label>
<input type="text" class="form-item" id="lastname" name="lastname">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" class="form-item" data-field="email" data-required="required">
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="text" id="phone" name="phone" class="form-item" data-field="phone" data-min="6" data-max="8" data-required="required">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-item" id="password" name="password" data-field="password" data-min="6" data-max="12" data-required="required">
</div>
<div class="form-group">
<label for="agreement">Agreement</label>
<input type="checkbox" class="form-item" id="agreement" name="agreement" data-required="required">
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea cols="57" id="description" name="description" rows="10" class="form-item" data-field="description"></textarea>
</div>
<div class="form-action">
<input class="form-submit" type="submit" value="Apply">
</div>
</form>
I want my 'sales bar' to slid-up after the user click the close 'x' button.
it was all working fine -with the close button - but then I added a form, and if I put the close button inside the form (to get it in-line) then the slideUp only last a second, and the bar slides back down - it should stay 'gone'.
<html>
<head>
<title></title>
<style type="text/css">
body {
margin: 0px;
}
.top-general-alert {
padding: 8px;
border: none;
font-size: 1em;
line-height: 2em;
text-align: center;
display: none;
background-color: #00294e;
color: #ffee7a;
}
.top-general-alert {
color: #fff;
}
.top-general-alert a,
.top-general-alert a:hover {
color: #0099cc;
}
</style>
</head>
<body>
<div class="top-general-alert" >
<form class="form-inline">
<div class="form-group">
<label for="newsletter">Sign-up for our newsletter! </label>
<input type="email" class="form-control" id="newsletter" placeholder="Your Email...">
<button type="submit" class="btn btn-default">Sign-up!</button> <button class="close-top-general-alert" >×</button>
</div>
</form>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
if ( $('.top-general-alert').length > 0 ) {
$('.top-general-alert').delay(800).slideDown('medium');
$('.close-top-general-alert').click( function() {
$('.top-general-alert').slideUp('fast');
});
}
});
</script>
</body>
</html>
(credit to https://www.buildersociety.com/threads/hellobar-free-alternative-devseries.1519/)
To be clear; If I make this modification (below) moving the close button outside the form. The behavior is correct. But the button is below the form
<div class="top-general-alert" >
<form class="form-inline">
<div class="form-group">
<label for="newsletter">Sign-up for our newsletter! </label>
<input type="email" class="form-control" id="newsletter" placeholder="Your Email...">
<button type="submit" class="btn btn-default">Sign-up!</button>
</div>
</form>
×
How about hide() after slideUp()?
$('.top-general-alert').slideUp('fast').hide('fast');
EDIT: form buttons cause page reload. Add type=button or type=reset will do work.
Full example below:
$(document).ready(function() {
if ( $('.top-general-alert').length > 0 ) {
$('.top-general-alert').delay(800).slideDown('medium');
$('.close-top-general-alert').click( function() {
$('.top-general-alert').slideUp('fast').hide('fast');
});
}
});
body {
margin: 0px;
}
.top-general-alert {
padding: 8px;
border: none;
font-size: 1em;
line-height: 2em;
text-align: center;
display: none;
background-color: #00294e;
color: #ffee7a;
}
.top-general-alert {
color: #fff;
}
.top-general-alert a,
.top-general-alert a:hover {
color: #0099cc;
}
<div class="top-general-alert" >
<form class="form-inline">
<div class="form-group">
<label for="newsletter">Sign-up for our newsletter! </label>
<input type="email" class="form-control" id="newsletter" placeholder="Your Email...">
<button type="submit" class="btn btn-default">Sign-up!</button> <button type="reset" class="close-top-general-alert" >×</button>
</div>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
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.