I am attempting to handle the click of a button in javascript/jquery. I am having an issued getting the trigger to fire. I have gleaned previous questions in hoping to find an answer, but have been unsuccessful thus far.
Below is my code to show one button and handle the click of the button. When the user clicks the button, the code should be catching the click event, but it is not.
I have debugged the code and set a breakpoint on the on click event. The breakpoint is never hit. I have trimmed the code down to a minimum example.
What am I missing regarding getting the on click event to fire?
I have included the entire file, including the html, in case I am missing something there.
<!DOCTYPE html>
<HTML>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<TITLE>Test</TITLE>
<link rel="stylesheet" href="<?= HOST_ADDRESS ?>/stylesheets/jquery-ui.min.css" />
<STYLE TYPE="TEXT/CSS">
.clear { clear: both; }
html {
background: #e9e9e9;
font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
font-size: 1em;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0 auto;
padding: 0;
width: 100vw;
}
#btn_area {
padding-top:15px;
padding-bottom:0px;
}
.ui-widget-header {
border: 0px !important;
}
.ui-button {
width:110px !important;
height:30px !important;
font-size: 16px;
color:#4c4c4c;
}
</STYLE>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<SCRIPT>
$( document ).ready(function() {
$('#header_wrapper').addClass('ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all');
$('#send1').on('click', function() {
aaa = true;
});
});
</SCRIPT>
<BODY>
<div>
Test Window
</div>
<div class="button_wrapper">
<div id="btn_area">
<div style="text-align:center;">
<input type="button" id="send1" name="send1" style="font-size:large" class='ui-button ui-widget ui-state-default ui-corner-all' value="Send">
</div>
</div>
</div>
</BODY>
</HTML>
I have tried running the code in a LAMP stack and a MAMP stack and get the same results.
What is aaa in your script? - Anyway, I've copied your code to a snippet below, as you can see the click is being received.
$( document ).ready(function() {
$('#send1').on('click', function() {
//RUN YOUR FUNCTION IN HERE.
});
});
$( document ).ready(function() {
//declare aaa
var aaa = false
$('#send1').on('click', function() {
//aaa will be true after button is clicked
aaa = true;
if (aaa = "true") {
console.log('aaa is now true')
}
});
});
.clear { clear: both; }
html {
background: #e9e9e9;
font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
font-size: 1em;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0 auto;
padding: 0;
width: 100vw;
}
#btn_area {
padding-top:15px;
padding-bottom:0px;
}
.ui-widget-header {
border: 0px !important;
}
.ui-button {
width:110px !important;
height:30px !important;
font-size: 16px;
color:#4c4c4c;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="#header_wrapper">
Test Window
</div>
<div class="button_wrapper">
<div id="btn_area">
<div style="text-align:center;">
<input type="button" id="send1" name="send1" style="font-size:large" class='ui-button ui-widget ui-state-default ui-corner-all' value="Send">
</div>
</div>
</div>
i'm trying to create a "chat" on my website, i wrote question and answer in html (radio) e hide them when not selected with js, also after the first selection the script hide the other radio and disable the selected one. Probably i should simplify the all code but i'm kind a noob with Js. There's a more simple way to achieve the same result? Should I convert it in php? Anyone can help?
Thanks a lot
<!DOCTYPE html>
<html>
<head>
<title>progettodont</title>
<style type="text/css">
.classQuestion {
margin: 10px;
padding: 10px;
border-radius: 7px;
color: #fff;
background-color: #119b97;
display: inline-block;
max-width: 700px;
}
.classAnswerActive {float: right;}
.divClassAnswer {text-align: center}
.classAnswer { margin: 10px;
padding: 10px;
border-radius: 7px;
color: #414042;
background-color: #ccc;
max-width: 700px;
display: inline-block;
}
.classRadio {display: none;}
</style>
</head>
<body>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('.classAnswer').click(function(){
$('.classAnswer').not(this).hide();
});
});
</script>
<script>
$(document).ready(function () {
$('.classAnswer').on('click', function () {
$('.classAnswer').addClass('classAnswerActive');
});
});
</script>
<div class="classQuestion">QUESTION 1_1</div>
<div class="divClassAnswer">
<label for="idAnswer_1_1" class="classAnswer">ANSWER 1_1</label>
<input type="radio" name="nameAnswer_1_1" class="classRadio"
id="idAnswer_1_1" value="Answer_1_1">
<label for="idAnswer_1_2" class="classAnswer">ANSWER 1_2</label>
<input type="radio" name="nameAnswer_1_2" class="classRadio"
id="idAnswer_1_2" value="Answer_1_2">
<label for="idAnswer_1_3" class="classAnswer">ANSWER 1_3</label>
<input type="radio" name="nameAnswer_1_3" class="classRadio"
id="idAnswer_1_3" value="Answer_1_3">
</div>
<script type="text/javascript">
$(function () {
$("#idAnswer_1_1").click(function () {
if ($(this).is(":checked")) {
$("#idQuestion_2_1").show();
} else {
$("#idQuestion_2_1").hide();
}
});
});
</script>
<div class="classQuestion" id="idQuestion_2_1" style="display: none">
QUESTION 2_1
</div>
<script type="text/javascript">
$(function () {
$("#idAnswer_1_2").click(function () {
if ($(this).is(":checked")) {
$("#idQuestion_2_2").show();
} else {
$("#idQuestion_2_2").hide();
}
});
});
</script>
<div class="classQuestion" id="idQuestion_2_2" style="display: none">
QUESTION 2_2
</div>
<script type="text/javascript">
$(function () {
$("#idAnswer_1_3").click(function () {
if ($(this).is(":checked")) {
$("#idQuestion_2_3").show();
} else {
$("#idQuestion_2_3").hide();
}
});
});
</script>
<div class="classQuestion" id="idQuestion_2_3" style="display: none">
QUESTION 2_3
</div>
</body>
I don't know what this has to do with a 'chat' system, however you can make several improvements to your code:
You're including multiple versions of jQuery. Only include a single one.
Place all script within a single <script> in the page, and place any jQuery code in that within a single document.ready event handler.
Use a common class to group the radio elements. Then you can bind a single event handler to that class. You can use a data attribute to store custom meta data about the element which you can then use in the event handler.
Try this:
$(document).ready(function() {
$('.classAnswer').click(function() {
$('.classAnswer').not(this).hide();
$(this).addClass('active');
});
$(".classRadio").on('change', function() {
$('#' + $(this).data('target')).toggleClass('active', this.checked);
});
});
.classQuestion {
margin: 10px;
padding: 10px;
border-radius: 7px;
color: #fff;
background-color: #119b97;
display: inline-block;
max-width: 700px;
display: none;
}
.classQuestion.active { display: inline-block; }
.divClassAnswer {
text-align: center
}
.classAnswer {
margin: 10px;
padding: 10px;
border-radius: 7px;
color: #414042;
background-color: #ccc;
max-width: 700px;
display: inline-block;
}
.classAnswer.active {
float: right;
}
.classRadio {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="classQuestion active">QUESTION 1_1</div>
<div class="divClassAnswer">
<label for="idAnswer_1_1" class="classAnswer">ANSWER 1_1</label>
<input type="radio" name="nameAnswer_1_1" class="classRadio" id="idAnswer_1_1" value="Answer_1_1" data-target="idQuestion_2_1">
<label for="idAnswer_1_2" class="classAnswer">ANSWER 1_2</label>
<input type="radio" name="nameAnswer_1_2" class="classRadio" id="idAnswer_1_2" value="Answer_1_2" data-target="idQuestion_2_2">
<label for="idAnswer_1_3" class="classAnswer">ANSWER 1_3</label>
<input type="radio" name="nameAnswer_1_3" class="classRadio" id="idAnswer_1_3" value="Answer_1_3" data-target="idQuestion_2_3">
</div>
<div class="classQuestion" id="idQuestion_2_1">QUESTION 2_1</div>
<div class="classQuestion" id="idQuestion_2_2">QUESTION 2_2</div>
<div class="classQuestion" id="idQuestion_2_3">QUESTION 2_3</div>
I'm trying to create a program where the user will input some text in a field and when pressing "Start" the text will go to a paragraph but it will be shown backwards.
Trying to do this with Html,jquery and Css.
How can I do this?
Here's the Html:
<!DOCTYPE html>
<html id="head">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="BackTalk.js"></script>
<link rel="stylesheet" type="text/css" href="BackTalk.css">
<title>BackTalk</title>
</head>
<body id="body">
<div id="Main">
<form>
<input id="input" type="number" value="Start">
<button id="input2" onclick="">Start</button>
</form>
</div>
<form id="frm">
<p id="para"></p>
</form>
</body>
</html>
And the $/javascript (Main part I need help with as you can see):
$(document).ready(function () {
$('#input2').click(function () {
});
});
Css (Don't know if needed):
#head {
}
#body {
background-image: url('stardust.png');
}
#Main {
width: 230px;
padding: 10px;
border: 1px double #ffffff;
border-radius: 10px;
margin: auto;
}
#frm {
width: 230px;
height: 500px;
padding: 10px;
border: 1px double #ffffff;
border-radius: 10px;
margin: auto;
}
#input {
border-radius: 10px;
}
#input2 {
border-radius: 10px;
}
Try this http://jsfiddle.net/Tushar490/th778nfs/
$('#input2').click(function () {
var value=$('#input').val();
console.log($('#para').text(value.split("").reverse().join("")));
});
Not sure if this is exactly what you're looking for:
$(document).ready(function () {
$('#startbutton').click(function () {
$('#para').text($('#input').val().split('').reverse().join(''));
});
});
JSFiddle
I was trying to create a Gmail Contextual Gadget and get to know that it doesn't support referencing JS and CSS files. It doesn't load Javascripts and CSS. I have to copy paste the whole CSS and Javascript then only it works.
Please find my code below : It is just to display tabbed layout in gadget.
<link href="http://54.251.60.219/staging/google/gadget_ui/css/smoothness/jquery-ui-1.10.3.custom.css" rel="stylesheet">
<script src="http://54.251.60.219/staging/google/gadget_ui/js/jquery-1.9.1.js"></script>
<script src="http://54.251.60.219/staging/google/gadget_ui/js/jquery-ui-1.10.3.custom.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
// Hover states on the static widgets
$( "#dialog-link, #icons li" ).hover(
function() {
$( this ).addClass( "ui-state-hover" );
},
function() {
$( this ).removeClass( "ui-state-hover" );
}
);
});
function showList(){
$('#cust-list').show();
}
function save(){
if(!$('input[name=customer]:checked').length)
alert('You need to select a customer to save an email.');
}
</script>
<style>
#main {
margin: 0px;
padding: 0px;
font-size: small;
}
</style>
<!-- <div id="main" style="display: none">
</div>
<div id="approval" style="display: none">
<img src="http://gadget-doc-examples.googlecode.com/svn/trunk/images/new.gif">
Personalize this gadget
</div>
<div id="waiting" style="display: none">
Please click
I've approved access
once you've approved access to your data.
</div> -->
<div id="loadinggadget"><h2>PS NetSuite Gadget</h2></div>
<style>
body{
font: 62.5% "Trebuchet MS", sans-serif;
margin: 50px;
}
.demoHeaders {
margin-top: 2em;
}
#dialog-link {
padding: .4em 1em .4em 20px;
text-decoration: none;
position: relative;
}
#dialog-link span.ui-icon {
margin: 0 5px 0 0;
position: absolute;
left: .2em;
top: 50%;
margin-top: -8px;
}
#icons {
margin: 0;
padding: 0;
}
#icons li {
margin: 2px;
position: relative;
padding: 4px 0;
cursor: pointer;
float: left;
list-style: none;
}
#icons span.ui-icon {
float: left;
margin: 0 4px;
}
.fakewindowcontain .ui-widget-overlay {
position: absolute;
}
</style>
<!-- Tabs -->
<div id="tabs">
<ul>
<li>Login</li>
<li>Customers</li>
</ul>
<div id="tabs-1">
<table cellpadding='0' cellspacing='0' border='0' width='100%'>
<tr><td bgcolor="white" style="padding:5"><br>
<form method="post" action="#" name="aform" target="_top">
<table>
<tr><td><font face="verdana,arial" size=-1>Login:</font></td><td><input type="text" name="login"></td></tr>
<tr><td><font face="verdana,arial" size=-1>Password:</font></td><td><input type="password" name="password"></td></tr>
<tr><td><font face="verdana,arial" size=-1>Account Id:</font></td><td><input type="text" name="accid"></td></tr>
<tr><td><font face="verdana,arial" size=-1> </font></td><td><font face="verdana,arial" size=-1><input type="submit" value="Save"></font></td></tr>
<tr><td colspan=2><font face="verdana,arial" size=-1> </font></td></tr>
</table>
</form>
</td></tr></table>
</div>
<div id="tabs-2">
<button onclick="showList()"/>Get Customers</button>
<button onclick="save()"/>Save To NetSuite</button>
<div id="cust-list" style="display:none">
<input type="radio" name="customer" value="cust1"> Customer </input><br/>
<input type="radio" name="customer" value="cust1"> Customer </input><br/>
<div>
</div>
</div>
<script type="text/javascript">
gadgets.window.adjustHeight(200);
function initGadget() {
gadgets.window.adjustHeight(200);
}
gadgets.util.registerOnLoadHandler(initGadget);
</script>
]]>
I am getting error : "$ is not defined". But this code works in plain HTML file.
Thanks in advance.
Perhaps your web site uses another library. Try use "jQuery" instead of "$"
Well, #aayushi... gadget container doesn't allow to load files from unsecured http. In your code you are loading files using http
<script src="http://54.251.60.219/staging/google/gadget_ui/js/jquery-1.9.1.js"></script>
Instead of that try using https
<script src="https://54.251.60.219/staging/google/gadget_ui/js/jquery-1.9.1.js"></script>
And if your server/application/project is not using https, then you have to make it first.
And just to be sure of this solution try loading this for jquery and/or for any other library files like: bootstrap, jquery-ui, etc.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
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.