javascipt get data from list

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
LVL 6
J NUnicorn wranglerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Kyle HamiltonData ScientistCommented:
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
Tom BeckCommented:
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
J NUnicorn wranglerAuthor Commented:
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
Kyle HamiltonData ScientistCommented:
have a look here:

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
J NUnicorn wranglerAuthor Commented:
Thanks a lot!!!!!!!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.