[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

javascipt get data from list

Posted on 2014-07-15
5
Medium Priority
?
262 Views
Last Modified: 2014-07-16
Hi,

i am creating a chat function and i would like to know if it is possible for a user to click a list item and have it :
1) update the list class with "active"
2) get an id from within the li and put it into a form input
3) if the user clicks the list item again it removes the class and removes the value from the form
4) have the ability to click multiple list items

my HTML
<ul class="inbox" id="chat-inbox" tabindex="5002" style="overflow: hidden; outline: none;">
			  <li><input type="text" class="form-control" placeholder="Search..."></li>
			  <li><h5>Available Users</h5></li>
			  
			  <li>
				<a href="#" class="unread" id="msg" onclick="">  
				  <div class="media">
					<div class="pull-left">
					  <img class="media-object img-circle" src="//www.bushbrigade.com/profile/images/profile_pics/201308161747555930435525.jpg">
					</div>
					<div class="media-body">
					  <p class="media-heading">Blackout Menace 
					  	<span class="badge badge-greensea" id="msg_badge"></span> 
						<span class="time"></span>
					  </p>
					  <span class="message"></span>
					  
					</div>
				  </div>
				</a>
			  </li>
		  
			  <li>
				<a href="#" class="unread" id="msg" onclick="">  
				  <div class="media">
					<div class="pull-left">
					  <img class="media-object img-circle" src="//www.bushbrigade.com/profile/images/profile_pics/2013081313375222043321200.jpg">
					</div>
					<div class="media-body">
					  <p class="media-heading">Bush Munster 
					  	<span class="badge badge-greensea" id="msg_badge"></span> 
						<span class="time"></span>
					  </p>
					  <span class="message"></span>
					  
					</div>
				  </div>
				</a>
			  </li>
		  
			  <li>
				<a href="#" class="unread" id="msg" onclick="">  
				  <div class="media">
					<div class="pull-left">
					  <img class="media-object img-circle" src="//www.bushbrigade.com/profile/images/profile_pics/20140428211915101225556174.jpg">
					</div>
					<div class="media-body">
					  <p class="media-heading">Daisy Duke 
					  	<span class="badge badge-greensea" id="msg_badge"></span> 
						<span class="time"></span>
					  </p>
					  <span class="message"></span>
					  
					</div>
				  </div>
				</a>
			  </li>
		  
			  <li>
				<a href="#" class="unread" id="msg" onclick="">  
				  <div class="media">
					<div class="pull-left">
					  <img class="media-object img-circle" src="//www.bushbrigade.com/profile/images/profile_pics/expert-exchange-ee_logo.png">
					</div>
					<div class="media-body">
					  <p class="media-heading">Expert-test 
					  	<span class="badge badge-greensea" id="msg_badge"></span> 
						<span class="time"></span>
					  </p>
					  <span class="message"></span>
					  
					</div>
				  </div>
				</a>
			  </li>
		  
			  <li>
				<a href="#" class="unread" id="msg" onclick="">  
				  <div class="media">
					<div class="pull-left">
					  <img class="media-object img-circle" src="//www.bushbrigade.com/profile/images/profile_pics/2013073114012237766385051.jpg">
					</div>
					<div class="media-body">
					  <p class="media-heading">Gorilla 
					  	<span class="badge badge-greensea" id="msg_badge"></span> 
						<span class="time"></span>
					  </p>
					  <span class="message"></span>
					  
					</div>
				  </div>
				</a>
			  </li>
		  
			  <li>
				<a href="#" class="unread" id="msg" onclick="">  
				  <div class="media">
					<div class="pull-left">
					  <img class="media-object img-circle" src="//www.bushbrigade.com/profile/images/profile_pics/2014012510464991945168203.png">
					</div>
					<div class="media-body">
					  <p class="media-heading">Jooombee 
					  	<span class="badge badge-greensea" id="msg_badge"></span> 
						<span class="time"></span>
					  </p>
					  <span class="message"></span>
					  
					</div>
				  </div>
				</a>
			  </li>
		  
			  <li>
				<a href="#" class="unread" id="msg" onclick="">  
				  <div class="media">
					<div class="pull-left">
					  <img class="media-object img-circle" src="//www.bushbrigade.com/profile/images/profile_pics/mikemike-sea-kitten-elaphabbie11.jpg">
					</div>
					<div class="media-body">
					  <p class="media-heading">Mikemike 
					  	<span class="badge badge-greensea" id="msg_badge"></span> 
						<span class="time"></span>
					  </p>
					  <span class="message"></span>
					  
					</div>
				  </div>
				</a>
			  </li>
		  
	  		</ul>

Open in new window


to clarify i want this:
<a href="#" class="unread" id="msg" onclick="">
 
updated to on first click and reverts back on second click
<a href="#" class="active" id="msg" onclick="">  

i would like
 <p class="media-heading">Mikemike (username)

added to a form input with id "msg_to"

i hope this is clear.

thanks in advance
0
Comment
Question by:J N
  • 2
  • 2
5 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40199137
It's not that clear what you are trying to do. First, you can't have multiple elements with the same id on a page. also, get rid of the onlick event from the anchor tags

when you say multiple selection, what happens to the input field? multiple names? Or are there multiple input fields, one for each list item?

here's an example of toggling the classes, and input field data.

