• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 89
  • Last Modified:

asp.net, jquery, javascript select number to hide/show

I have below codes and it works. However,
                     
I have  totalKids = 3 hard codes and now I want to get it from <select> value.
How can I do that?

I use asp.net/c# with javascript.

Thanks,

<div class="form-group input-group">
                                            <span class="input-group-addon"><i class="fa fa-plus"></i></span>                                              
                                                <select onchange="ShowDependentDiv()" required class="form-control" id="totalCountKid" name="totalCountKid">
                                                  <option value="" disabled="disabled" selected="selected" class="disabled">Total Dependent(s)</option>
                                                  <option value="0">0</option>
                                                                <option value="1">1</option>
                                                                <option value="2">2</option>
                                                  <option value="3">3</option>
                                                  <option value="4">4</option>
                                                  <option value="5">5</option>
                                                  <option value="6">6</option>
                                                  <option value="7">7</option>
                                                  <option value="8">8</option>
                                                  <option value="9">9</option>
                                                  <option value="10">10</option>
                                               </select>
                                        </div>
                                <%
                                int i;
                                int? totalKids;
                                totalKids = 3;
                                Response.Write("<div id='dependentContainer' style='display:none' class='form-group input-group'>");                                                            
                                Response.Write("<table>");
                                for (i = 0; i < totalKids; i++)
                                {
                                %>
                                <tr>
                                <td>
                                <div  class='form-group input-group'><span  class='input-group-addon'><i class='fa fa-user'></i></span>
                                <input   placeholder="First Name" class="form-control"  type="text" id="kidFirstName<%=i%>" name="kidFirstName<%=i%>">
                                </div>
                                </td>
                                <td>
                                <div style="float:left;" class='form-group input-group'><span  class='input-group-addon'><i class='fa fa-user'></i></span>
                                <input   placeholder="Last Name" class="form-control"  type="text" id="kidLastName<%=i%>" name="kidLastName<%=i%>">
                                </div>
                                </td>
                                <td>
                                <div style="float:left;" class='form-group input-group'><span  class='input-group-addon'><i class='fa fa-user'></i></span>
                                <input placeholder="Middle Name" class="form-control"  type="text" id="kidMiddleName<%=i%>" name="kidMiddleName<%=i%>">
                                </div>
                                </td>
                                <td>
                                 <div class="form-group input-group"><span class="input-group-addon"><i class="fa fa-fire"></i></span>
                                 <select required class="form-control" id="primaryTotalDependent<%=i%>" name="primaryTotalDependent<%=i%>">
                                     <option value='' disabled='disabled' selected='selected' class='disabled'>Smoke(Yes/No)</option>
                                     <option value=NO>NO</option><option value=YES>YES</option></select>
                                </div>
                                </td>
                                </tr>
                                <%
                                }
                                Response.Write("</table>");
                                Response.Write("</div>");                            
                                %>
<script>
function ShowDependentDiv() {
                            if (document.getElementById("totalCountKid").value != "0") {
                                document.getElementById("dependentContainer").style.display = 'block';
                             }
                             else {
                                document.getElementById("dependentContainer").style.display = 'none';
                             }

                         }
</script>
0
ITsolutionWizard
Asked:
ITsolutionWizard
  • 5
  • 3
1 Solution
 
Jitendra PatilSr.Software EngineerCommented:
you can try the below line of code to get the selected value from  select dropdownlist

$( "#totalCountKid option:selected" ).text();    // to get the text

$('#totalCountKid option:selected').val();  // to get the value

HTH
0
 
Prakash SamariyaIT ProfessionalCommented:
For pure javascript,
//Get Object of select tag
var e = document.getElementById("totalCountKid");
//Get Value of selected item
var strValue = e.options[e.selectedIndex].value;
//Get Text of selected item
var strText = e.options[e.selectedIndex].text;

Open in new window

For more info please check:
http://www.w3schools.com/jsref/dom_obj_select.asp
0
 
ITsolutionWizardAuthor Commented:
It is combined with net your solution does not work to me
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.

 
Prakash SamariyaIT ProfessionalCommented:
You  need to modify code and need to make round trip to your asp.net page

Use below code instead of <select>
<asp:DropDownList ID="totalCountKid" runat="server"  onselectedindexchanged="itemSelected">
<!-- your options -->
</asp:DropDownList> 

<%
protected void itemSelected(object sender, EventArgs e)
{
    totalKids = logList.SelectedIndex].Value;
}
%>

Open in new window

0
 
ITsolutionWizardAuthor Commented:
I use html dropdown not asp net dropdown
0
 
