Set ID as input value on click of an element - javascript

When I click on my link it temporary pops up with the id number of that link.
Question How could I make it so if I click on a link then id would add that id to the input value where id is input[id="language_id"]
Code-preview MY Codepen Example
JQUERY
$(document).ready(function() {
$(".language li a").click(function(event) {
// Test make sure getting id
alert(event.target.id);
});
});
HTML
<div class="container">
<ul class="dropdown-menu language" role="menu">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<br/>
<br/>
</ul>
<form action="" method="post" id="language-form">
<input type="text" name="language" id="language_id" placeholder="Displays ID" value="" />
</form>
</div>

You have elements with the same ID; which is invalid HTML. Change one of them or use classes.
Element.id
It must be unique in a document
For your question use this.id with val(),
$('#language_id').val(this.id) //or event.target.id
Updated Codepen
$(".language li a").click(function() {
$('#language_id').val(this.id)
});

You can change the id of textbox by setting the id attribute of textbox.
$(".language li a").click(function(event) {
document.getElementById('language_id').id = event.target.id;
});

You can do like this
$(document).ready(function() {
$(".language li a").click(function(event) {
// Test make sure getting id
//alert(event.target.id);
$("#language_id").val(event.target.id);
});
});

$(document).ready(function() {
$(".language li a").click(function(event) {
$("#language_id").val(event.target.id);
});
});

your elementid shoud be unique
$(".language li a").click(function(event) {
$("input[id=language_id]").val(event.target.id);
});

To add multiple ids to the control Please give a try to this:
$(document).ready(function() {
$(".language li a").click(function(event) {
var str = $('#language_id').val() + "," + this.id;
$('#language_id').val(str.replace(/^,?/,""));
});
});

Related

A button toggle some <li> from a <ul>

I have this JSFiddle. I have a ul list and some li inside. I want pressind a button to toggle the 2 first li. I tried to put <li class="s1"> and then
$( "button" ).click(function() {
$("ul.s1").click(function() {
$(this).slideToggle(300);
return false;
});
});
<button>button</button>
<ul>
<li class="s1">1</li>
<li class="s1">1</li>
<li>9023698</li>
<li>8993127</li>
<li>9037891</li>
</ul>
but nothing happens..
Firstly, you don't need to give the li their own click event if you want them to slide on click of the button. Secondly, the selector for the li elements is incorrect. Thirdly the jsFiddle you setup didn't include jQuery. Try this:
$("button").click(function () {
$("ul .s1").slideToggle(300);
});
Example fiddle
$( "button" ).click(function() {
$("ul .s1").slideToggle(300);
return false;
});
A space between ul and class should fix it.
And you don't need the click handler for list element.

How to find each li from Div and how to get text of each <li> tag?

I am using below Html code and I want to get all the <li> tags from the <div id="divSelect"> and I want to get text from all li tags.
Please help , how to use .each() and .find() using JQuery.
Thanks
Hey I have used your html and wrote a jQuery function which is using .each and .find to fetch all the li from the DIV.
we should use .find where we can use, its recommened by jQuery.(its performance is good if it is user wisely)
html code:-
<div id="divSelect" class="custom dropdown">
<ul>
<li>text 1</li>
<li>text 2</li>
<li>text 3</li>
</ul>
</div>
and javascript code is:-
$("#divSelect").find("li").each(function()
{
var $li=$(this);
alert($li.text())
});
thanks
To get them in array,You can use:
var alllitexts=$('#divSelect ul li').map(function(){
return $(this).html();
}).get();
using each and getting them individually:
$("#divSelect ul li").each(function(){
alert($(this).html());
});
$("#divSelect > ul > li").text();
With this you get text from all li elements.
fiddle
try this:
var liText='';
$('#divSelect ul li').each(function(){
liText+=$(this).html();
});
liText will contain all the "li"s texts.
This can be achieved by
$("#divSelect ul li").each(function(index){
alert ( index + ": " + $( this ).text() );
});
$("#divSelect").find("li").each(function(){
alert($(this).html());
});
Use map in jquery to collect all data ,this.outerHTML in javascript to return the html element
var data=$("#divSelect ul li").map(function(){
return this.outerHTML;
}).get();
alert(data);
DEMO

jQuery Updating Class on Parent Item

