jQuery to get the text attribute of a checkbox - asp.net

I'm adding a check box to a page using the following statement;
<script language="C#" runat="server">
protected void Page_Load ( object src, EventArgs e )
{
if (!IsPostBack)
{
CheckBox XChkBox = new CheckBox(); //instance of System.Web.UI.WebControls.CheckBox
XChkBox.ID = "someId"
XChkBox.Text = "someText"
somePlaceHolder.Controls.Add(XChkBox);
}
}
</script>
I need to get the Text attribute of that check box on click. I tried $(this).attr('Text'); inside $('input[type=checkbox]').click(function(){}); but it returns undefined.
Where am I going wrong? Please suggest.
cheers

ASP .NET renders the Text property of the ASP:CheckBox server control, as a label element just after the <input type="checkbox" /> on the generated markup at the client, it looks something like this:
<input id="someId" type="checkbox" name="someId" />
<label for="someId"> someText </label>
You can get the text of the label by:
$("input:checkbox").click(function() {
var $label = $(this).next('label');
alert($label.text());
});

The CheckBox control renders the Text inside a <label> element. The text is not part of the HTML checkbox. If you want to get the text from jQuery, you have to get it from the <label>.
Also, the <label> it generates doesn't actually have an ID. If your CheckBox is named checkBox1, then the HTML it outputs will be <label for="CheckBox1">, and the text is inside that element. I believe the correct jQuery syntax would be:
$('label[for="checkBox1"]').html()

This depends on how you're implementing what you call "text".
If it's like this:
<input id="chkFoo" type="checkbox" text="Check me, fool!" />
Then you can access the text like this:
$("#chkFoo").attr("text")
If you do it like this
<input id="chkFoo" type="checkbox" />Check me, fool!
I think you're out of luck. Put a span around the text if you have to do it this way and grab it like this:
<input id="chkFoo" type="checkbox" /><span id="spnFoo">Check me, fool!</span>
$("#spnFoo").text()

Related

Marking the checkbox as disabled or enabled at run time

I have a boolean variable and if it is true I want to set some checkboxes to disabled
I was able to make my input text boxes readonly by using this inside my HTML for the text box:
readonly ="<%# myIsReadOnly %>"
But checkboxes don't have that. So wanted to make them disabled if that variable is true.
How do I do that? I am also on VB language.
The example of CheckBox I have is something like this:
<input type = checkbox" name="blah" id="blah"/>
You can manually stick in server-side code to render both attribute and value.
<input type="checkbox" <%= myIsReadOnly ? "disabled='disabled'" : "" %> />

How can I check in asp.net if checkbox was chcked?

How can I check in asp.net if checkbox was chcked?
Here the CheckBox:
<input type="checkbox" id="FootBallManager2013CheckBox" />
Since your markup is not using a CheckBox server control, I'll assume you want to check the input manually.
You have to give the input a name, otherwise it can't be posted. Call it, for example, name="FootBallManager2013CheckBox".
In the code-behind, look in Request.Form["FootBallManager2013CheckBox"] and see if it is non-blank. If the form element is present, it was checked; if it's not, it wasn't.
Example:
var footBallManager2013CheckBoxChecked = !string.IsNullOrEmpty(Request.Form["FootBallManager2013CheckBox"]);
Or, you could just use the server control, which is easier.
<asp:CheckBox runat="server" id="FootBallManager2013CheckBox" />
Code-behind:
if (FootBallManager2013CheckBox.Checked)
{
}
change html as
<input type="checkbox" id="FootBallManager2013CheckBox" RunAt="Server"/>
then on server side in code behind
if(FootBallManager2013CheckBox.Checked)
{
}
if(FootBallManager2013CheckBox.Checked)
{
}
you can tell by the checked property on the checkbox:
input type="checkbox" id="FootBallManager2013CheckBox" checked="checked"
or code wise (vb)
IF FootBallManager2013CheckBox.checked = checked then
[write what you want to do]
End IF

Why am I having trouble selecting a default radio button on a web page?

