Insert data into textbox on clicking href link

**jinu227** · 05-08-2012 01:44 AM

Dear All,

I have created a tree in html and javascript. How do I add the href value in the tree to a textbox outside the tree. I have attached a zip file which contains the code developed for the same.

ie. I need the anchor value of the category tree eg. Alabama, in the category1 input box.

Regards

**Padonak** · 05-08-2012 05:09 AM

like this?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--<link rel="stylesheet" type="text/css" href="css/style.css" />
--><title></title>
<!--<script type="text/javascript">
function getHrefText(hrefObj) {
   var textBoxValue = hrefObj.innerHTML;
   document.forms["aform"].elements["category1"].value = textBoxValue;
}
</script>-->
<!--<script type="text/javascript">
	function getText(anchor)
	{
		//var textBoxValue = hrefObj.innerHTML;
		var value = anchor.getAttribute('value');
		alert (value);
	}
</script>-->
<script type="text/javascript">
function insertText(val,e){
document.getElementById(e).value = val;
}
</script>
<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();
	});
	
	$('a[class="tree_link"]').mouseup(function(){
	$('#category1').val($(this).text());
	});
});

/*$('a').click(function(event) {
    alert($(this).attr("id"));
});*/

</script>
<style type="text/css">
	a {
		text-decoration: none;
		border: none;
	}
	img {
		text-decoration: none;
		border: none;
	}
	li {
		list-style: none;
	}
	.slidingDiv {
	/*	background:url(images/slidingDiv.png) no-repeat;
	*/	height: 100%;
		width: 100%;
	}

	.show_hide {
		display:none;
	}
	#tree li{
		list-style-type:none;
		font-family: "Myriad Pro";
		font-size:14px;
	}
	#topNodes{
		margin-left:0px;
		padding-left:0px;
	}
	#topNodes ul{
		margin-left:20px;
		padding-left:0px;
		display:none;
	}
	#tree .tree_link{
		line-height:13px;
		padding-left:2px;
	}
	#tree img{
		padding-top:2px;
	}
	#tree a{
		color: #000000;
		text-decoration:none;
	}
	.activeNodeLink{
		background-color: #316AC5;
		color: #FFFFFF;
		font-weight:bold;
	}
	

</style>
<script type="text/javascript">
var counter = 4;
var limit = 8;
function addInput(divName){
     if (counter == limit)  {
          alert("You have reached the limit of adding 7 title inputs");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.className="reg-login iclear";
          newdiv.id="title";
         var path   = "css";
   var style   = document.createElement( 'link' );
   style.rel   = 'stylesheet';
   style.type  = 'text/css';
   style.href  = path + '/css/style.css';
  

newdiv.appendChild(style);
          newdiv.innerHTML = "<ul><li class='ilable'>Title "+counter+ "</li><li class='cInput' style='list-style-type:none;'><input name='title[]' type='text' /></li></ul>";      
          
          document.getElementById(divName).appendChild(newdiv);
          
          counter++;
     }
}
var counter1 = 4;
var limit1 = 8;
function add(divName){
     if (counter1 == limit1)  {
          alert("You have reached the limit of adding 7 Description inputs");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.className="reg-login iclear";
          newdiv.id="description";
         var path   = "css";
   var style   = document.createElement( 'link' );
   style.rel   = 'stylesheet';
   style.type  = 'text/css';
   style.href  = path + '/css/style.css';
  

newdiv.appendChild(style);
          newdiv.innerHTML = "<ul><li class='ilable'>Long description "+counter1+ "</li><li class='ctextarea' style='list-style-type:none;'><textarea cols='5' rows='5' name='comment[]' class='txtClass'> </textarea></li></ul> ";
           
          document.getElementById(divName).appendChild(newdiv);
          
          counter1++;
     }
}
</script>
<script type="text/javascript">
function sample1() {
	alert("HI");
	alert(document.getElementById('sample').value);
   document.forms["aform"].elements["category1"].value = textBoxValue;
}
</script>

