We Keep Coding

jquery .find/.closest/.next

I have a table with one row having 4 cells as below
<table class="Header3" style="width: 100%;">
<tr>
<td id="RC" class="contLabel" style="width: 228px">
<div class="abc">Related Companies</div>
</td>
<td style="width: 101px">
<asp:checkbox runat="server" id="RCR" type="checkbox" ENABLED="false"/>
</td>
<td style="width: 116px">
<asp:checkbox runat="server" id="RCP" type="checkbox" ENABLED="false"/>
</td>
<td id="RC2" class="contLabel">Are related companies used to improve results?</td>
</tr>
And I below the table, i have a textbox inside div, the code is below:
<div id="RCN" class="panel2" style="width: 100%;">
<div class="ContentTB">
<asp:TextBox id="RCNT" runat="server" TextMode="MultiLine" width="99.5%" Enabled="false"></asp:TextBox>
</div>
</div>
What I want to achieve is the moment I click the first cell (#RC) or the 4th cell (#RC2), the textbox below the table get toggled, currently my jquery code is
$(function() {
$('#RC,#RC2').click(function(e) {
$('#RCN').toggle('fast');
});
})
and it works ok.
Now problem is that I have 20 tables and 20 textboxe, and I don't want to write 20 lines jquery code.
I'm trying things like
$('.contLabel').click(function(e) {
$(this).next('.panel2').toggle('fast');
});
but it does not work. I wonder what's the correct code?
The reason that I don't put all of them in one table is that the toggle animation does not look good.
Thanks for any advice!

You'd want to go back up to the table using closest() then use next() to get the div with the textarea in it.
$('.contLabel').on('click', function (e) {
var $td = $(this);
$td.closest('table').next('.panel2').toggle('fast');
});

This should do the trick
$('.contLabel').click(function (e) {
$(this).parent('tr').parent('tbody').parent('table').next('.panel2').toggle('fast');
});

show/hide textbox based on yes/no

I have a survey, 30+ yes/no questions(radiobutton); if choose no, show textbox to give reason, and this textbox is required if choose no. I can't do it one by one. How to use wildcard and loop to do this.
<tr>
<td>1</td>
<td width="600px">question 1?</td>
<td width="65px">
<asp:RadioButton ID="rdM1Y" runat="server" Text="Yes" GroupName="rdM1" />
<asp:RadioButton ID="rdM1N" runat="server" Text="No" GroupName="rdM1" />
</td>
<td><asp:TextBox ID="txtCM1" runat="server" /></td>
</tr>
<tr>
<td>2</td>
<td width="600px">question 2?</td>
<td width="65px">
<asp:RadioButton ID="rdM2Y" runat="server" Text="Yes" GroupName="rdM2" />
<asp:RadioButton ID="rdM2N" runat="server" Text="No" GroupName="rdM2" />
</td>
<td><asp:TextBox ID="txtCM2" runat="server" /></td>
</tr>
I need validate those textboxs isrequired if they choose no

ok, so:
include jQuery (makes it all way easier):
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
add radNo class for all "NO" radio buttons:
<asp:RadioButton class="radNo" ID="rdM2N" runat="server" Text="No" GroupName="rdM2" />
add txtNo class for all textboxes:
<asp:TextBox class="txtNo" ID="txtCM2" runat="server" />
add script:
<script type="text/javascript">
$(function(){
$('.radNo').click(function(){
var c = $(this).is(':checked');
$(this).parents('tr').find('txtNo').toggle(c);
if (c) {
$(this).parents('tr').find('txtNo').focus();
}
});
// validate that there's text if select NO
$('.txtNo').bind('blur', function(){
if ($(this).val().length < 1) {
$(this).focus();
alert('please provide a reason');
}
});
});
</script>
that should do it, hope i understood well and it's helpful.

Generated HTML - note the textarea ID equals the radio button name
<table>
<tr>
<td>1</td>
<td width="600px">question 1?</td>
<td width="65px">
<label><input type="radio" name="rdM1" /> Yes</label>
<label><input type="radio" name="rdM1" class="give_reason" /> No</label>
</td>
<td><textarea id="rdM1" name="rdM1-reason"></textarea></td>
</tr>
</table>
CSS
textarea {display: none;}
Javascript
$(document).on('click', 'input:radio', function(){
el = $('#' + this.name);
($(this).hasClass('give_reason'))? el.show() : el.hide();
});
DEMO

First give no-radiobuttons a common class, for example say it "noRadio". Then, you can listen click events of all radio buttons with this class. Within the event handler function you can find the corresponding text box and show it. My sample code is below:
$(".noRadio").click(function(e) {
// get id of the clicked radio button
var id = $(e.target).attr("id");
// remove "rdM" and "N" from id and get pure question number
id = id.replace("rdM", "").replace("N", "");
// select the corresponding text box by its id, e.g. "#txtCM2" if "#rdM2N" selected
$("#txtCM" + id).show();
});
I tried this approach in my projects and it works.

$(document).on('click', 'input:radio', function(){
$('table').each(function(){
if($('input[type= radio]:checked').val() == no))
{
$('textbox').show();
}
});
});