It seems this ought to be dead simple, but I'm stuck. I've written some asp.net code that outputs a pair of radio buttons:
<p>
<label for='chkYapper'>Yapper</label>
<input type='radio' name='yapper' id='chkYapper' value='yapper' checked='<%=gblYapperChecked %>' />
<br />
<label for='chkNonYapper'>non-Yapper</label>
<input type='radio' name='Yapper' id='chkNonYapper' value='nonYapper' checked='<%=gblNonYapperChecked %>' />
if (registrationUser.isYapper == 1)
{
gblYapperChecked = "checked";
gblNonYapperChecked = "";
}
else
{
gblYapperChecked = "";
gblNonYapperChecked = "checked";
}
As expected, I get two radio buttons, "Yapper" and "Non-Yapper". However, even when I step thru my code and see that gblYapperChecked is "checked" and gblNonYapperChecked is "", Non-Yapper is always selected by default in the web browser.
What am I doing wrong?
UpdateHere is the HTML code as it actually appears in the browser. "Yapper" should be selected, but "Non-Yapper" appears selected instead.
<p>
<label for='chkYapper'>Yapper</label>
<input type='radio' name='yapper' id='chkYapper' value='yapper' checked='checked' />
<br />
<label for='chkNonYapper'>non-Yapper</label>
<input type='radio' name='yapper' id='chkNonYapper' value='nonYapper' checked='' />
Note that the HTML "checked" attribute is generally determined by being present or not present. See http://www.w3.org/TR/html401/interact/forms.html#adef-checked for the spec.
In particular what this means is that if you want it to be checked you cna have checked, checked=true, checked=checked and so on. So what you want is to not have the checked attribute at all if you don't want the checkbox selected.
I would advise structure such as:
<input type='radio' name='Yapper' id='chkNonYapper' value='nonYapper' <%=registrationUser.isYapper?"":"checked='checked'" %> />
This should eliminate your checked attribute entirely dependant on your isYapper boolean.
The "checked" attribute is weird, it has no value. If a radio button is checked, include the "checked" attribute by itself in the tag. If unchecked, don't do anything. See here:
http://www.htmlcodetutorial.com/forms/_INPUT_TYPE_RADIO.html
Are you setting dblYapperChecked before or after the control is created? Personally, I'd run the radio buttons on the server side and set the checked value on the control directly, but your method should work if the values are set soon enough (try initializing them to the expected values and see if that makes a difference...)

how to compare radio button values with textbox values in asp.net

i have four radio buttons and one text box..i have to check the selected radio button value equals to the textbox value.. anyone plz help me
if(radioButtonList.SelectedValue == textBox1.Text.Trim())
{
//your code goes here
}
textBox does not contain a Value property.
if (!string.IsNullOrEmpty(RadioButtonList1.SelectedValue) &&
RadioButtonList1.SelectedValue.Equals(TextBox1.Text, StringComparison.Ordinal))
{
//your code goes here
}
Well.You didn't clarify where you want to do this comparison i.e. ClientSide or ServerSide.If you want it server side you can prefer earlier posted answers otherwise for client side try this one using Jquery.
<div>
<input type='radio' name='rd' value='A'>
<input type='radio' name='rd' value='B'>
<input type='radio' name='rd' value='C'>
<br />
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
</div>
<script type="text/javascript" >
$(document).ready(function(){
$("input:radio[name='rd']").click(function(){
if($(this).is(":checked"))
{
if($.trim($(this).val()) == $.trim($("#txtName").val()))
alert("Yeah!I got matched value.");
else
alert("Oops!Not matched.");
}
});
});
</script>
Click on this link:
DEMO

jQuery with ASP.NET WebForms - disabling textboxes

