I have made this login form from my basic HTML CSS and JavaScript knowledge. There is a Remember me button in this login form I have created and now I have to give it a functionality.
I want to click OK button and then it should:
Create a cookie if Remember Me is set and save Student Id and Name.
I am using Visual Studio Code.
Here is my HTML + JavaScript Code:
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Login Form</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<div class = "f1">
<label for = "uname">
<b>Username</b>
</label>
<input type = "text"
placeholder = "Enter Username"
id = "user"
name = "uname" requitred>
<span id = "username" class = "text-danger font-weight-bold"></span>
<label for = "psw">
<b>Password</b>
</label>
<input type = "text"
placeholder = "Enter Password"
id = "pass"
name = "psw" requitred>
<button type="button" onclick="alert('Login is clicked')">OK</button>
<button type="button" onclick="alert('Cancel is clicked')">Cancel</button>
<input type="checkbox" value="lsRememberMe" id="rememberMe">
<label for="rememberMe">Remember me</label>
<input type="submit" value="Login" onclick="lsRememberMe()">
<script>
if (onclick == "alert('Login is clicked')"){
window.location.assign("Home.html");
}
</script>
</form>
</body>
</html>
CSS Code:-
form{
border: 3px solid black;
}
input[type=text],
input[type=password]{
width:27%;
padding:12px 20px;
margin:8px 0;
display: inline-block;
border: 1px solid black;
box-sizing: border-box;
}
button{
background-color: #04aa6d;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 27%;
}
input[type="checkbox"] {
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
appearance: checkbox;
display: inline-block;
width: auto;
}
body {
background-image: url('cool.jpg');
color: #FFFFFF;
}
input[type = Clear]{
font-size : 18px;
padding : 5px;
width : 20%;
border-radius: 0 10px;
border : none;
}
I have tried a lot of different techniques but it not work for me. (Code must be in JavaScript and HTML).
Thanks.
It would be better to save under the localStorage instead of a cookie because cookie is being sent to server every request. But both are ok if you are just saving the name (although that's something most browsers do anyway).
So basically you want to setItem when remeberMe is checked. you want to removeItem otherwise. When onload, restore the value using getItem
var user = document.getElementById("user");
var pass = document.getElementById("pass");
var rememberMe = document.getElementById("rememberMe");
window.addEventListener("load", function() {
console.log('run this: user.value = localStorage.removeItem("login-user-name") || "";');
})
function do_submit() {
if (rememberMe.checked) {
console.log('run this: localStorage.setItem("login-user-name", user.value);');
} else {
console.log('run this: localStorage.removeItem("login-user-name");');
}
alert("will cancel because return false explicitly")
return false;
}
form {
border: 3px solid black;
}
input[type=text],
input[type=password] {
width: 27%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid black;
box-sizing: border-box;
}
button {
background-color: #04aa6d;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 27%;
}
input[type="checkbox"] {
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
appearance: checkbox;
display: inline-block;
width: auto;
}
body {
background-image: url('cool.jpg');
color: #FFFFFF;
}
input[type=Clear] {
font-size: 18px;
padding: 5px;
width: 20%;
border-radius: 0 10px;
border: none;
}
<form class="f1" action="home.html" onsubmit="return do_submit()">
<label for="user">
<b>Username</b>
</label>
<input type="text" placeholder="Enter Username" id="user" name="uname" required>
<span id="username" class="text-danger font-weight-bold"></span>
<label for="pass">
<b>Password</b>
</label>
<input type="text" placeholder="Enter Password" id="pass" name="psw" required>
<!--
<button type="button" onclick="alert('Login is clicked')">OK</button>
<button type="button" onclick="alert('Cancel is clicked')">Cancel</button>
-->
<input type="checkbox" value="lsRememberMe" id="rememberMe">
<label for="rememberMe">Remember me</label>
<input type="submit" value="Login">
</form>
Is student ID a part of the response that you get from the server?
To create cookies, save the student name value in a variable:
const username = document.getElementById("user").value;
and save it as cookie if the Remember me checkbox is checked:
const rememberMe = document.querySelector("rememberMe");
if (rememberMe.checked) {
document.cookie = "username=" + username;
}
Next time on page loads, app reads the cookie value from browser and you can show previous username.
You may use js-cookie for easier cookie manipulation.
More info about JavaScript cookie.
I made a form for an event. When I click the first radio button, then submit. The warning message disappears, however, if I click the second radio button, the warning does not. My question is the some function not suitable for this case? How do I revise it? What kind of case do we use some function? Thank you!
const form = document.querySelector('.apply__form');
function createWarning(node) {
// if there is no warning msg, then create one
if (!node.querySelectorAll('.warning__style').length) {
const warning__msg = document.createElement('p');
warning__msg.innerHTML = 'Please fill in';
warning__msg.classList.add('warning__style');
node.appendChild(warning__msg);
}
}
form.addEventListener('submit', e => {
e.preventDefault();
let result = [];
// Check the required answer for name, phone, email, resource
const reqAns = document.querySelectorAll('.required .answer');
const reqAnsArray = [...reqAns];
reqAnsArray.map(element => {
if (element.value === "") {
createWarning(element.parentElement);
}
if (element.value && element.parentElement.querySelectorAll('.warning__style').length) {
element.parentElement.lastChild.classList.add('warning__disappear')
}
result.push(element.value)
})
// Check the required answer for the type of applying event
const reqChoice = document.querySelectorAll('.required input[type=radio]');
const reqChoiceArray = [...reqChoice];
reqChoiceArray.some(element => {
if (!element.checked) {
createWarning(element.parentElement.parentElement);
}
if (element.checked && element.parentElement.parentElement.querySelectorAll('.warning__style').length) {
element.parentElement.parentElement.lastChild.classList.add('warning__disappear')
}
})
})
body, html {
box-sizing: border-box;
font-size: 16px;
}
.wrapper {
width: 100%;
background:#f0f0f0;
padding: 30px 0;
}
.apply__form {
border-top: 8px solid #f00;
margin: 0 auto;
max-width: 645px;
background: #fff;
padding: 50px;
}
.form__title {
font: normal normal bold 1.8rem "Microsoft JhengHei";
}
.event__info {
margin: 2rem 0;
font: normal normal normal 0.9rem "Microsoft JhengHei";
}
.event__info .event__place {
margin-top: 0.5rem;
}
.notice {
color: #e74149;
font: normal normal normal 1rem "Microsoft JhengHei";
}
.notice::before {
content: "*";
padding-right: 5px;
}
.questions {
width: 100%;
}
.question {
font: normal normal normal 1rem "Microsoft JhengHei";
margin-top: 50px;
}
.question .question__title {
margin-bottom: 20px;
}
.question .question__title::after {
content: "*";
color: #e74149;
padding-left: 5px;
}
.question:nth-child(4) .type1 {
margin-bottom: 23px;
}
.question:nth-child(6) .question__title::after {
content: none;
}
.sub__title{
margin-bottom: 30px;
}
.question .answer {
width: 250px;
padding: 5px;
}
.button__section {
margin-top: 55px;
font: normal normal normal 1rem "Microsoft JhengHei";
}
.submit__btn {
background: #fad312;
border-radius: 3px;
outline: none;
border: none;
padding: 1rem 2rem;
margin-bottom: 20px;
cursor: pointer;
}
.warning {
font-size: 14px;
}
.copy__right {
height: 30px;
background: #000;
color: #999;
text-align: center;
padding: 15px 0;
line-height: 30px;
font-family: "Microsoft JhengHei";
}
.warning__style {
color: #e74149;
font-size: 14px;
position: absolute;
}
.warning__disappear {
display: none;
}
.wrong__format {
border: 1px solid #f00;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<title>Lazy-Form</title>
</head>
<body>
<div class="wrapper">
<form class="apply__form">
<h1 class="form__title">ABC FORM</h1>
<div class="event__info">
<p class="event__time">Event time</p>
<p class="event__place">Event location</p>
</div>
<h3 class="notice">Must</h3>
<div class="questions">
<div class="question required">
<p class="question__title">Nick name</p>
<input type="text" placeholder="Answer" class="answer">
</div>
<div class="question required">
<p class="question__title">Email</p>
<input type="email" placeholder="Answer" class="answer">
</div>
<div class="question required">
<p class="question__title">Phone</p>
<input type="text" placeholder="Answer" class="answer" id="number">
</div>
<div class="question required">
<p class="question__title">type</p>
<div class="type1 radioType">
<input type="radio" name="type" id="bed">
<label for="bed">Bed</label>
</div>
<div class="type2 radioType">
<input type="radio" name="type" id="phone">
<label for="phone">Phone</label>
</div>
</div>
<div class="question required">
<p class="question__title">How do you know this?</p>
<input type="text" placeholder="Answer" class="answer">
</div>
<div class="question">
<p class="question__title">Other</p>
<input type="text" placeholder="Answer" class="answer">
</div>
</div>
<div class="button__section">
<input type="submit" class="submit__btn" value="Submit">
</div>
</form>
</div>
<script src="app.js"></script>
</body>
</html>
I see two potential issues here. You are using querySelectorAll, which returns a static nodeList. But this shouldn't be the issue here, just something you need to be aware of.
You are using the some method in a wrong way.
You need to give it a function which checks each element and returns true or false.
If any of the element matches, the some method returns true as a whole.
So, it should look more like. (element down there is not correct, but I hope you get the idea.)
var response = reqChoiceArray.some(element => {
if (!element.checked) {
return false;
}
if (element.checked && element.parentElement.parentElement.querySelectorAll('.warning__style').length) {
return true;
}
})
if(!!response){
element.parentElement.parentElement.lastChild.classList.add('warning__disappear');
}else{
createWarning(element.parentElement.parentElement);
}
I've finished making a form for my website and I've set in the action attribute of form an email where I want this form to be sent, but I never receive anything. My other problem is how can I make the form only be allowed to be sent to the email if all the inputs have been filled and if the checkbox has been ticked? Else receives an error saying you have to fill everything. My idea is to make a Q&A, a person submits their info and question and receive an email with an answer, but I'm not receiving anything and I want the form to have a certain specification to be sent. I'll leave below the HTML of the Q&A tab and only the CSS relevant to that tab. I guess this can be fixed with if statements in JS but I tried and haven't had luck.
Code
/*Everything beneath has to do with the Q&A tab*/
#Q-A-BG {
background: url('Images/Q&A-BG.jpg');
background-size: cover;
}
;
.Questions {
display: flex;
flex-direction: column;
}
.Questions h1 {
text-align: center;
padding: 30px 0px 10px 0px;
}
.Questions input[type='text'],
.Questions input[type=email],
.Questions textarea {
font-size: inherit;
padding-left: 10px;
}
.Questions input,
.Questions textarea {
width: 450px;
height: 40px;
border-radius: 3px;
border: 1px solid grey;
}
.Questions textarea {
font-family: 'Montserrat', sans-serif;
height: 100px;
}
.InputSection {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 25px;
}
.InputSection select,
.InputSection option {
width: 450px;
height: 40px;
padding: 5px;
font-size: 16px;
-webkit-appearance: none;
font-family: 'Montserrat', sans-serif;
}
.InputSection label {
align-self: start;
margin-left: 550px;
}
.InputSection a {
text-decoration: none;
color: white;
font-weight: bold;
}
.InputSection a:hover,
.InputSection a:active {
text-decoration: underline;
}
.InputSection button {
align-self: flex-start;
margin-left: 560px;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
background-color: #5995DA;
border: none;
border-radius: 3px;
padding: 10px 10px;
cursor: pointer;
}
.Checkbox input {
margin-top: 10px;
height: 15px;
width: 15px;
border-radius: 3px;
margin-left: 10px;
}
#SubmitButton:hover {
opacity: 0.8;
}
#SubmitButton:active {
opacity: 0.5;
}
.InputSection input[type='text']:invalid,
.InputSection input[type='email']:invalid,
.InputSection input[type='checkbox']:invalid {
border: 1px solid #D55C5F;
color: #D55C5F;
box-shadow: none;
}
.InputSection input[type='text']:valid,
.InputSection input[type='email']:valid {
background-color: aliceblue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<title>What's out there</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#200&display=swap" rel="stylesheet">
<style>
</style>
<link rel='stylesheet' href='../styles.css' />
</head>
<body id='Q-A-BG'>
<header class="Header Subsection">
<!-- This is the menu-->
<nav class="Header-Container">
<ul class="Menu SubsectionMenu">
<li>Home</li>
<li>Q&A</li>
<li>Images</li>
<li>Blog</li>
</ul>
</nav>
</header>
<article class="Questions">
<!--This has to do with the Information section-->
<h1> Submit your question</h1>
<form action='WOT.QuestionsAnswers#gmail.com' method='get' class='Information-Section'>
<div class="InputSection">
<label for='full-name'> First name</label>
<input id='full-name' name='full-name' type='text' placeholder="First Name" />
</div>
<div class="InputSection">
<label for='full-name'> Last name</label>
<input id='full-name' name='full-name' type='text' placeholder="Last Name" />
</div>
<div class="InputSection">
<label for='email'> Email</label>
<input id='email' name='email' type='email' placeholder='Your Email' />
</div>
<div class="InputSection">
<label for='Education'>Level of education</label>
<select id='Education' name='Education'>
<option value='None'></option>
<option value='Hs'>High School</option>
<option value='Pu'>Physics undergraduate</option>
<option value='Pg'>Physics graduate</option>
<option value='Al'>Adult with little knowledge of physics</option>
<option value='As'>Adult with some knowledge of physics</option>
<option value='Ac'>Adult with college level knowledge of physics</option>
</select>
</div>
<div class="InputSection">
<label for='abstract'> Your question</label>
<textarea id='abstract' name='abstract' placeholder="Be precise and describe your question in less than 100 words"></textarea>
</div>
<div class="InputSection">
<label class='Checkbox' for='available'>
<input id='available' name='available' type='checkbox' value='Agrees to the terms'/>
<span> I accept the Terms and Conditions</span>
</label>
</div>
<div class="InputSection">
<button id="SubmitButton">Submit</button>
</div>
</form>
</article>
</body>
</html>
Use a required in the end of your input field.
E.g.: <input id='email' name='email' type='email' placeholder='Your Email' required/>
From W3schools:
The required attribute is a boolean attribute.
When present, it specifies that an input field must be filled out
before submitting the form.
Note: The required attribute works with the following input types:
text, search, URL, tel, email, password, date pickers, number,
checkbox, radio and file.
Just put "required" in the input type tag
i.e.
<input id='full-name' name='full-name' type='text' required placeholder="First Name"/>
there is html attribute which allow you to validate if field contains something called required what you have to do is to insert it in every input you want to contain something or not be empty even the check-box like the following
<input type="text" name="" required>
or you can validate the form with JavaScript if you want to.
And what you have to do about form submission is to pass mailto before write the email thereafter write it like the following
<form method="post" action="mailto:someone#example.com">
</form>
I am attempting to create a form that outputs the entered data when "submit" is clicked to a textarea.
Currently I can get it to submit to the area below the form but am unsure how to have multiple ID's in a single textarea.
<html>
<head>
<script>
function showInput() {
document.getElementById('display').innerHTML =
document.getElementById("user_input").value;
document.getElementById('name').innerHTML =
document.getElementById("user_name").value;
document.getElementById('stepsTaken').innerHTML =
document.getElementById("user_stepsTaken").value.replace(/(?:\r\n|\r|\n)/g, '<br />');
document.getElementById('theDate').innerHTML =
document.getElementById("user_theDate").value.replace(/(?:\r\n|\r|\n)/g, '<br />');
}
</script>
</head>
<body>
<script type="text/javaScript">
function Qreplace(e) {
var textfield = document.getElementById(e);
var regex = /#test/gi;
textfield.value = textfield.value.replace(regex, "1. test\n2. test");
var regex = /#report/gi;
textfield.value = textfield.value.replace(regex, "1. report\n2. report");
}
</script>
<form action="javascript:void(0);">
<p>
<label><b>Enter a Message</b></label><p>
<input type="text" id="user_input" required><p>
<label><b>Enter a name</b></label><p>
<input type="text" id="user_name" required><p>
<textarea id="user_stepsTaken" onkeyup="Qreplace('user_stepsTaken')" placeholder="Actions taken and notes..." style="height: 91px; max-height: 350px;" required></textarea>
<label for="sme">TL/SME Assist*</label>
<br>
Yes <input required="" type="radio" onclick="javascript:smeCheck();" value="Yes" name="TL/SME" id="yesCheck">
No <input type="radio" onclick="javascript:smeCheck();" value="No" name="TL/SME" id="noCheck"><br>
<div id="ifyes" style="display:none">
<input type="text" id="smeAssist" name="smeAssist" placeholder="Name or Initials of the TL/SME that provided assistance">
<!-- Hide/Show SME additonal options based on radio check box -->
<script type="text/javascript">
function smeCheck() {
if (document.getElementById('yesCheck').checked) {
document.getElementById('ifyes').style.display = 'block';
} else document.getElementById('ifyes').style.display = 'none';
}
</script>
</div>
<div style="display:block; margin-left: 0px;">
<label for="dateStarted">Issue Started*</label>
<input type="date" id="user_theDate" name="theDate" class="select">
</div>
<input type="submit" onclick="showInput();"><br/>
</form>
<label>Your input: </label>
<p><span id='display'></span></p>
<p><span id='name'></span></p>
<div id='stepsTaken'></div>
<div id='theDate'></div>
</body>
</html>
Thank you for any help I am quite unfamiliar with Javascript.
So the end result I am trying to accomplish is have the user input to output into a textarea with the following formatting below.
Message: Message here
Name: Name here
Info: Actions Taken
Date: 2018-12-13
you should keep return false; in function showInput() as form get submitted and there will be nothing to show
or make input type="button" instead of type="submit"
I found a solution to the issue using Jquery as follows
$('#summary').click(function() {
var name = $('#clientName').val()
var message = $('#errorMessage').val()
var ret = "Name: "+name+" \n\rMessage: " + message;
console.log(ret)
$(".output-container").fadeIn();
$("#output").text(ret);
})
$("#copyForm").click(function(){
$("#output").select();
document.execCommand('copy');
$(".success").fadeIn();
});
body {font-family: Helvetica;background-color: #1E365E;}
* {box-sizing: border-box;}
input[type=text], select, textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #1E365E;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=button] {
background-color: #1E365E;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=radio] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=date] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit]:hover {
background-color: #1E365E;
}
input[type=button]:hover {
background-color: #1E365E;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin: 5%;
}
.output-container {
display: none;
margin-top: 50px;
}
#output {
height: 300px;
}
.success {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class="container">
<h2>Testing Copy</h2>
<form id="myForm" action="/action_page.php">
<label for="cName">Client Name*</label>
<input type="text" id="clientName" name="cName" placeholder="Client Name...">
<label for="errorMessage">Error Message</label>
<input type="text" id="errorMessage" name="errorMessage" placeholder="Any error messages?">
</form>
<button id="summary">View Summary</button>
<div class="output-container">
<textarea id="output">
<h2>Form Content</h2>
</textarea>
<button id="copyForm">Copy Summary</button>
</div><!-- #end output-container -->
<p class="success"><strong>Form successfully copied</strong></p>
</div>
Is there a quick way to create an input text element with an icon on the right to clear the input element itself (like the google search box)?
I looked around but I only found how to put an icon as background of the input element. Is there a jQuery plugin or something else?
I want the icon inside the input text element, something like:
--------------------------------------------------
| X|
--------------------------------------------------
Add a type="search" to your input
The support is pretty decent but will not work in IE<10
<input type="search">
Older browsers
If you need IE9 support here are some workarounds
Using a standard <input type="text"> and some HTML elements:
/**
* Clearable text inputs
*/
$(".clearable").each(function() {
const $inp = $(this).find("input:text"),
$cle = $(this).find(".clearable__clear");
$inp.on("input", function(){
$cle.toggle(!!this.value);
});
$cle.on("touchstart click", function(e) {
e.preventDefault();
$inp.val("").trigger("input");
});
});
/* Clearable text inputs */
.clearable{
position: relative;
display: inline-block;
}
.clearable input[type=text]{
padding-right: 24px;
width: 100%;
box-sizing: border-box;
}
.clearable__clear{
display: none;
position: absolute;
right:0; top:0;
padding: 0 8px;
font-style: normal;
font-size: 1.2em;
user-select: none;
cursor: pointer;
}
.clearable input::-ms-clear { /* Remove IE default X */
display: none;
}
<span class="clearable">
<input type="text" name="" value="" placeholder="">
<i class="clearable__clear">×</i>
</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Using only a <input class="clearable" type="text"> (No additional elements)
set a class="clearable" and play with it's background image:
/**
* Clearable text inputs
*/
function tog(v){return v ? "addClass" : "removeClass";}
$(document).on("input", ".clearable", function(){
$(this)[tog(this.value)]("x");
}).on("mousemove", ".x", function( e ){
$(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]("onX");
}).on("touchstart click", ".onX", function( ev ){
ev.preventDefault();
$(this).removeClass("x onX").val("").change();
});
// $('.clearable').trigger("input");
// Uncomment the line above if you pre-fill values from LS or server
/*
Clearable text inputs
*/
.clearable{
background: #fff url(http://i.stack.imgur.com/mJotv.gif) no-repeat right -10px center;
border: 1px solid #999;
padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */
border-radius: 3px;
transition: background 0.4s;
}
.clearable.x { background-position: right 5px center; } /* (jQ) Show icon */
.clearable.onX{ cursor: pointer; } /* (jQ) hover cursor style */
.clearable::-ms-clear {display: none; width:0; height:0;} /* Remove IE default X */
<input class="clearable" type="text" name="" value="" placeholder="" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
The trick is to set some right padding (I used 18px) to the input and push the background-image right, out of sight (I used right -10px center).
That 18px padding will prevent the text hide underneath the icon (while visible).
jQuery will add the class "x" (if input has value) showing the clear icon.
Now all we need is to target with jQ the inputs with class x and detect on mousemove if the mouse is inside that 18px "x" area; if inside, add the class onX.
Clicking the onX class removes all classes, resets the input value and hides the icon.
7x7px gif:
Base64 string:
data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=
Could I suggest, if you're okay with this being limited to html 5 compliant browsers, simply using:
<input type="search" />
JS Fiddle demo
Admittedly, in Chromium (Ubuntu 11.04), this does require there to be text inside the input element before the clear-text image/functionality will appear.
Reference:
Dive Into HTML 5: A form of Madness.
input type=search - search field (NEW) HTML5.
According to MDN, <input type="search" /> is currently supported in all modern browsers:
<input type="search" value="Clear this." />
However, if you want different behavior that is consistent across browsers here are some light-weight alternatives that only require JavaScript:
Option 1 - Always display the 'x': (example here)
Array.prototype.forEach.call(document.querySelectorAll('.clearable-input>[data-clear-input]'), function(el) {
el.addEventListener('click', function(e) {
e.target.previousElementSibling.value = '';
});
});
.clearable-input {
position: relative;
display: inline-block;
}
.clearable-input > input {
padding-right: 1.4em;
}
.clearable-input > [data-clear-input] {
position: absolute;
top: 0;
right: 0;
font-weight: bold;
font-size: 1.4em;
padding: 0 0.2em;
line-height: 1em;
cursor: pointer;
}
.clearable-input > input::-ms-clear {
display: none;
}
<p>Always display the 'x':</p>
<div class="clearable-input">
<input type="text" />
<span data-clear-input>×</span>
</div>
<div class="clearable-input">
<input type="text" value="Clear this." />
<span data-clear-input>×</span>
</div>
Option 2 - Only display the 'x' when hovering over the field: (example here)
Array.prototype.forEach.call(document.querySelectorAll('.clearable-input>[data-clear-input]'), function(el) {
el.addEventListener('click', function(e) {
e.target.previousElementSibling.value = '';
});
});
.clearable-input {
position: relative;
display: inline-block;
}
.clearable-input > input {
padding-right: 1.4em;
}
.clearable-input:hover > [data-clear-input] {
display: block;
}
.clearable-input > [data-clear-input] {
display: none;
position: absolute;
top: 0;
right: 0;
font-weight: bold;
font-size: 1.4em;
padding: 0 0.2em;
line-height: 1em;
cursor: pointer;
}
.clearable-input > input::-ms-clear {
display: none;
}
<p>Only display the 'x' when hovering over the field:</p>
<div class="clearable-input">
<input type="text" />
<span data-clear-input>×</span>
</div>
<div class="clearable-input">
<input type="text" value="Clear this." />
<span data-clear-input>×</span>
</div>
Option 3 - Only display the 'x' if the input element has a value: (example here)
Array.prototype.forEach.call(document.querySelectorAll('.clearable-input'), function(el) {
var input = el.querySelector('input');
conditionallyHideClearIcon();
input.addEventListener('input', conditionallyHideClearIcon);
el.querySelector('[data-clear-input]').addEventListener('click', function(e) {
input.value = '';
conditionallyHideClearIcon();
});
function conditionallyHideClearIcon(e) {
var target = (e && e.target) || input;
target.nextElementSibling.style.display = target.value ? 'block' : 'none';
}
});
.clearable-input {
position: relative;
display: inline-block;
}
.clearable-input > input {
padding-right: 1.4em;
}
.clearable-input >[data-clear-input] {
display: none;
position: absolute;
top: 0;
right: 0;
font-weight: bold;
font-size: 1.4em;
padding: 0 0.2em;
line-height: 1em;
cursor: pointer;
}
.clearable-input > input::-ms-clear {
display: none;
}
<p>Only display the 'x' if the `input` element has a value:</p>
<div class="clearable-input">
<input type="text" />
<span data-clear-input>×</span>
</div>
<div class="clearable-input">
<input type="text" value="Clear this." />
<span data-clear-input>×</span>
</div>
You could use a reset button styled with an image...
<form action="" method="get">
<input type="text" name="search" required="required" placeholder="type here" />
<input type="reset" value="" alt="clear" />
</form>
<style>
input[type="text"]
{
height: 38px;
font-size: 15pt;
}
input[type="text"]:invalid + input[type="reset"]{
display: none;
}
input[type="reset"]
{
background-image: url( http://png-5.findicons.com/files/icons/1150/tango/32/edit_clear.png );
background-position: center center;
background-repeat: no-repeat;
height: 38px;
width: 38px;
border: none;
background-color: transparent;
cursor: pointer;
position: relative;
top: -9px;
left: -44px;
}
</style>
See it in action here: http://jsbin.com/uloli3/63
I've created a clearable textbox in just CSS. It requires no javascript code to make it work
below is the demo link
http://codepen.io/shidhincr/pen/ICLBD
Since none of the solutions flying around really met our requirements, we came up with a simple jQuery plugin called jQuery-ClearSearch -
using it is as easy as:
<input class="clearable" type="text" placeholder="search">
<script type="text/javascript">
$('.clearable').clearSearch();
</script>
Example: http://jsfiddle.net/wldaunfr/FERw3/
If you want it like Google, then you should know that the "X" isn't actually inside the <input> -- they're next to each other with the outer container styled to appear like the text box.
HTML:
<form>
<span class="x-input">
<input type="text" class="x-input-text" />
<input type="reset" />
</span>
</form>
CSS:
.x-input {
border: 1px solid #ccc;
}
.x-input input.x-input-text {
border: 0;
outline: 0;
}
Example: http://jsfiddle.net/VTvNX/
Change the text box type as 'search' in the design mode or
<input type="search">
EDIT: I found this link. Hope it helps. http://viralpatel.net/blogs/2011/02/clearable-textbox-jquery.html
You have mentioned you want it on the right of the input text. So, the best way would be to create an image next to the input box. If you are looking something inside the box, you can use background image but you may not be able to write a script to clear the box.
So, insert and image and write a JavaScript code to clear the textbox.
Use simple absolute positioning - it's not that hard.
jQuery:
$('span').click(function(){
$('input', $(this).parent()).val('');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="position:relative; width:min-content;">
<input>
<span style="position:absolute;right:10px">x</span>
</div>
<div style="position:relative; width:min-content;">
<input>
<span style="position:absolute;right:10px">x</span>
</div>
<div style="position:relative; width:min-content;">
<input>
<span style="position:absolute;right:10px">x</span>
</div>
Vanilla JS:
var spans = document.getElementsByTagName("span");
function clickListener(e) {
e.target.parentElement.getElementsByTagName("input")[0].value = "";
}
for (let i = 0; i < spans.length; i++) {
spans[i].addEventListener("click", clickListener);
}
<div style="position:relative; width:min-content;">
<input>
<span style="position:absolute;right:10px">x</span>
</div>
<div style="position:relative; width:min-content;">
<input>
<span style="position:absolute;right:10px">x</span>
</div>
<div style="position:relative; width:min-content;">
<input>
<span style="position:absolute;right:10px">x</span>
</div>
jQuery Mobile now has this built in:
<input type="text" name="clear" id="clear-demo" value="" data-clear-btn="true">
Jquery Mobile API TextInput docs
Something like this??
Jsfiddle Demo
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.searchinput{
display:inline-block;vertical-align: bottom;
width:30%;padding: 5px;padding-right:27px;border:1px solid #ccc;
outline: none;
}
.clearspace{width: 20px;display: inline-block;margin-left:-25px;
}
.clear {
width: 20px;
transition: max-width 0.3s;overflow: hidden;float: right;
display: block;max-width: 0px;
}
.show {
cursor: pointer;width: 20px;max-width:20px;
}
form{white-space: nowrap;}
</style>
</head>
<body>
<form>
<input type="text" class="searchinput">
</form>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script> <script>
$(document).ready(function() {
$("input.searchinput").after('<span class="clearspace"><i class="clear" title="clear">✗</i></span>');
$("input.searchinput").on('keyup input',function(){
if ($(this).val()) {$(".clear").addClass("show");} else {$(".clear").removeClass("show");}
});
$('.clear').click(function(){
$('input.searchinput').val('').focus();
$(".clear").removeClass("show");
});
});
</script>
</body>
</html>
<form action="" method="get">
<input type="text" name="search" required="required" placeholder="type here" />
<input type="reset" value="" alt="clear" />
</form>
<style>
input[type="text"]
{
height: 38px;
font-size: 15pt;
}
input[type="text"]:invalid + input[type="reset"]{
display: none;
}
input[type="reset"]
{
background-image: url( http://png-5.findicons.com/files/icons/1150/tango/32/edit_clear.png );
background-position: center center;
background-repeat: no-repeat;
height: 38px;
width: 38px;
border: none;
background-color: transparent;
cursor: pointer;
position: relative;
top: -9px;
left: -44px;
}
</style>
You can do with this commands (without Bootstrap).
Array.from(document.querySelectorAll('.search-field')).forEach(field => {
field.querySelector('span').addEventListener('click', e => {
field.querySelector('input').value = '';
});
});
:root {
--theme-color: teal;
}
.wrapper {
width: 80%;
margin: 0 auto;
}
div {
position: relative;
}
input {
background:none;
outline:none;
display: inline-block;
width: 100%;
margin: 8px 0;
padding: 13px 15px;
padding-right: 42.5px;
border: 1px solid var(--theme-color);
border-radius: 5px;
box-sizing: border-box;
}
span {
position: absolute;
top: 0;
right: 0;
margin: 8px 0;
padding: 13px 15px;
color: var(--theme-color);
font-weight: bold;
cursor: pointer;
}
span:after {
content: '\2716';
}
<div class="wrapper">
<div class="search-field">
<input placeholder="Search..." />
<span></span>
</div>
</div>
Here's a jQuery plugin (and a demo at the end).
http://jsfiddle.net/e4qhW/3/
I did it mostly to illustrate an example (and a personal challenge). Although upvotes are welcome, the other answers are well handed out on time and deserve their due recognition.
Still, in my opinion, it is over-engineered bloat (unless it makes part of a UI library).
I have written a simple component using jQuery and bootstrap.
Give it a try: https://github.com/mahpour/bootstrap-input-clear-button
Using a jquery plugin I have adapted it to my needs adding customized options and creating a new plugin. You can find it here:
https://github.com/david-dlc-cerezo/jquery-clearField
An example of a simple usage:
<script src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'></script>
<script src='src/jquery.clearField.js'></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="css/jquery.clearField.css">
<table>
<tr>
<td><input name="test1" id="test1" clas="test" type='text'></td>
<td>Empty</td>
</tr>
<tr>
<td><input name="test2" id="test2" clas="test" type='text' value='abc'></td>
<td>Not empty</td>
</tr>
</table>
<script>
$('.test').clearField();
</script>
Obtaining something like this:
No need to include CSS or image files. No need to include that whole heavy-artillery jQuery UI library. I wrote a lightweight jQuery plugin that does the magic for you. All you need is jQuery and the plugin. =)
Fiddle here: jQuery InputSearch demo.