Get Control values of datalist in javascript

I have a datalist and I am calling javascript on div click added in datalist ..
How can i get control values on click of my div added in datalist
<asp:DataList ID="DataList1" runat="server">
<ItemTemplate>
<div id="metroaqui" class="divsub" runat="server"
onclick="javascript:getvalues(this);">
<table>
<tr class="clstd">
<td>
<b>IP NO:-</b>
</td>
<td colspan="2" style="width: 20%">
<asp:Label runat="server" ID="ipnolable"
Text='<%# Eval("IpNo") %>'></asp:Label>
</td>
<td>
<b>PATIENT NO:-</b>
</td>
<td colspan="2">
<asp:Label runat="server" ID="Label1"
Text='<%# Eval("PatientNo") %>'>
</asp:Label>
</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</asp:DataList>

To access the control inside the DataList, try to use the following way,
function getVal()
{
var datalist = document.getElementById('<%=DataList1.ClientID%>').childNodes[0];
var tb = datalist.getElementsByTagName("input");
for (var i=0;i<tb.length;i++)
{
//TextBox
if (tb[i].type=="text")
{
alert(tb[i].value);
}
//DropDown
if (tb[i].type=="select")
{
alert(tb[i].options[tb[i].selectedIndex].value);
}
}
}

You can simple use document.getElementById to get the values from your controls.
Note that you id's will change at runtime.
Also remember that label render as span on browser so you will have to check for innerText and innerHtml of your control.
You can take benefit of ClientIDMode="static" for static client id of the server controls. like asp:Label etc.

JQuery Validate dropdown selection on Button click