Another jQuery noob question - what am I doing wrong??
I have some HTML markup rendered by ASP.NET 3.5 webforms which looks like this:
<input id="ctl01_cphContent_pnlBasicInfo_chkRC"
type="checkbox" name="ctl01$cphContent$pnlBasicInfo$chkRC" />
<label for="ctl01_cphContent_cntPromos_pnlBasicInfo_chkRC">Recurrent Charges</label>
<span id="ctl01_cphContent_cntPromos_pnlBasicInfo_lblPromoValidFor"
class="rcPromo">Validity:</span>
<span class="rcPromo">
<input id="ctl01_cphContent_pnlBasicInfo_rbnDiscountValidFor"
type="radio" name="ctl01$cphContent$pnlBasicInfo$discountValidFor"
value="rbnDiscountValidFor" checked="checked" />
<label for="ctl01_cphContent_cntPromos_pnlBasicInfo_rbnDiscountValidFor">valid for</label>
</span>
<span class="rcPromo">
<input id="ctl01_cphContent_pnlBasicInfo_rbnDiscountValidUntil"
type="radio" name="ctl01$cphContent$pnlBasicInfo$discountValidFor"
value="rbnDiscountValidUntil" />
<label for="ctl01_cphContent_cntPromos_pnlBasicInfo_rbnDiscountValidUntil">valid until</label>
</span>
<input name="ctl01$cphContent$pnlBasicInfo$txtDiscountMonths" type="text"
id="ctl01_cphContent_pnlBasicInfo_txtDiscountMonths"
class="textbox" class="rcPromo" originalValue="" style="width:30px;" />
<span id="ctl01_cphContent_cntPromos_pnlBasicInfo_lblMonths" class="rcPromo"></span>
<input name="ctl01$cphContent$pnlBasicInfo$txtDiscountUntil" type="text"
id="ctl01_cphContent_pnlBasicInfo_txtDiscountUntil"
class="textbox" class="rcPromo" originalValue="" style="width:150px;" />
I have a checked "chkRC" which I want to trap and use to enable/disable other UI controls
I have a number of labels, input (type=radio) and input (type=text) UI controls. These are all marked with the "rcPromo" dummy CSS class
I have a CSS class called "textbox" for the normal textbox and "textboxDisabled" for the disabled state of the textbox, in an externally referenced CSS file, that work OK (when used in server-side code, that is)
What I'm trying to accomplish in jQuery is this: when the "chkRC" checkbox is disabled, I want to disable all relevant UI controls.
My jQuery looks like this:
$(document).ready(function() {
$("#<%= chkRC.ClientID %>").click(function() {
$('.rcPromo > :label').toggleClass('dimmed');
if (this.checked) {
$('.rcPromo').removeAttr('disabled');
$('.rcPromo .textboxDisabled').addClass('textbox').removeClass('textboxDisabled');
}
else {
$('.rcPromo > :input').removeAttr('checked');
$('.rcPromo .textbox').addClass('textboxDisabled').removeClass('textbox');
$('.rcPromo').attr('disabled', true);
}
});
});
It works fine for the labels and the radiobuttons - but I just can't get it to work with the textboxes - they just stay the same all around, nothing changes (they don't get disabled and they don't change their appearance to indicate that they're disabled, either).
I don't understand this - I do see several (a few more than in the sample) textboxes, which are <input type="text"> in HTML, and they do have the class="rcPromo" and class="textbox" on them - so why doesn't jQuery find and update those?
Any ideas?
Marc
I can't think of a way to augment the css class names that are assigned to controls from the skin file (phoenix is correct, the class names need to be added in the same attribute).
I can think of a few workarounds though:
--> You can wrap all the textboxes you want disabled in a div with a given class:
<div class="disable_textbox"><asp:textbox id="".../></div>
and then disable them by selecting:
$('.disable_textbox input').attr('disabled', true);
--> You can include character strings in the ID of the textboxes you want disabled:
<asp:textbox id="txtDiscountUntil_DisableMe" ... />
and then disable them like so:
$("input[id*='DisableMe']").attr('disabled', true);
--> You can add a custom attribute to your textbox:
txtDiscountUntil.Attributes.Add("disableme", "true");
and then disable them like so:
$("input[disableme='true']").attr('disabled', true);
Your HTML markup is not the correct one.
You can't add two classes like the one in your code.
Two classes can be added like this
<input type="text" class="Class1 Class2" />
and not like
<input type="text" class="Class1" class="Class2" />
Why don't you use hasClass to check whether the element has this class set or not?
I think you have to give this in an OR condition for the two classes.

Resources