http://jsfiddle.net/67DBx/6/
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40199159
Just playing with this over breakfast. You did not include the jQuery zone so I kept it pure javascript. Take from it what you will.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script>
var names = [];
function changeClass(ele) {
	var insideP = ele.getElementsByTagName("p");
	if (ele.className === "unread") {
		ele.className = "active";
		if (insideP[0].className === "media-heading") {
			names.push(insideP[0].textContent.substr(0, insideP[0].textContent.indexOf("\n")-1));
		}
	} else {
		ele.className = "unread";
		if (insideP[0].className === "media-heading") {
			removeName(insideP[0].textContent.substr(0, insideP[0].textContent.indexOf("\n")-1));
		}
	}
	var inputVal = "";
	for (k=0; k<names.length; k++) {
		inputVal += names[k] + ", ";
	}
	document.getElementById("myInput").value = inputVal;
}
function removeName(name) {
	var temp = [];
	for (i=0; i<names.length; i++) {
		if (names[i] !== name) {
			temp.push(names[i]);
		}		
	}
	names = temp;
}
</script>
</head>

<body>
<input id="myInput" type="text" value="" style="width:500px" />
<ul class="inbox" id="chat-inbox" tabindex="5002" style="overflow: hidden; outline: none;">
			  <li><input type="text" class="form-control" placeholder="Search..."></li>
			  <li><h5>Available Users</h5></li>
			  
			  <li>
				<a href="#" class="unread" id="msg" onclick="changeClass(this)">  
				  <div class="media">
					<div class="pull-left">
					  <img class="media-object img-circle" src="//www.bushbrigade.com/profile/images/profile_pics/201308161747555930435525.jpg">
					</div>
					<div class="media-body">
					  <p class="media-heading">Blackout Menace 
					  	<span class="badge badge-greensea" id="msg_badge"></span> 
						<span class="time"></span>
					  </p>
					  <span class="message"></span>
					  
					</div>
				  </div>
				</a>
			  </li>
		  
			  <li>
				<a href="#" class="unread" id="msg" onclick="changeClass(this)">  
				  <div class="media">
					<div class="pull-left">
					  <img class="media-object img-circle" src="//www.bushbrigade.com/profile/images/profile_pics/2013081313375222043321200.jpg">
					</div>
					<div class="media-body">
					  <p class="media-heading">Bush Munster 
					  	<span class="badge badge-greensea" id="msg_badge"></span> 
						<span class="time"></span>
					  </p>
					  <span class="message"></span>
					  
					</div>
				  </div>
				</a>
			  </li>
		  
			  <li>
				<a href="#" class="unread" id="msg" onclick="changeClass(this)">  
				  <div class="media">
					<div class="pull-left">
					  <img class="media-object img-circle" src="//www.bushbrigade.com/profile/images/profile_pics/20140428211915101225556174.jpg">
					</div>
					<div class="media-body">
					  <p class="media-heading">Daisy Duke 
					  	<span class="badge badge-greensea" id="msg_badge"></span> 
						<span class="time"></span>
					  </p>
					  <span class="message"></span>
					  
					</div>
				  </div>
				</a>
			  </li>
		  
			  <li>
				<a href="#" class="unread" id="msg" onclick="changeClass(this)">  
				  <div class="media">
					<div class="pull-left">
					  <img class="media-object img-circle" src="//www.bushbrigade.com/profile/images/profile_pics/expert-exchange-ee_logo.png">
					</div>
					<div class="media-body">
					  <p class="media-heading">Expert-test 
					  	<span class="badge badge-greensea" id="msg_badge"></span> 
						<span class="time"></span>
					  </p>
					  <span class="message"></span>
					  
					</div>
				  </div>
				</a>
			  </li>
		  
			  <li>
				<a href="#" class="unread" id="msg" onclick="changeClass(this)">  
				  <div class="media">
					<div class="pull-left">
					  <img class="media-object img-circle" src="//www.bushbrigade.com/profile/images/profile_pics/2013073114012237766385051.jpg">
					</div>
					<div class="media-body">
					  <p class="media-heading">Gorilla 
					  	<span class="badge badge-greensea" id="msg_badge"></span> 
						<span class="time"></span>
					  </p>
					  <span class="message"></span>
					  
					</div>
				  </div>
				</a>
			  </li>
		  
			  <li>
				<a href="#" class="unread" id="msg" onclick="changeClass(this)">  
				  <div class="media">
					<div class="pull-left">
					  <img class="media-object img-circle" src="//www.bushbrigade.com/profile/images/profile_pics/2014012510464991945168203.png">
					</div>
					<div class="media-body">
					  <p class="media-heading">Jooombee 
					  	<span class="badge badge-greensea" id="msg_badge"></span> 
						<span class="time"></span>
					  </p>
					  <span class="message"></span>
					  
					</div>
				  </div>
				</a>
			  </li>
		  
			  <li>
				<a href="#" class="unread" id="msg" onclick="changeClass(this)">  
				  <div class="media">
					<div class="pull-left">
					  <img class="media-object img-circle" src="//www.bushbrigade.com/profile/images/profile_pics/mikemike-sea-kitten-elaphabbie11.jpg">
					</div>
					<div class="media-body">
					  <p class="media-heading">Mikemike 
					  	<span class="badge badge-greensea" id="msg_badge"></span> 
						<span class="time"></span>
					  </p>
					  <span class="message"></span>
					  
					</div>
				  </div>
				</a>
			  </li>
		  
	  		</ul>
</body>
</html>

Open in new window

0
 
LVL 6

Author Comment

by:J N
ID: 40199572
Sorry for the confusion i tried to write it as simply as possible (fail)

Kyle Hamilton,

Almost have it working perfect!

the only thing i would like is :
1) if i click more than one list item then the input value would append both of them such as "name 1, name 2"
2) if i clicked "name 1" again it would remove "name 1" from the input and all the would remain is "name 2"
screenshot.pdf
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 2000 total points
ID: 40199740
have a look here:

http://jsfiddle.net/67DBx/8/
0
 
LVL 6

Author Closing Comment

by:J N
ID: 40199784
Thanks a lot!!!!!!!
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses
Course of the Month19 days, 13 hours left to enroll

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question