In HTML we do have option to make a radio button checked by default. Same shown with HTML code snippet below.
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
</form>
Do we have similar option available in visual force page as well? If yes how we can achieve it?
Does it require to write a JavaScript code or can achieve through controller?
Please suggest, if solution in code provided will be highly appreciated.
I have find the solution and same providing below.
Visualforce page:
<apex: page controller="SampleCustomController">
<apex:selectRadio value="{!defaultCheck}">
<apex:selectOptions value="Male" name="Male"/>
<apex:selectOptions value="Female" name="Female"/>
</apex:selectRadio>
</apex:page>
Apex controller class:
public class SampleCustomController{
public String defaultCheck{get;set;}
SampleCustomController(){
if(defaultCheck==NULL)
{ defaultCheck='Male';}
}
}
Related
I have a form and I want to set default value in the field below but it's not working.
<span>ID User:</span>
<input type="text" th:value="${session.name}" th:field="*{userid}" th:errorclass="field-error" />
</div>
<div>
<span class="name-in">ID Room:</span>
<input type="text" th:value="${id}" th:field="*{room}" th:errorclass="field-error" />
</div>
I read some topic about this problem and I try to change as given below
th:attr="value = ${session.name}"
But It's still not working. Field ID User is empty. I don't know how to solve this problem.
Although your question contain less information, but i think you want to put default value for all field. If you like to do so change
`<input type="text" th:value="${session.name}" th:field="*{userid}" th:errorclass="field-error" />`
to
<input type="text" name="userid" value="as your wish" th:errorclass="field-error" />
Instead of changing the html, you should instead set the value of *{userid} in your controller. That way you can keep your html the same:
// Controller
modelObject.setUserId(session.name);
// HTML
<input type="text" th:field="*{userid}" th:errorclass="field-error" />
I'm currently trying to add validation to an angular 2 form, but for some reason I can't get my submit button to disable when the required fields are not filled in.
Here is the code of my form template:
<h1 md-dialog-title>{{title}}</h1>
<form #formCtrl="ngForm">
<md-dialog-content>
<md-input-container>
<input #name md-input placeholder="Name" value="" name="name" focused required>
</md-input-container>
<br />
<md-select #inputtype placeholder="Input type" name="inputtype">
<md-option *ngFor="let inputtype of inputtypes" [value]="inputtype.id">
{{inputtype.name}}
</md-option>
</md-select>
</md-dialog-content>
<md-dialog-actions>
<button type="submit" md-raised-button color="primary" [disabled]="!formCtrl.form.valid">Create</button>
</md-dialog-actions>
</form>
According to several examples, this should work, however the button is never disabled. I've also tried "!formCtrl.valid", also to no avail.
I've tried using non-material design input fields thinking maybe that would be the issue, but it still won't work.
I then tried copy/pasting the following simple example into my application, and even that won't work at all:
http://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/
Any ideas as to what might prevent it from working correctly?
Assuming you are using a newer release than Angular 2 final:
You need to add ngModel, which binds the form value based on the name attribute’s value. In your case one is name="inputtype" the other is name="name". So you need to add ngModel to bind the values, and your form should work as you wish! :)
So the following should work (removed a bit of noise from code):
<form #formCtrl="ngForm" (ngSubmit)="save(formCtrl.value)"> //whatever your submit method is
<md-dialog-content>
<md-input-container>
<input md-input name="name" required ngModel>
</md-input-container>
<md-select name="inputtype" required ngModel>
<md-option *ngFor="let inputtype of inputtypes" [value]="inputtype.id">
{{inputtype.name}}
</md-option>
</md-select>
</md-dialog-content>
<md-dialog-actions>
<button type="submit" md-raised-button color="primary" [disabled]="!formCtrl.form.valid">Create</button>
</md-dialog-actions>
</form>
Don't remember when this was introduced, this should be found somewhere in the changelogs which can be useful to have a look at once in a while, since Angular is constantly tweaking things almost in every release. So following that will keep you updated with changes and syntax :)
I need some help with the following issue. I am pretty new to JavaScript so this one is pretty tough for me. Any help would be greatly appreciated!
We have a form for registration that is already in use and I need to make some amends to it to enhance its usability. The form itself already contains several validation scripts and I need to add in a new one - an error message to appear next to the mobile field. I am unable to amend the form HTML itself so I have to do everything by javascript – I need to bind the new function to the submit button so that it fires AFTER all the other validations (field highlight, pop ups), but before the page turns over.
Here is the form (I have just left in the feild i need to amend) :
<form method="post" action="#" id="register_form" class="validate">
<input type="hidden" name="page" value="" />
<input type="hidden" name="unregistered" value="false" />
<fieldset>
<legend>I am a new online customer</legend>
<div class="element">
<label for="mobile_number">Mobile:**</label>
<input name="mobileNumber" type="text" id="mobile_number" title="Please enter at least one number" class="text validate {validate:{minLength:10, eitherOr:'#telephone_number', messages:{minLength:'Please enter a valid phone number (at least #NUM digits long)', eitherOr:'Please enter either your Telephone or Mobile number'}}}" />
</div>
<div class="element continue_shopping_cont submit">
<button type="submit" class="submit button small_button"><span>Register</span></button>
</div>
<input type="hidden" name="secure_from" value="" />
</fieldset>
</form>
Could someone help show me how i am supposed to do this and how is best to target this field?
I am trying to invoke a form submit using javascript (jquery) to invoke a webflow transition. It works and the submit invokes the desired transition. But, the updated radio button values is not reflected on the model object which is posted.
Here is the code:
<form:form method="post" action="#" commandName="infoModel" name="pageForm">
<form:input type="input" path="testMsg" id="success" />
<input type="button" id="clearSelections" value="Clear Selections">
<div class="question">
<h4><c:out value="${infoModel.questionInfo.description}"/> </h4>
<form:radiobuttons path="infoModel.answerId"
itemValue="answerId" itemLabel="answerDescription" items="${infoModel.answers}" delimiter="<br/>" />
</div>
<input type="submit" name="_eventId_saveQualitativeInput" value="Save" id="save" />
$(document).ready(function() {
$('#tabs').tabs();
//Clear selections (copy is server-side)
$('#clearSelections').click(function() {
//$('input[type="radio"]').prop('checked', false);
$('input[type="radio"]').removeAttr('checked');
$('#save').trigger('click');
});
});
</form:form>
The form:radiobutton, generates the below html:
<div class="question">
<h4>Is this a general obligation of the entity representing a full faith and credit pledge? </h4>
<span>
<input type="radio" checked="checked" value="273" name="infoModel.answerId" id="infoModel.answerId1">
<label for="infoModel.answerId1">Yes</label>
</span>
<span><br>
<input type="radio" value="274" name="infoModel.answerId" id="infoModel.answerId2">
<label for="infoModel.answerId2">No</label>
</span>
<br>
<span class="error"></span>
</div>
The input id= "success" value is registered and when the control goes to the server, the value of input id= "success" is updated in the "infoModel" object. But the value of answerId is not updated on the "infoModel" object.
Thoughts if i am missing something in the form:radiobutton element or if there is something else wrong?
Thanks in advance!
EDIT:::::::
Thanks mico! that makes sense. I stripped of some of the code first time to make it precise, but i have a list which is being used for building the radio-buttons, below is the code:
<c:forEach items="${infoModel.list["index"]}" var="qa" varStatus="rowCount">
<div class="question">
<h4><c:out value="${question.questionInfo.description}"/> </h4>
<form:radiobuttons path="list["index"][${rowCount.index}].answerId" itemValue="answerId" itemLabel="answerDescription" items="${question.answers}" delimiter="<br/>" />
<br>
</div>
</c:forEach>
Could you please suggest how i could try this one out?
NOTE: The same code works on a regular form submit on click of a button of type submit. Its the javascript form submit which is not working. I also tried to do whatever i want to do in javascript and then invoke the button.trigger('click'); form got submitted but the changes made on form in my javascript didnt reflect.
With commandName inside a form:form tag you set "Name of the model attribute under which the form object is exposed" (see Spring Documentation). Then in path you should tell the continuation of the path inside the model attribute.
With this said I would only drop the extra word infoModel from path="infoModel.answerId" and have it rewritten as path="answerId" there under the form:radiobutton.
I am having a problem with my client side validating. I am using DataAnnotations in my model. An this works when i am in the create form very nicely, but when i go to edit the information only some of the validation works.
i.e the Name box does have clientside val but the amount box does.
i have check the source name doesnot include the data-val="true". I don't understand why this would render this way because on the 'create' form it does and works fine?
<input class="text-box single-line" id="Name" name="Name" type="text" value="name" />
<span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
<input class="text-box single-line" data-val="true" data-val-number="The field Amount must be a number." data-val-required="The Amount field is required." id="Amount" name="Amount" type="text" value="120.00" />
<span class="field-validation-valid" data-valmsg-for="Amount" data-valmsg-replace="true"></span>
can somebody give me an idea how to make my 'edit' page validation work?
Thanks in advance
thank you for the help. but is have solved it!!
The problem was that because i was generated the edit view from the wrong class which meant that the DataAnnotations was not being read. what is have done now is to change the name of the class to that of my database then mark the class as partial and connected the DataAnnotaions by using this code below
[MetadataType(typeof(Budget_Validation))]
public partial class Budget
I put all the dataAnnotaions in the Budget_Validation class.
All now working fine!
Thanks