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.
Related
I need CSS code to restrict submit button if fields are empty.Daily we are receiving 3-5 blank inquiries through our WordPress landing page submit button.
Where to put these CSS codes if any.
Thanks
You really should do this with a script, because doing something like this by CSS is very sensitive to any future changes to your form structure.
It can be done with only CSS, using the :placeholder-shown selector.
For this you'll need to add a placeholder to all text inputs.
/* As long as one of the selectors is matched, the button won't show. */
form input:placeholder-shown ~ button,
form textarea:placeholder-shown ~ button {
display: none;
}
<form>
first name: <input type="text" name="firstname" placeholder="Enter first name"><br>
Last name: <input type="text" name="lastname" placeholder="Enter last name"><br>
Text area<br>
<textarea name="textarea" placeholder="Enter some text..."></textarea>
<br>
<button type="submit">Submit</button>
</form>
This will work, but for any change in the form you'll need to make sure it doesn't break.
I personally won't use this :)
I am building a user interface where visitors to a web site are asked questions and must choose answers. The answers are sometimes complex enough that we have decided to use sets of radio buttons, with nested check boxes: each set of check boxes controlled by its radio button. (Much effort has gone into reducing the complexity, etc. and we've also considered other options like drop-downs with long, wordy answers. That's not what this question is about.)
With some JavaScript, we can fairly easily ensure that the relationship between the controls is visually clear. (Note that the following screen captures are mock-ups, and the graphical design is yet to come. The question and answers are also fictional.)
We need to ensure that we also offer the correct experience to people who are using assistive technologies such as a screen reader. I have looked at the various WAI-ARIA attributes which can be used to enhance HTML to allow this. Below is the HTML I used to generate the screen captures.
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
fieldset {width: 300px;}
.pseudoDisabled {
background-color: #f4f2f2;
}
</style>
<script>
$(function(){
$("fieldset.question").each(function(){
// if a radio is followed by a fieldset with the right owning-radio, the
// fieldset should join in with the radio-button logic
$(this).children("input").change(function(){
if (this.checked){
if($(this).nextAll("fieldset:first").attr("data-owning-radio") === this.id){
$(this).siblings("fieldset").prop("readonly", false).removeClass("pseudoDisabled");
} else {
$(this).siblings("fieldset").prop("readonly", true).addClass("pseudoDisabled");
}
}
});
});
// Ensure that clicking on a nested checkbox activates the matching radio
$("[data-owning-radio]").each(function(){
var jThis = $(this);
var owningRadio = jThis.attr("data-owning-radio");
jThis.children("input").change(function(){
$("#" + owningRadio).prop( "readonly", false ).removeClass("pseudoDisabled").prop("checked", true);
});
jThis.click(function(){
$(this).prop("readonly", false).removeClass("pseudoDisabled");
});
});
// We'd have liked to use 'disabled', but then you don't get click events, so
// instead we use readonly for the controls that we don't want to be successful
// and switch to disabled as we submit.
$("form").submit(function(e) {
$("fieldset", this).filter(function(){
return $(this).prop("readonly") == true
}).prop("disabled", true);
});
});
</script>
</head>
<body>
<form>
<div>
<fieldset name="question1" class="question">
<legend>Do you pay tax?</legend>
<input type="radio" name="oq1" id="oq1a1" value="no" />
<label for="oq1a1">No</label><br />
<input type="radio" name="oq1" id="oq1a2" value="yes" aria-controls="q1a2checkboxes"/>
<label for="oq1a2">Yes</label><br />
<fieldset id="q1a2checkboxes" name="q1a2checkboxes" data-owning-radio="oq1a2">
<input type="checkbox" name="questiona2" id="oq2a2a" value="incomeTax" />
<label for="oq2a2a">I pay income tax</label><Br />
<input type="checkbox" name="questiona2" id="oq2a2b" value="vat" />
<label for="oq2a2b">I pay Value Added tax</label><Br />
<input type="checkbox" name="questiona2" id="oq2a2c" value="local" />
<label for="oq2a2c">I pay local tax</label>
</fieldset>
</fieldset>
</div>
<input type=submit>
</form>
</body>
</html>
As you can see, I have used the aria-controls attribute to indicate the relationship between the radio and the fieldset it controls. Is this the correct approach? Is it sufficient, or do I need also to use various other attributes to describe more detailed relationships?
So far my web searches have yielded mostly very abstract standards documents, and not much in the way of clear advice, so any good references would also be very welcome.
I've been trying to get the default checkbox template written for my Boolean editors and I've run into an issue due to how MVC Razor renders multiple input elements for a single boolean model property.
I have this template defined:
#model Boolean?
<div class="check-box">
#Html.CheckBox("", Model.HasValue && Model.Value)
#Html.LabelForWithoutText(m => m, new object())
</div>
If I manually write out the HTML like:
<div class="check-box">
<input type="checkbox" title="Create?" value="true" name="check" id="chkCreate">
<label title="Create?" for="chkCreate"></label>
</div>
Everything works fine.
But when Razor renders my template on a Boolean property of a model the html is rather different. Due to how MVC renders other hidden inputs for posting booleans back to action methods.
The Razor version looks like this:
<div class="check-box">
<input type="checkbox" value="true" name="GloballyShare" id="GloballyShare" data-val-required="The GloballyShare field is required." data-val="true">
<input type="hidden" value="false" name="GloballyShare">
<label title="GloballyShare" for="GloballyShare"></label>
</div>
The problem is the extra hidden input. I don't want to change this behaviour as that will globally effect how MVC form work by default and I can't think of a way to deal with this in CSS.
So I'm wondering how this could be achieved. You can see a working example of the problem here:
Default CSS3 Checkbox Template in MVC
If you try it then remove the hidden input element and try it again the top most checkbox starts working the same as the bottom checkbox
I've just managed to fix the jsFiddle.
I changed the label selector from a + to a ~ and both checkboxes are now working:
.check-box input[type=checkbox]:checked + label {
Changed to:
.check-box input[type=checkbox]:checked ~ label {
Fixed jsFiddle
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...)
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()