I have the following in my JSP to show a bunch of roles with checkboxes beside them
<c:forEach var="role" items="${roles}">
<form:checkbox path="roles" value="${role.name}" label="${role.description}"/>
</c:forEach>
Which produces the following
<input id="roles1" name="roles" type="checkbox" value="USER_ROLE" checked="checked"/><label for="roles1">User Role</label><input type="hidden" name="_roles" value="on"/>
<input id="roles2" name="roles" type="checkbox" value="ADMIN_ROLE" checked="checked"/><label for="roles2">Admin Role</label><input type="hidden" name="_roles" value="on"/>
Now what I want to do is apply a css class to the label portion (change the colouring, add a strikethrough, that sort of stuff) based off a boolean field active in my Role object, however I cannot find a way to add said css to the label, only the input (which does not affect the text)
Is there an attribute I'm missing that allows me to do this, or another way of constructing this (other than producing this html by hand)
Related
I have a button in a form that has the class "popmake-46". The class makes it so that if the button is clicked a popup window opens. However, I want to make it so that the class changes to a different class (different popup) depending on the input of "zipcode".
If the zipcode starts with the numbers "117", the class should remain as "popmake-46", but if it starts with any other number, it should change the class to "popmake-47" (different popup window).
<form name="form1">
<input type="text" name="firstname" placeholder="First name"><br>
<input type="text" name="zipcode" placeholder="Zipcode"><br>
<input class="popmake-46" type="submit" value="Submit">
</form>
How can I achieve this?
I don't believe this is WordPress specific, it seems you just need to add an onchange and/or onkeyup event handler to your zipcode field.
I'm not sure of how you're implementing this form exactly, so here's a pretty basic way to do it:
Create a function that checks the value of the current element
If the value starts with '117' add the -47 class and remove the -46 class
Otherwise remove the -47 class and add the -46 class back.
add that function to the onchange and/or onkeyup event for the zip code.
In the snippet below I've added a little CSS (and changed your submit input to a button so I could use the ::after CSS pseudo-class to illustrate that it's changing based on what class it currently is.
function toggle46or47(el){
var form = el.closest('form');
var popMake = form.querySelector('[type="submit"]');
if( el.value.substring(0, 3) == '117' ){
popMake.classList.remove('popmake-46');
popMake.classList.add('popmake-47');
} else {
popMake.classList.add('popmake-46');
popMake.classList.remove('popmake-47');
}
}
.popmake-46:after{content: " I'm 46";}.popmake-47:after{content: " I'm 47";}
<form name="form1">
<input type="text" name="firstname" placeholder="First name"><br>
<input type="text" onchange="toggle46or47(this);" onkeyup="toggle46or47(this);" name="zipcode" placeholder="Zipcode"><br>
<button class="popmake-46" type="submit" value="Submit">Submit</button>
</form>
I'm following this article
https://www.w3schools.com/howto/howto_css_custom_checkbox.asp
for a checkbox, but how do I set and get the check value?
As I need to a do a post back with the value.
<label class="container">Accept Offers?
<input type="checkbox" id="Offers" name="Offers"/>
span class="checkmark"></span>
</label>
change your code to this
<input type="checkbox" id="Offers" value="checkedValue" name="Offers"/>
If you see the Request.Form object or query-string (in case of HTTP GET submission) you will see the value, If this is not checked null will be seen or Request.Form will have not that key that belong to Checkbox.
I am using Tuple to pass two models inside the view like code given below.
#model Tuple<AdvanceSearchModel, List<SearchUserModel>>
<form role="search" method="post" action="/Public/AdvanceSearch">
<div class="form-group">
<label>Name</label>
<input name="FullNames" type="text" class="form-control" value=""/>
</div>
<div class="form-group">
<label>Product</label>
<input name="Products" type="text" class="form-control" value="" />
</div>
<div class="form-group">
<label>Location:</label>
<input name="Location" type="text" class="form-control" value="" />
</div>
<div class="form-group">
<label>State</label>
<input name="States" type="text" class="form-control" value="" />
</div>
<div class="form-group">
<label>Country</label>
<input name="Countries" type="text" class="form-control" value=""/>
</div>
</form>
All the name attributes inside inputs are of AdvanceSearchModel. How do I use tag helper such as asp-for when passing multiple model to the views containing one or multiple forms? Also how do I retain values of the form after submitting the form in above scenario?
As you can see in the source code of InputTagHelper
You can see it creates the name attribute based on the (lambda) expression in html-tag:asp-for.
what you need
You need a form name tag like this SearchUserModel[0].Location
Where:
SearchUserModel is the property name on the model which is in the controller method you post to
[0] is the index in the list
Location is the property on the iten in the list the SearchUserModel instance
My suggestion
Not to do
Extend the InputTagHelper and add a prefix option (which adds a prefex to the name).
Use a view model Not a tuple!
Create a partial view that only takes SearchUserModel + a prefix (like an int for which row in the list it is for example: usermodel[1])
In your view loop over the list and call the partial.
result
#model SearchUserModel
<input asp-for="Location" my-prefix="ListItem[#Model.Id]" class="form-control" />
Better longterm option
Make a HTML template on how SearchUserModel part of the form should look.
Do ajax call to get the data or put the data as json in your view. (or take step 3 from what not to do)
Generate the form with well structured javascript.
On submit Instead of submitting the form, parse the from to json and send this as json ajax call.
Why do i say this? It is easier to debug if you get weird databindings in your controller.
That said, option 1 is perfectly fine but it might lead to problems later, as it is very static template, you wont be able to add or remove rows easily.
References for proper html name tags for lists:
http://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysListsCollectionsDictionaries.aspx
How does MVC 4 List Model Binding work?
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
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.