Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

How to make a textfield cell in a table to become a dropdown menu when clicked in javascript?

Posted on 2009-02-22
7
Medium Priority
?
326 Views
Last Modified: 2013-11-11
I have an HTML table and I want for some particular cells when clicked to become drop down menus and the user to be able to choose something and this something then becomes text field again.
Here is the code. I want when the user clicks on ONLY course6 and course 7 to appear a drop down menu with courses to choose. The course then will become again a text field. Thanks in advance.
<html>
<body>
<table  id="myTable" border="1"  cellpadding="10" cellspacing="5">
<tr class ="t1">
	<td>Monday</td>
	<td>Tuesday</td>
	<td>Wednesday</td>
	<td>Thursday</td>
	<td>Friday</td>
	<td>Saturday</td>
       <td>Sunday</td>
</tr>
 
<tr class="task1">
	
	 <td>course1</td>
	<td>course 2</td>
	<td>course 3</td>
	<td >course4</td>
	<td>course 5</td>
	<td> course 6</td>
	<td>course7</td>
</tr>
<tr class="task2">
	
	 <td>course1</td>
	<td>course 2</td>
	<td>course 3</td>
	<td >course4</td>
	<td>course 5</td>
	<td> course 6</td>
	<td>course7</td>
</tr>
</body>
<html>

Open in new window

0
Comment
Question by:puffyy_beginner
  • 4
  • 2
7 Comments
 
LVL 9

Expert Comment

by:tl121000
ID: 23707445
<tr class="task2">

<select>
<option>course1</option>
<option>course2</option>
<option>course3</option>
<option>course4</option>
' repeat for each option
</select>
</tr>
 
 http://www.htmlgoodies.com/primers/html/
 
0
 
LVL 13

Expert Comment

by:qwerty021600
ID: 23709897
Either open a Div on the click of text field or you can play show/hide.
On the click of Text field, hide it and show Drop down and vice-versa.
0
 
LVL 13

Expert Comment

by:qwerty021600
ID: 23709902
ya another solution is Fetch the data through Ajax.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:puffyy_beginner
ID: 23710117
what i am looking for is probably a method in javascript to be invoked when the user clicks on course6 and course7. This method will display a dropdown menu to the clicked cell,the user will choose and when click to the choice this choice will become textfield again. Above comments weren't what i am looking for.
0
 
LVL 13

Expert Comment

by:qwerty021600
ID: 23710153
Use this method of JavaScript. Hope this will be of help :)

private string GetControlJavaScript()

        {

            StringBuilder objStringBuilder = new StringBuilder();

            objStringBuilder.Append(" function DropDownBoxWithBackgroundImage_ShowDiv(divID){");

            objStringBuilder.Append(" var contentDiv; contentDiv = document.getElementById(divID);");

            objStringBuilder.Append(" var contentTextBox; var contentTextBoxID; var lastIndex; lastIndex =  contentDiv.id.lastIndexOf('_'); contentTextBoxID = contentDiv.id.substring(0,lastIndex); contentTextBox = document.getElementById(contentTextBoxID + '_valueTextBox'); contentTextBox.focus();");

            objStringBuilder.Append(" if(contentDiv != null) { ");

            objStringBuilder.Append(" if(contentDiv.style.display == \"none\" || contentDiv.style.display == '') { contentDiv.style.display =\"block\";");

            objStringBuilder.Append("} else { ");

            objStringBuilder.Append(" contentDiv.style.display =\"none\";}} }");

 

            //Changed for Dragnet #15733. Added new function to close the expanded div if already open.

            objStringBuilder.Append(" function DropDownBoxWithBackgroundImage_ShowDivDelay(divID){");

            objStringBuilder.Append(" var contentDiv; contentDiv = document.getElementById(divID); var lastIndex; lastIndex =  contentDiv.id.lastIndexOf('_'); contentTextBoxID = contentDiv.id.substring(0,lastIndex); contentTextBox = document.getElementById(contentTextBoxID + '_valueTextBox');");

            objStringBuilder.Append(" if (window.document.activeElement.id.indexOf('parentPanel') == -1) {");

            objStringBuilder.Append(" if(contentDiv != null) { ");

            objStringBuilder.Append(" if(contentDiv.style.display == \"block\") { contentDiv.style.display =\"none\"; }");

            objStringBuilder.Append(" } } ");

            objStringBuilder.Append(" else { contentTextBox.focus(); } ");

            objStringBuilder.Append(" } ");

 

            objStringBuilder.Append(" function " + "DropDownBoxWithBackgroundImage_SetDataInTextBox(panel) { var contentDiv; contentDiv = panel.parentNode; var contentTextBox; var contentTextBoxID; var lastIndex; lastIndex =  contentDiv.id.lastIndexOf('_'); contentTextBoxID = contentDiv.id.substring(0,lastIndex); contentTextBox = document.getElementById(contentTextBoxID + '_valueTextBox'); contentTextBox.value = panel.innerText; contentDiv.style.display=\"none\"; }");

 

            return objStringBuilder.ToString();

        }

0
 

Author Comment

by:puffyy_beginner
ID: 23710199
i am invoking this method to the onclick attribute of the table and nothing happens :/
0
 
LVL 13

Accepted Solution

by:
qwerty021600 earned 500 total points
ID: 23710357
objvalueTextBox.Attributes.Add("onClick", "DropDownBoxWithBackgroundImage_ShowDiv('" + _objParentPanel.ClientID + "')");

            _objDownarrowImage.Attributes.Add("onClick", "DropDownBoxWithBackgroundImage_ShowDiv('" + _objParentPanel.ClientID + "')");

Try this on onclick of TextBox.
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

Question has a verified solution.

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

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

578 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