</head>


   <body>  
    <!-- container starts here -->
    <div id="container">
		<form method="post" action="" name="aform">
      <div id="sample">
   
      
      </div>
       
      <div class="reg-login iclear" id="title">
        <ul>
          <li class="ilable">Title 1 *</li>
          <li class="cInput"><input name="title[1]" type="text" />
          </li>
          <li class="ilable"></li>
         
        </ul>
      </div>
      
         <div class="reg-login iclear" id="description">
        <ul>
          <li class="ilable">Long description 1 *</li>
          <li class="ctextarea">
                   <textarea cols="5" rows="5" name="comment[1]" class="txtClass" id="description1"> </textarea>

          </li>
          <li class="ilable"></li>
         
        </ul>
      </div>
     
      
      <div class="reg-login iclear">
        <ul>
          <li class="ilable">Category 1 *</li>
         
          <li class="cInput">
           <input name="category1" type="text" id="category1" />
            <span class="buttons btnposs"><a href="javascript:void(0)" class="show_hide"> <img src="images/folders_tree.png" alt=""/> Category tree </a></span>
           </li>
           <div class="slidingDiv">
           	<a href="javascript:void(0)" onclick="expandAll();return false">Expand all nodes</a><br>
    		<a href="javascript:void(0)" onclick="collapseAll();return false">Collapse all nodes</a><br>
			<script type="text/javascript" src="tree.js"></script>
			<div id="tree">
    			<ul id="topNodes">
        			<li class="tree_node" id="node_1"><img id="plusMinus1" class="tree_plusminus" src="images/plus.gif"><img src="images/folder.gif"><a class="tree_link">Arts & Entertainment</a><ul><li class="tree_node"><img class="tree_plusminus" id="plusMinus2" src="images/plus.gif"><img src="images/folder.gif"><a class="tree_link" href="javascript:void(0)">Movies</a><ul><li class="tree_node"><img class="tree_plusminus" id="plusMinus3" src="images/plus.gif"><img src="images/sheet.gif"><a class="tree_link" javascript:insertText('Alabama ','textIns'); >Alabama</a></li><li class="tree_node"><img class="tree_plusminus" id="plusMinus4" src="images/plus.gif"><img src="images/sheet.gif"><a class="tree_link" href="javascript:insertText('Alaska','textIns');" onClick="void(0)">Alaska</a></li><li class="tree_node"><img class="tree_plusminus" id="plusMinus7" src="images/plus.gif"><img src="images/folder.gif"><a class="tree_link">California</a><ul><li class="tree_node"><img class="tree_plusminus" id="plusMinus69" src="images/plus.gif"><img src="images/sheet.gif"><a class="tree_link" href="javascript:insertText('Los Angeles','textIns');" onClick="void(0)">Los Angeles</a></li></ul></li><li class="tree_node"><img class="tree_plusminus" id="plusMinus8" src="images/plus.gif"><img src="images/sheet.gif"><a class="tree_link" href="javascript:insertText('Colorado','textIns');" onClick="void(0)">Colorado</a></li></ul></li></ul></li><li class="tree_node" id="node_51"><img id="plusMinus51" class="tree_plusminus" src="images/plus.gif"><img src="images/folder.gif"><a class="tree_link">Europe</a><ul><li class="tree_node"><img class="tree_plusminus" id="plusMinus52" src="images/plus.gif"><img src="images/folder.gif"><a class="tree_link">Norway</a><ul><li class="tree_node"><img class="tree_plusminus" id="plusMinus57" src="images/plus.gif"><img src="images/sheet.gif"><a class="tree_link" href="javascript:insertText('Haugesund','textIns');" onClick="void(0)">Haugesund</a></li></ul></li><li class="tree_node"><img class="tree_plusminus" id="plusMinus58" src="images/plus.gif"><img src="images/folder.gif"><a class="tree_link">Sweden</a><ul><li class="tree_node"><img class="tree_plusminus" id="plusMinus59" src="images/plus.gif"><img src="images/sheet.gif"><a class="tree_link" href="javascript:insertText('Stockholm','textIns');" onClick="void(0)">Stockholm</a></li></ul></li><li class="tree_node"><img class="tree_plusminus" id="plusMinus60" src="images/plus.gif"><img src="images/folder.gif"><a class="tree_link">Denmark</a><ul><li class="tree_node"><img class="tree_plusminus" id="plusMinus61" src="images/plus.gif"><img src="images/sheet.gif"><a class="tree_link" href="javascript:insertText('Copenhagen','textIns');" onClick="void(0)">Copenhagen</a></li></ul></li></ul>
           			</li>
      			</ul>
			</div>
           </div>
          
        </ul>
      </div>
      <div class="reg-login iclear">
        <ul>
<li class="ilable"></li>
                 
        </ul>
      </div>
      </div>
      </form>
     <!-- container ends here -->
    
  </div>
  <div class="cBottom fltLeft"></div>
  </body></html>

**jinu227** · 05-08-2012 06:19 AM

Thank you. It worked.

Regards

**Padonak** · 05-08-2012 10:09 AM

good to hear )

Thread: Insert data into textbox on clicking href link

Thread Tools

Display

Hybrid View

Insert data into textbox on clicking href link

Thank you

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions