I am creating web application using JSF 2.0 where I want to set checkboxes to be selected when page loads.
<h:selectManyCheckbox value="#{UserRegistration.rightSelected}" id="myRight">
<f:selectItem itemValue="add" itemLabel="Add"/>
<f:selectItem itemValue="delete" itemLabel="Delete" />
<f:selectItem itemValue="edit" itemLabel="Edit" />
</h:selectManyCheckbox>
In this case, I want to set, Add and Delete checkbox to be selected by-default. How can I do this?
I tried with,
<body onload="myRight:0:true">
Generate HTML content is
<td><table id="myRight">
<tr>
<td>
<input name="myRight" id="myRight:0" value="add" type="checkbox" checked="checked" /> <label for="myRight:0" class=""> Add</label></td>
<td>
<input name="myRight" id="myRight:1" value="delete" type="checkbox" checked="checked" /><label for="myRight:1" class=""> Delete</label></td>
<td>
<input name="myRight" id="myRight:2" value="edit" type="checkbox" checked="checked" /><label for="myRight:2" class=""> Edit</label></td>
</tr>
however it is not working.
Please suggest me how to get this done?
if rightSelected is an array init your rightSelected as following
private String[] rightSelected= {"add","delete"};
if rightSelected is a List just do
rightSelected.add("add");
rightSelected.add("delete");
or
List<String> rightSelected = Arrays.asList("add", "delete");
Related
I want to make an open "other" field in an HTTP radio form like in the following picture. is it possible? i had in mind something like this:
class="text"><input type="radio" name="sex" id="sex" ="male" checked />male
<input type="radio" name="sex" id="sex" value="female" /> female
<input type="text" name="sex" id="sex" value=(Entered-Value)/>enter other:
A simple demo snippet. It add a change event to the radio buttons and checks the value and based on that shows or hides the textbox.
<div id="radiolist">
<div>
<input type="radio" name="sex" id="sex_1" value="M" />
<label for="sex_1">Male</label>
</div>
<div>
<input type="radio" name="sex" id="sex_2" value="F" />
<label for="sex_2">Female</label>
</div>
<div>
<input type="radio" name="sex" id="sex_3" value="A" />
<label for="sex_3">Apache Helicopter</label>
</div>
<div>
<input type="radio" name="sex" id="sex_4" value="O" />
<label for="sex_4">Other</label>
</div>
<div id="sex_other_container" style="display:none">
<input type="text" name="sex_other" id="sex_other" maxlength="25" />
</div>
</div>
<script>
var $othersex = $('#sex_other_container');
$('#radiolist input[type=radio]').bind('change', function () {
if ($(this).val() === 'O') {
$othersex.show();
} else {
$othersex.hide();
}
});
</script>
It really depends if you want to say hide/show the text box when they select other.
But, then again, they might change their mind, or not even enter anything into that text box - so you start to expand the complexity of the UI.
Sometimes its just better to drop in a radiobuttion list, edit the choices, and then drop in a div next to the rb list, float it, and you are done.
Say, like this:
<div style="float:left">
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<asp:ListItem>Male</asp:ListItem>
<asp:ListItem>Female</asp:ListItem>
<asp:ListItem >Other</asp:ListItem>
<asp:ListItem>Prefer not to say</asp:ListItem>
</asp:RadioButtonList>
</div>
<div style="float:left;margin-left:-65px;margin-top:1px">
<br />
<br />
<br />
<asp:TextBox ID="txtOther" runat="server" Height="18px" Width="70px"></asp:TextBox><br />
</div>
<div style="clear:both;height:8px"></div>
<asp:Button ID="Button1" runat="server" Text="Button" cssclass="btn"/>
And you get this:
And you code behind say can be this for the button
Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
Dim sChoice As String = RadioButtonList1.SelectedItem.Value
If sChoice = "Other" Then
' get the text enter
sChoice = txtOther.Text
End If
Debug.Print("User choice = " & sChoice)
End Sub
So, keep it simple is often the easy approach here. If 20 things on your page are OH SO having to be customized with JavaScript and all kinds of specials markup, then your project gets in trouble real fast. 10-15 things on a page, each a few minutes of time now becomes say 10-20 minutes of time, and that translates into 100-200 minutes of development time. Then the project and efforts takes way too long to finish.
And if you can try to stick to standard controls, then as above shows, the resulting code behind becomes (and stays) rather simple.
I'm trying to use Angular's $dirty flag to submit only the changed fields in a form.
When I ran into radio button groups, I was missing the changes in the list of changed fields. I have a fiddle that reproduces the problem I am seeing.
<div ng-app="form-example" ng-controller="MainCtrl">
<form name="form" novalidate>
<input type="radio" name="myRadio" ng-model="myRadio" value="one" required>One<br />
<input type="radio" name="myRadio" ng-model="myRadio" value="two" required>Two<br />
<input type="radio" name="myRadio" ng-model="myRadio" value="three" required>Three<br />
<input type="radio" name="myRadio" ng-model="myRadio" value="four" required>Four<br />
<input type="radio" name="myRadio" ng-model="myRadio" value="five" required>Five<br /><br />
Form $dirty: {{form.$dirty}}<br />
Field $dirty: {{form.myRadio.$dirty}}<br />
Value: {{myRadio}}
</form>
</div>
The field's $dirty flag will only change when the last radio button is clicked even though the form $dirty updates properly.
Am I missing something fundamental here? and is there a workaround for this behavior?
Each ng-model actually instantiates a controller.
When you click any radio button, the controller sets $dirty field to true and sets form.$dirty to true.
The problem is that form.myRadio holds the reference to the last radio button's model.
As a workaround you can use nested forms with ng-form. See here: http://jsfiddle.net/UM578/
I gave each radio input a unique name. Maybe you can give a broader view of what you are trying to do.
<div ng-app="form-example" ng-controller="MainCtrl">
<form name="form" novalidate>
<input type="radio" name="myRadio1" ng-model="myRadio" value="one" required>One<br />
<input type="radio" name="myRadio2" ng-model="myRadio" value="two" required>Two<br />
<input type="radio" name="myRadio3" ng-model="myRadio" value="three" required>Three<br />
<input type="radio" name="myRadio4" ng-model="myRadio" value="four" required>Four<br />
<input type="radio" name="myRadio5" ng-model="myRadio" value="five" required>Five<br /><br />
Form $dirty: {{form.$dirty}}<br />
Field 1 $dirty: {{form.myRadio1.$dirty}}<br />
Field 2 $dirty: {{form.myRadio2.$dirty}}<br />
Field 3 $dirty: {{form.myRadio3.$dirty}}<br />
Field 4 $dirty: {{form.myRadio4.$dirty}}<br />
Field 5 $dirty: {{form.myRadio5.$dirty}}<br />
Value: {{myRadio}}
</form>
I want to get a radio button to display an alert when it is selcted, so the user can check that they have chosen the correct value. This is the code I have for the radio buttons:
<tr>
<td><input type="radio" name="level" id="GCSE" value="GCSE">GCSE<br>
<input type="radio" name="level" id="AS" value="AS">AS<br>
<input type="radio" name="level" id="A2" value="A2">A2</td>
</tr>
How would I get so when any of these radio buttons are selected an alert is displayed to the user saying: "Are you sure you have chosen the correct entry level?"
Please keep answers simple, as I have only been learning HTML for 3 weeks
You can do:
<input type="radio" name="level" id="GCSE" value="GCSE" onclick="alert('test');" />
Good luck!
let's assume you have a form called # Myform
Then your code will be like this:
<form id="myForm">
<input type="radio" name="level" id="GCSE" value="GCSE" /> GCSE <br />
<input type="radio" name="level" id="AS" value="AS" /> AS <br />
<input type="radio" name="level" id="A2" value="A2" /> A2 <br />
</form>
Then, put in a tag script something like this:
<script>
$('#myForm input').on('change', function() {
alert("Are you sure you have chosen the correct entry level? +"$('input[name=level]:checked', '#myForm').val());
});
</scritp>
Hope this works for you!
Thx
I have 2 radio inputs. A,B
I an trying to make A as a selected radio by default.
And I want the following behavior: when A get hidden then B should get checked by default.
This is what I tried. Please take a look.
<div >
<input type="radio" checked="checked" value="0" name="a" />
<strong>A</strong>
</div>
<div>
<input type="radio" checked="" value="1" name="b" />
<strong>
B
</strong>
</div>
<input type="text" onfocus="Javascript:document.forms[1].opt_payment[1].checked=true;" maxlength="20" value=" " name="" />
Thanks
Use the attribute checked="checked" for A. Also, if you want only one of A and B to be checked at a time, give them the same name but different values.
checked="" means "Should be checked by default". There is no way to have the attribute present but indicate "not checked".
If you don't want a form control to be checked by default then do not include any checked attribute for it
<div >
<input id="radioA" type="radio" checked="checked" value="0" name="a" />
<strong>A</strong>
</div>
<div>
<input id="radioB" type="radio" value="1" name="b" />
<strong>
B
</strong>
</div>
Script:
if($("#radioA").is(":hidden")){
$("#radioB").attr("checked","checked");
}
you can also use
$("#radioB").attr("checked",true);
or use prop for jquery version > 1.6
$("#radioB").prop("checked",true);
I want to change the text of a radio button (HTML element), not an ASP.NET component.
How can I change it from ASP.NET?
Add a simple:
runat="server"
to your HTML tag and it will allow a few of the properties to be modified through code behind.
These are known as "hybrid controls."
You would need to add a runat="server" attribute to the HTML for that element.
<input type="radio" id="someRadioId" value="bleh" runat="server">
This will allow you to access the element via its ID, someRadioId. This element in your code behind will be of type HtmlInputRadioButton.
See this article on MSDN
A simple RadioButtonList, when initialized like this:
list.Items.Add(new ListItem("item 1", "1"));
list.Items.Add(new ListItem("item 2", "2"));
list.Items.Add(new ListItem("item 3", "3"));
renders to the following HTML:
<table id="list" border="0">
<tr>
<td><input id="list_0" type="radio" name="list" value="1" /><label for="list_0">item 1</label></td>
</tr><tr>
<td><input id="list_1" type="radio" name="list" value="2" /><label for="list_1">item 2</label></td>
</tr><tr>
<td><input id="list_2" type="radio" name="list" value="3" /><label for="list_2">item 3</label></td>
</tr>
</table>
So via JavaScript you can loop through the elements with the type "radio", grab their id and then look for label elements that have the id as the 'for' value. And update their innerHTML.