How to pass <li>text without replace the text on textbox - javascript

I got school homework for today. I can pass the emoji to a textbox already but it will replace the previous emoji or text on the textbox if clicked. I want to know how to not replace the textbox text if I clicked and able to keep input emoji or text. Sorry for my bad english if you guys don't understand.
$(document).ready(function () {
$("ul").hide();
$("input.btnemoji").click(function () {
$("ul").toggle();
$("ul.emoji li").click(function () {
$("#ToSend").val($(this).text());
});
});
});
<asp:Textbox id="ToSend" runat="server" Width="300px"></asp:Textbox>
<input type="button" class="btnemoji" value="😀" />
<ul class="emoji">
<li>😀</li>
<li>😂</li>
<li>😎</li>
<li>😍</li>
<li>😁</li>
</ul>

To add to the existing value you need to append to the val() in the input instead of replacing it each time. To do this you can pass a function to the val() method which handles the appending for you, like this:
$(document).ready(function() {
$("ul").hide();
$("input.btnemoji").click(function() {
$("ul").toggle();
});
$("ul.emoji li").click(function() {
var $li = $(this);
$("#ToSend").val(function(i, v) {
return v + $li.text();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="ToSend" width="300px">
<input type="button" class="btnemoji" value="😀" />
<ul class="emoji">
<li>😀</li>
<li>😂</li>
<li>😎</li>
<li>😍</li>
<li>😁</li>
</ul>
Also note that I moved the $("ul.emoji li").click() handler outside of the one for .btnemoji as you were repeatedly adding new event handlers each time the ul was toggled.

Here is the shortest method. All you need is to use this:
$("#ToSend").val($("#ToSend").val()+$(this).text());
$(document).ready(function () {
$("ul").hide();
$("input.btnemoji").click(function () {
$("ul").toggle();
});
$("ul.emoji li").click(function () {
$("#ToSend").val($("#ToSend").val()+$(this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="ToSend"/>
<input type="button" class="btnemoji" value="😀" />
<ul class="emoji">
<li>😀</li>
<li>😂</li>
<li>😎</li>
<li>😍</li>
<li>😁</li>
</ul>

$("#ToSend").append($(this).text());
User append function without using

Related

How to replicate function on similar divs with same function

If I have li which contains a function (duplicate on keyup), how can I replicate that same function to a clone of that same li.
this is the element (li, better said), which will be constantly duplicated
<li class="main-item">
<div class="header-item fwidth">
<div>
<h1 class="duplicado fleft"></h1>
</div>
</div>
<div id="internal-items-2" class="collapse collapsible-item">
<div>
<input type="text" value="" class="duplicante nombre-item">
</div>
</div>
</li>
this is the duplicate on keyup function, which produces text on the H1 element according to what is written on the input
$(function() {
$('.duplicante').on('keyup', function() {
var text = $(this).val();
$('.duplicado').text(text);
});
});
How to make that function works for each duplicated li element?
Fiddle example
If I understand correctly, what you want is to updated the individual headers upon keyup.
One way to do it would be like this:
$(function() {
$('.duplicante').on('keyup', function() {
var text = $(this).val();
$(this).closest('li').find('.duplicado').text(text);
});
});
here is the fiddle:
http://jsfiddle.net/s16vds6n/1/

Fire click event of li before hiding ul

I have a textbox and then an unordered list like below:
<div>
<input type="text" />
<button>Go</button>
</div>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
Now in the blur event of textbox:
$('input').on('blur', function() {
$('ul').hide();
});
The above code works just fine.
I am trying to make something like combobox.
So, my desired behavior is :
When Textbox loses focus, suggestions should hide (which is shown above)
When Clicked on a suggestion, its click event should fire and then text of that suggestion should be filled in textbox and then all suggestions should hide
So, for the second functionality, when I click on any li the click event of li should fire and then ul should be hidden.
var items = ["Apple", "Banana", "Celery", "Peach", "Plum"];
$('input').on('input', function() {
var text = $(this).val();
$('ul').show().empty().append(items.filter(function(item) {
return item.match(new RegExp(text, 'i'));
}).map(function(text) {
return $('<li>').text(text);
}));
});
$('input').on('blur', function() {
$('ul').fadeOut();
});
$('ul').on('click', 'li', function() {
$('input[type=text]').val($(this).text());
$('ul').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<input type="text" />
<button>Go</button>
</div>
<ul>
</ul>
Simply update the textbox and then hide the ul within the same click event of the li.
$("li").on("click", function() {
$("input[type=text]").val(this.text());
$("ul").hide();
});
Sorry if the jQuery isn't perfect--I don't use it that often. This should help, anyway.

How to show alert when / if input value live change using jquery?

I am trying to show alert if input value change. I am using jQuery, so here is a demo what i am trying to do but alert not showing / not working. Thanks
$(".d1, .d2").click( function (e) {
var $this = $(this);
$(".input").attr('value', $this.text());
});
$(".input").change( function() {
alert(this.value);
});
.d1, .d2 {cursor:pointer;border:1px solid black;margin-top:10px;padding:5px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input class="input" value="" /><p/>
<a class="d1">Demo 1</a>
<a class="d2">Demo 2</a>
You need to use .val() method to set value of inputelement, Since you are using the change event in input on programatically changing the value it will not execute. You need to use .trigger(event)
Execute all handlers and behaviors attached to the matched elements for the given event type.
$(".d1, .d2").click( function (e) {
var $this = $(this);
$(".input").val($this.text()).trigger('change');
});
$(".input").change( function() {
alert(this.value);
});
.d1, .d2 {cursor:pointer;border:1px solid black;margin-top:10px;padding:5px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input class="input" value="" /><p/>
<a class="d1">Demo 1</a>
<a class="d2">Demo 2</a>

jquery script to select previous brother

hi im using jquery mobile this is the code
<form class="ui-filterable">
<input id="filterBasic-input" data-type="search">
</form>
<div data-role="collapsible">
<h2><span>paris</span><span class="pays">france</span>
<a class="gene02"data-role="button" data-inline="true" data-mini="true">generique</a></h2>
<p>code:24</p>
</div>
</li>
<li>
<div data-role="collapsible">
<h2><span>marakeche</span>
<span class="pays">maroc</span>
<a class="gene02"data-role="button" data-inline="true" data-mini="true">generique</a>
</h2>
<p>code:3300</p>
</div>
</li>
i want wen i click on class="gene02" it will take a valu of a precedent span with class pays and put it on a form class="ui-filterable" i try to do this form class ui-filterable
$(document).ready(function () {
$(".gene02").click(function () {
$("#filterBasic-input").val($(".pays").html());
});
});
but it only select france not maroc in second div . thx for help
You can get it like:
$(".gene02").click(function()
{
var $brotha = $(this).parent().find(".pays");
//$brotha is your element
});
http://jsfiddle.net/p7ENh/
http://jsfiddle.net/p7ENh/1/
$(".gene02").click(function () {
$("#filterBasic-input").val($(this).prevAll(".pays").html());
});
If it's always the first previous sibling you can also use $(this).prev() instead.
Basically from a class selector or a collection of elements, if you access any of its properties/values, it will return the value of the first one in the collection only.
Try,
$(document).ready(function() {
$(".gene02").click(function() {
var xOutput = '';
$('.pays').each(function(){ xOutput += $(this).html(); });
$("#filterBasic-input").val(xOutput);
});
});
$(document).ready(function() {
$(".gene02").click(function() {
$("#filterBasic-input").val($(this).closest('div').find('.pays').html());
});
});

Selecting part of text from list item for the text box

I have following code for the textbox:
<label>Enter the doctor id</label>
<input type="text" autocomplete="on" name="dr_id" id="user_id" class="user_name" >
I want to add the string after '-' to the text box.For eg: for Dr. Prashant Salunke-dr.salunke .I must only have dr.salunke in the text box as it is after '-'. I have written some code given below:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
$('#list li').click(function()
{
var arr=$(this).text().split('-');
$('#user_id').val($(arr[1]).text());
});
});
</script>
List of doctors<br />
<div class="slidingDiv">
<ul id="list">
<li style="cursor:hand;">Dr.Prashant Salunke - dr.salunke.</li>
<li style="cursor:hand;">Dr.Kalam - dr.apj</li>
<li style="cursor:hand;">Dr.Manmohan Singh - dr.economics</li>
</ul>
</div>
</div>
But it is not working. Please suggest some solution.
The arr[1] value does not need to be converted to a jQuery object. You can use it as it is to set the val() of the input, although using $.trim to remove leading/trailing spaces may help:
$('#list li').click(function() {
var arr = $(this).text().split('-');
$('#user_id').val($.trim(arr[1]));
});
You can do this:
$('#list li').click(function () {
var arr = $(this).text().split('-');
$('#user_id').val(arr[1]);
// arr returns ["Dr.Prashant Salunke ", " dr.salunke."]
// arr[1] returns dr.salunke.
});
As, arr[1] has already the text value, there is no need to do $(arr[1]).text() for getting the text value from it.

Categories

Resources