I'm having trouble validating a drop down asp control on button click. I have a panel that contains radio buttons, textboxes, a drop down, and a save button. If the radio button for zip is chosen a drop down list appears (that is binded with data in the code behind) and you must select a zip from the list. I'm having trouble validating on button click of the save button that a selection was made from the downdown list.
I would like to do it with jQuery and tried doing it like so that pops up and alert but its not working. Like to have it validate the selection before it does on the onClick of the button.
<script type="text/javascript">
$(document).ready(function() {
$('#btn_submit').click(function() {
if ($('#ZIPDD').val() > 0) {
return true;
}
else {
alert('Please select a zip.');
return false;
}
});
});
<asp:UpdatePanel runat="server" ID="UP6" ChildrenAsTriggers="false" UpdateMode="conditional">
<ContentTemplate>
<table style="text-align:center;" cellpadding="5px">
<tr>
<td>
<table runat="server" id="_table" width="100%" cellspacing="10">
<tr>
<td style="width:100px; font-weight:bold; padding-bottom:inherit;" valign="middle">
<div>STEP 1:</div>
<div>Enter a #</div>
</td>
<td align="left" valign="middle" style=" margin-bottom:15px;">
<asp:TextBox runat="server" ID="txt_nbr" Width="70px"/>
<asp:Button ID="Button1" Text="Continue" runat="server" OnClick="Button1_Click"/>
</td>
</tr>
<tr>
<td style="width:100px; font-weight:bold; margin-bottom:15px;" valign="middle">
</td>
<td style="border:2px solid gray; background-color:Silver;">
<table runat="server" id="SHTable" visible="false" width="100%">
<tr align="left">
<th style="font-weight:bold;border-bottom:2px solid black;">Methods</th>
<th style="font-weight:bold;border-bottom:2px solid black;">Location</th>
<th style="font-weight:bold;border-bottom:2px solid black;"> <asp:Label runat="server" ID="DOTEXT"></asp:Label></th>
</tr>
<tr align="left">
<td>
<div style="margin-bottom:10px;"><asp:CheckBox runat="server" ID="ZIP" Text="ZIP" AutoPostBack="true" OnCheckedChanged="ZIP_CheckedChanged" /></div>
</td>
<td style="width:300px;">
<asp:DropDownList runat="server" ID="ZIPDD" Visible="false"/><br /><asp:Label ID="ziplabel" Visible="false" runat="server" style="color: red; font-size:12px;"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width:100px; font-weight:bold; margin-bottom:15px;" valign="middle">
<div>Confirm changes and hit save</div>
</td>
<td align="left" valign="middle">
<asp:Button Text="Save" runat="server" ID="btn_submit" OnClick="btn_submit_Click" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</ContentTemplate>
Binding to the dropdown in the code behind on page load
protected void Page_Load(object sender, EventArgs e)
{
if (ZIPDD.Items.Count == 0)
{
Loadzips();
}
}
private void LoadBranches()
{
using (SqlConnection SQLCONN)
{
SQLCONN.Open();
SqlCommand SQLCOMM = SQLCONN.CreateCommand();
SQLCOMM.CommandText = "SELECT * FROM table";
IDataReader dr = SQLCOMM.ExecuteReader();
ZIPDD.DataSource = dr;
ZIPDD.DataValueField = "ZIPID";
ZIPDD.DataTextField = "ZIPLABEL";
ZIPDD.DataBind();
ZIPDD.Items.Insert(0, new ListItem(String.Empty, String.Empty));
ZIPDD.SelectedIndex = 0;
}
}

When you are planning to use javascript/jquery, pay attention to how controls are rendered in the client side. You are setting visible="false" to table and controls, they will never render in the client side. You can't find them using jquery. To work properly, you need to set this:
<table runat="server" id="SHTable" visible="false" width="100%">
to this:
<table runat="server" id="SHTable" style="display:none" width="100%">
and also change this:
<asp:DropDownList runat="server" ID="ZIPDD" Visible="false"/>
to this:
<asp:DropDownList runat="server" ID="ZIPDD" style="display:none"/>
To test your script, set style="display:block" for the table and the dropdown also, otherwise you will see porpup to select a zip (dropdown value is 0).
Good luck!

Why dont you look at using the jQuery.validate plugin. It will validate all form items that have the class "required" attached to it. You could use jQuery and addClass to add the class required to the dropdown if the checkbox is highlighted.
if($('#radio_button').is(':checked')) {
$( ".dropDownClassIdentifier" ).addClass( "required" );
}
else
{
$( ".dropDownClassIdentifier" ).removeClass( "required" );
}
http://jqueryvalidation.org/ and
http://api.jquery.com/addClass/ are good places to start looking for documentation

Show message when start typing inside textbox using javascript

I'm using ASP.NETand I want to show message behind a textbox when I start to write in it, I want to do that on the client side so I think javascript is the key.
Edit :
My code:
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Alternate Email :"></asp:Label>
</td>
<td>
<asp:TextBox ID="_txtAlternateEmail" runat="server" onkeyup="typetext(this);"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="Security Question :"></asp:Label>
</td>
<td>
<asp:TextBox ID="_txtSecurityQuestion" runat="server"></asp:TextBox>
</td>
</tr>
and the javascript
<script type="text/javascript">
function typetext(tb) {
var mySpanElement = document.getElementById("_txtSecurityQuestion");
mySpanElement.innerText = tb.value;
}
</script>

You could handle the onkeyup event in the textbox
<asp:TextBox ID="_txtAlternateEmail" runat="server" onkeyup="typetext(this);">
</asp:TextBox>
which calls the typetext method. In your typetext method, you can set the span (or whatever HTML element) to the text of the textbox.
function typetext(tb)
{
var mytextbox = document.getElementById('<%=_txtSecurityQuestion.ClientID %>');
mytextbox.value = tb.value;
}