Prakash SamariyaIT ProfessionalCommented:
then, you need to change your below asp.net code into javascript
    <%
                                int i;
                                int? totalKids;
                                totalKids = 3;
                                Response.Write("<div id='dependentContainer' style='display:none' class='form-group input-group'>");                                                            
                                Response.Write("<table>");
                                for (i = 0; i < totalKids; i++)
                                {
                                %>
                                <tr>
                                <td>
                                <div  class='form-group input-group'><span  class='input-group-addon'><i class='fa fa-user'></i></span>
                                <input   placeholder="First Name" class="form-control"  type="text" id="kidFirstName<%=i%>" name="kidFirstName<%=i%>">
                                </div>
                                </td>
                                <td>
                                <div style="float:left;" class='form-group input-group'><span  class='input-group-addon'><i class='fa fa-user'></i></span>
                                <input   placeholder="Last Name" class="form-control"  type="text" id="kidLastName<%=i%>" name="kidLastName<%=i%>">
                                </div>
                                </td>
                                <td>
                                <div style="float:left;" class='form-group input-group'><span  class='input-group-addon'><i class='fa fa-user'></i></span>
                                <input placeholder="Middle Name" class="form-control"  type="text" id="kidMiddleName<%=i%>" name="kidMiddleName<%=i%>">
                                </div>
                                </td>
                                <td>
                                 <div class="form-group input-group"><span class="input-group-addon"><i class="fa fa-fire"></i></span>
                                 <select required class="form-control" id="primaryTotalDependent<%=i%>" name="primaryTotalDependent<%=i%>">
                                     <option value='' disabled='disabled' selected='selected' class='disabled'>Smoke(Yes/No)</option>
                                     <option value=NO>NO</option><option value=YES>YES</option></select>
                                </div>
                                </td>
                                </tr>
                                <%
                                }
                                Response.Write("</table>");
                                Response.Write("</div>");                            
                                %>

Open in new window

Use below code:
- HTML Code, simply put below div container
<div id='dependentContainer'></div>
<script>
function ShowDependentDiv() {
	var totalKid = document.getElementById("totalCountKid").value;
	if (totalKid>0) {
		createChildElements(totalKid);
		document.getElementById("dependentContainer").style.display = 'block';
	}else{
		createChildElements(0);
		document.getElementById("dependentContainer").style.display = 'none';
	}
}
	
createChildElements = function (n){
	var htmlStr='';
	for(int i=0;i<n;i++)
	{
		htmlStr+= createElement(i+1);
	}
	var divParent = document.getElementById('dependentContainer');
	divParent.innerHTML = '<table>'+htmlStr+'</'+'table>';
}

createElement = function(i){
var html='<tr>';
html+='<td>'
+'<div class="form-group input-group"><span  class="input-group-addon"><i class="fa fa-user"></i></span>
<input placeholder="First Name" class="form-control"  type="text" 
	id="kidFirstName"'+i+'" name="kidFirstName"'+i+'">
</div>'
+'</'+'td>';

//------------------------------
html+='<td>'
+' your html code here... '
+'</'+'td>';
//------------------------------

html+='</tr>';
return html;
}
</script>

Open in new window

0
 
ITsolutionWizardAuthor Commented:
Please show me the working codes
0
 
Prakash SamariyaIT ProfessionalCommented:
Please find the working code
Note: I have added input for "FirstName" only. You need to do the same for the rest of columns!
<html>
<body>
<select onchange="ShowDependentDiv()" required class="form-control" id="totalCountKid" name="totalCountKid">
  <option value="" disabled="disabled" selected="selected" class="disabled">Total Dependent(s)</option>
  <option value="0">0</option>
				<option value="1">1</option>
				<option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>

<div id='dependentContainer' style="display:none;"></div>
<script>
function ShowDependentDiv() { //debugger;
	var totalKid = document.getElementById("totalCountKid").value;
	if (totalKid>0) {
		createChildElements(totalKid);
		document.getElementById("dependentContainer").style.display = 'block';
	}else{
		createChildElements(0);
		document.getElementById("dependentContainer").style.display = 'none';
	}
}
	
function createChildElements(n){
	var htmlStr='';
	for(i=0;i<n;i++)
	{
		htmlStr+= createElement(i+1);
	}
	var divParent = document.getElementById('dependentContainer');
	divParent.innerHTML = '<table>'+htmlStr+'</'+'table>';
}

function createElement(i){
var html='<tr>';
html+='<td>'
+'<div class="form-group input-group">'
+'<span  class="input-group-addon"><i class="fa fa-user"></i></span>'
+'<input placeholder="First Name" class="form-control"  type="text" id="kidFirstName"'+i+'" name="kidFirstName"'+i+'">'
+'</div>'
+'</'+'td>';

//--YOUR CODE TO ADD MORE COLUMNS ---------
//html+='<td>'
//+' your html code here... '
//+'</'+'td>';

//...

//html+='<td>'
//+' your html code here... '
//+'</'+'td>';
//-----------------------------------------

html+='</tr>';
return html;
}
</script>
</body>
</html>

Open in new window

Working  code snapshot below
snapshot of working sample
0
 
Prakash SamariyaIT ProfessionalCommented:
Working Solution has been provided!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now