I have the following layout:
<ul id="header">
<li id="item1" class="off"> <a>Abc</a> </li>
<li id="item2" class="off"> <a>Abc</a> </li>
</ul>
When I click on a href as in the <a> I want the class in the <li> for that to be updated.
I've tried the following with no luck:
$(".header > li a").click(function(){
$(".header li a.current").removeClass("off");
$(this).addClass("on");
});
Any ideas?
--EDIT:
Ok i just realized I'm not looking at this correctly.
So when clicking on that link a new page loads. So using the click function is wrong because a new page loads so whatever changes to the class i have will be lost. What i therefore need is to use the $(document).ready(function() to say something like "I clicked on li with id from the previous page so now update that class"
So
Thanks!
You can use closest() to get the parent li and then add the class:
$(this).closest("li").addClass("on");
you also need to use id selector $("#header") not class selector $(".header"):
$("#header > li a").click(function(){
$("#header li a.current").removeClass("off");
$(this).closest("li").addClass("on");
});
FIDDLE DEMO
USe
$(".header > li a").click(function(){
$(".on").removeClass("on");
$(this).closest("li").addClass("on");
});
Working fiddle http://jsfiddle.net/LDC69/1/
$("#header > li a").click(function(){
$(this).parent().removeClass("off").addClass("on");
});
Its events chaining.
Look li is ID not CLASS.
Demo
Your selector is wrong $(".header") . In your html code <ul id="header"> so you have to use id selector $("#header")
$("#header li a").click(function (e) {
e.preventDefault();
$(this).parent().siblings().removeClass("on").addClass("off"); // Remove all class on and added off class
$(this).parent().removeClass("off").addClass("on"); // Select current parent element and remove off and added on class
});

"Hide" li on click

fiddle
I have in index.html:
<div data-role="fieldcontain" id="Container">
<ul id="my_ul" data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Text" data-inset="true">
<li class="ui-screen-hidden">12</li>
<li class="ui-screen-hidden">123</li>
<li class="ui-screen-hidden">1234</li>
</ul>
</div>
js:
$("#my_ul li").click(function() {
$('#Container form input').val($(this).text());
//$(this).hide();
});
So, when I click on li, the text from li go to the input. If I use hide - that element dont apears, when I delete a sting in input.
I need - click on li, text from li apears in input, all dropdown li hides, but if I deleted string from input, li apears. How to do that?
Thanks.
You may try this (To hide the list items after selection)
$("#my_ul li").click(function() {
$('#Container form input').val($.trim($(this).text()));
$('#my_ul').children().addClass('ui-screen-hidden');
});
DEMO.
Hacky solution is to deal with hiding and showing the ul yourself.
Fiddle: http://fiddle.jshell.net/Qyvhc/8/
$("#my_ul li").click(function() {
$('#Container form input').val($(this).text());
$("#my_ul").hide();
});
$('#Container form input').on('focus', function () {
$("#my_ul").show();
});
I doubt it's the best solution but I can't see anything in the API docs that would achieve this.
I'm pretty new into JQuery but hope this is what you wanted.
Demo

jquery add li to end of ul but last created li not recognised as last

I have the following code. On cliking the button on the last li, I can create the new li. However, once created, if I click on the latest button created, new li is created. It seems it doesn`t recognise the last created li as the last li. Can someone help on this please.
<html xmlns="http://www.w3.org/1999/xhtml" >
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#mylist :button").click(function() {
var text = $(this).val();
if (text == "Save") {
}
});
$("#mylist li:last-child").click(function() {
$(this).parent().append('<li>' + '<input type = "textbox">' + '<input type = "button" value= "Save">' + '</li>');
});
});
</script>
<div>
<ul id="mylist">
<li id="1">1<button id="Button3">Delete</button> </li>
<li id="2">2<button id="Button2">Delete</button></li>
<li id="3">3<button id="another_entry">Save</button></li>
</ul>
<ul id="mylist2">
<li> test1 <button id="Button6">Delete</button></li>
<li> test2<button id="Button5">Delete</button> </li>
<li id="6"><button id="Button1">Delete</button></li>
</ul>
</div>
You need to use live instead of bind as bind iterates elements only once, however live creates a listener, which attaches events dynamically, even to newly created elements.
You code should conform to this sample:
$("#mylist li:last-child")
.live('click', function() {
// append element
});
tested with jQuery 1.4.0
Instead of:
$(this).parent().append('<li>'.........
Try
$("#mylist").append('<li>'.........

Categories

Resources