I have an asp:RadioButtonList named rblDependants
which renders as follows and a panel pnlDependants and I need to hide it when radio button selection is "No" and show it when its "Yes". I have tried a few snippets from the forums and none seem to work fine. Can anyone help me pls....!
<table id="ctl00_ContentPlaceHolder1_ctl02_rblDependants" border="0" style="border-width:0px;">
<tr>
<td><input id="ctl00_ContentPlaceHolder1_ctl02_rblDependants_0" type="radio" name="ctl00$ContentPlaceHolder1$ctl02$rblDependants" value="Yes" /><label for="ctl00_ContentPlaceHolder1_ctl02_rblDependants_0">Yes</label></td>
</tr><tr>
<td><input id="ctl00_ContentPlaceHolder1_ctl02_rblDependants_1" type="radio" name="ctl00$ContentPlaceHolder1$ctl02$rblDependants" value="No" checked="checked" /><label for="ctl00_ContentPlaceHolder1_ctl02_rblDependants_1">No</label></td>
</tr>
</table>
<div id="ctl00_ContentPlaceHolder1_ctl02_pnlDependants">
<div class="QuestionWrapper">
<div class="Question">
<label for="">No. of Dependants</label>
</div>
<div class="Answer">
<input name="ctl00$ContentPlaceHolder1$ctl02$txtNoOfDependants" type="text" maxlength="2" id="ctl00_ContentPlaceHolder1_ctl02_txtNoOfDependants" />
</div>
<div class="ClearFloat"></div>
</div>
Something like this should work:
$("table[id$=_rblDependants] :radio").change(function() {
$(this).closest('table').next().toggle(this.checked && this.value == 'Yes');
}).change();
This would work for any number of repeated controls since it finds the <div id="X_pnlDependants"> relatively. All we're doing it taking an <table> who's ID ends-with _rblDependants, taking any :radio buttons inside it and binding to their .change() event. Then either of them is changed it's checking that the result was value="Yes" and it was .checked, if that's the case show the panel, otherwise hide it, via .toggle(bool).
The .closest() and .next() are to go up to the <table> then to the next element, the <div>, since that's what you want to hide/show. The .change() on the end is to trigger the handler initially, so if "No" is initially checked, it hides the <div> on load.
You can give it a try here
Related
This seems like it should be so basic but for the life of me I can't get it working.
In my MVC 5 web app, I would like to show the user a list of layouts using checkboxes so the user can select whichever layouts are required.
I'm using an editor template, that gets called as such:
<table class="table">
<tr>
<th>
#Html.DisplayName("Selected")
</th>
<th>
#Html.DisplayNameFor(x => x.Layout)
</th>
</tr>
#Html.EditorForModel()
</table>
Inside the template I use a helper for the checkbox.
<tr>
<td>
#Html.CheckBoxFor(x => x.IsSelected)
</td>
<td>
#Html.DisplayFor(x => x.Layout)
</td>
</tr>
This all works fine, I can capture what the user has selected in the Post
What I cannot do however is apply any CSS styles to the checkbox.
What I have read is it should be a matter of:
#Html.CheckBoxFor(x => x.IsSelected, new { #class = "css-checkbox" })
This however causes the checkbox to not be rendered.
I have tried a few things such as wrapping the checkbox in a
<div class="checkbox">
but even though the checkbox is rendered, I cannot select any of the items.
Now there is hopefully just something simple I am doing or not doing?
EDIT 1:
I seem to have come across the problem, but am not sure how to fix it.
If I use the following code, it works:
<input id="theid" name="theid" type="checkbox" class="css-checkbox" />
<label class="css-label" for="theid">Using input </label>
What I need to do is for the:
#Html.CheckBoxFor(x => x.IsSelected, new { #class = "css-checkbox" })
to be turned into the same as when I use input and label.
The page source looks as such:
<input checked="checked" class="css-checkbox" data-val="true" data-val-required="The IsSelected field is required." id="test5" name="IsSelected" type="checkbox" value="true" /><input name="IsSelected" type="hidden" value="false" />
<input id="theid" name="theid" type="checkbox" class="css-checkbox" />
<label class="css-label" for="theid">Using input </label>
The top comes from the helper and the bottom one is using the input tag directly.
I need to increase the space between the labels (which overlap with my resized radio buttons) and the radio buttons. The code snippets I have found only address the labels being to the left or right of the button. My labels are above the radio button, and now the two line labels (like "neither dislike or like", which spans two lines) are getting overlapped by the radio button. Thank you!
a screenshot of my radio buttons
Add this javascript to your Qualtrics question:
Qualtrics.SurveyEngine.addOnload(function()
{
var qid = this.questionId;
var radioCells = $(qid).select('td.ControlContainer');
var limit = radioCells.length;
for(i=0;i<limit;i++) {
radioCells[i].style.paddingTop = "25px";
}
});
Adjust the "25px" as necessary. You should consider upgrading to the new Qualtrics themes where the radio buttons go away and the labels become clickable buttons.
jsfiddle
As I am not sure if you are using bootstrap or any other layout framework, here is a solution with a simple table layout.
td {
width:100px;
text-align: center;
}
<!--EMMET string table>(tr>(td>label[for=radio$]{myradio$})*5)+(tr>(td>input#radio$[type='radio'][name=myradio])*5)-->
<table>
<tr>
<td><label for="radio1">myradio1</label></td>
<td><label for="radio2">myradio2</label></td>
<td><label for="radio3">myradio3</label></td>
<td><label for="radio4">myradio4</label></td>
<td><label for="radio5">myradio5</label></td>
</tr>
<tr>
<td><input type="radio" id="radio1" name="myradio"></td>
<td><input type="radio" id="radio2" name="myradio"></td>
<td><input type="radio" id="radio3" name="myradio"></td>
<td><input type="radio" id="radio4" name="myradio"></td>
<td><input type="radio" id="radio5" name="myradio"></td>
</tr>
My listbox is appearing differently in Chrome, Firefox and IE.
How can I make them look alike. I want 1px border
<asp:CheckBoxList ID="cbStatus" runat="server" RepeatColumns="4">
<asp:ListItem Text="Approved" Value="A"></asp:ListItem>
<asp:ListItem Text="Declined" Value="D"></asp:ListItem>
</asp:CheckBoxList>
Checkbox is one of those elements that will always render differently by different browsers. If you want the look to be unified I suggest one of jQuery plugins that turns ordinary checkboxes into styled controls.
For example your checkboxlist renders this HTML to browser:
<table id="cbStatus" border="0">
<tr>
<td><input id="cbStatus_0" type="checkbox" name="cbStatus$0" /><label for="cbStatus_0">Approved</label></td>
<td><input id="cbStatus_1" type="checkbox" name="cbStatus$1" /><label for="cbStatus_1">Approved w/ Requirements</label></td>
<td><input id="cbStatus_2" type="checkbox" name="cbStatus$2" /><label for="cbStatus_2">Declined</label></td><td></td>
</tr>
</table>
Using PrettyCheckable plugin you can issue a single command to style it::
$('input[type="checkbox"]').prettyCheckable();
And here is what it looks like after: http://jsfiddle.net/WuFg9/
You can adjust the styles to whatever you want, borders, colors etc. etc.
I'm trying to add a PayPal button to a WordPress page (the textarea input uses TinyMCE version 3.5.8). The PayPal button has the following code:
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="paypal"><input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="SOME_ID" />
<table>
<tbody>
<tr>
<td><input type="hidden" name="on0" value="Choose:" />Choose</td>
</tr>
<tr>
<td><select name="os0"><option value="Choice">Choice</option></select></td>
</tr>
</tbody>
</table>
<input type="hidden" name="currency_code" value="USD" />
<input type="image" alt="PayPal - The safer, easier way to pay online!" name="submit" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" />
<img alt="" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1" border="0" />
</form>
Putting this HTML on the page works just fine, except there's a blank space above the table. Upon attemping to delete this extra space, TinyMCE removes the hidden inputs above the table.
Is there any way I can make TinyMCE not delete hidden inputs?
P.S. Since this is WordPress, I very-well could just put the PayPal code in custom shortcode; however I'd like to avoid this because it doesn't solve the real problem.
Have a look at the tinymce settings valid_elements and valid_children. You might need to set all the tags you use as valid tags and define the possible children to parentElements.
Tinymce has a cleanup function that strips the content of invalid code.
I have an aspx page that uses a master page. On this page I have a group of radio buttons. I need to get at the checked property for each of the elements in the radio button group in javascript. Before the page was converted to use a master page, the following javascript code worked just fine:
if((!f.rblRegUseVehicles[0].checked) && (!f.rblRegUseVehicles[1].checked))
{
isValid = "false";
}
f is the reference to the form. This worked just fine.
When the page was chanded to use a Master Page, I changed the javascript to the following:
if((!f.<%=rblRegUseVehicles.ClientID%>[0].checked) && (!f.<%=rblRegUseVehicles.ClientID%>[1].checked))
{
isValid = "false";
}
Now, the javascript is failing because it can't find the element. In the "View Source" I have elements with the name:
<input id="ctl00_cphContent_rblRegUseVehicles_0" type="radio" name="ctl00$cphContent$rblRegUseVehicles" value="Yes" />
<input id="ctl00_cphContent_rblRegUseVehicles_1" type="radio" name="ctl00$cphContent$rblRegUseVehicles" value="No" />
The only code that works is
document.<%=Form.ClientID%>.<%=rblRegUseVehicles.ClientID%>_0.checked
I want the javascript to reference the array like before the page was converted to use a Master Page. How can I do that?
This is a part of ASP.NET that has always been difficult. You need to have static javascript that references dynamically created element ids!
This is how I have always solved the problem:
Wrap your RadioButtonList in a div or p or whatever you want:
<div id="yourId">
<asp:RadioButtonList id="radiolist1" runat="server">
<!-- ... -->
</asp:RadioButtonList>
</div>
Which renders to something like this:
<div id="yourId">
<table id="radiolist1" border="0">
<tr>
<td>
<input id="radiolist1_0" type="radio" name="radiolist1" value="Item 1" checked="checked" />
<label for="radiolist1_0">Item 1</label>
</td>
</tr>
<tr>
<td>
<input id="radiolist1_1" type="radio" name="radiolist1" value="Item 2" />
<label for="radiolist1_1">Item 2</label>
</td>
</tr>
</table>
</div>
And this would allow you to have a static javascript function that targets yourId which doesn't get runat="server". Then your javascript would look something like this:
var rbl = document.getElementById("yourId");
isValid = (!rbl.getElementsByTagName("input")[0].checked
&& !rbl.getElementsByTagName("input")[1].checked);
If you want to explore the idea of using jQuery rather than straight javascript, this should do the trick for you.
if ( $('input[id*=rblRegUseVehicles]:checked').length < 0 ) isValid = "false";
The selector gets all checked radiobuttons who's id contains 'rblRegUseVehicles'.
Edit
If you want to stick with your original script,using UniqueID rather than ClientID may work
if((!f.<%=rblRegUseVehicles.UniqueID%>[0].checked) && (!f.<%=rblRegUseVehicles.UniqueID%>[1].checked))
{
isValid = "false";
}