CFWheels: Form Helper Radio Button - cfwheels

I am using CFWheels for form validation. I have presenseOf() validation checks in both objects models. I have a form with a textbox and a set of radio buttons.
However If I submit the form empty, the validation for supervisor works but validation for the user checklist does not work. It gives the error;
"uchecklist" is not defined in the params variable.
On further observation, I notice that when the form is submitted, params struct has the "supervisor[name]" object but its empty, however it doesn't even have the "uchecklist[cstatus]" object. Moreover only when I select one of the radio buttons then the "uchecklist[cstatus]" object is submitted with that radio button's value.
I need to validate if at least one of the radio button is select, I guest this functionality is different from the empty text box validation.
Can someone show me how a radio button is validated using CFWheels form helpers.
Controller
public function t_validate()
{
title = "Home";
supervisor = model("supervisors");
uchecklist = model("user_checklist");
}
public function t_validate_complete()
{
title = "Home";
supervisor = model("supervisors").new(params.supervisor);
supervisor.save();
uchecklist = model("user_checklist").new(params.uchecklist);
uchecklist.save();
renderPage(action="t_validate");
}
View
<cfoutput>
<cfdump var="#params#">
#errorMessagesFor("supervisor")#
#startFormTag(action="t_validate_complete")#
<div>
<label for="">Supervisor:</label>
<input name="supervisor[name]" value="" />
</div>
<fieldset>
<input type="radio" name="uchecklist[cstatus]" value="1" />
<label for="profile-eyeColorId-2">Blue</label><br />
<input type="radio" name="uchecklist[cstatus]" value="2" />
<label for="profile-eyeColorId-1">Brown</label><br />
<input type="radio" name="uchecklist[cstatus]" value="3" />
<label for="profile-eyeColorId-3">Hazel</label><br />
</fieldset>
<div>
<input type="submit" value="Save Changes" />
</div>
#endFormTag()#
</cfoutput>

An unchecked radio button will submit no data to the server. This isn't a unique problem to ColdFusion or CFWheels.
To fix, provide a default value for the struct at the beginning of your controller action:
public function t_validate_complete()
{
// Provides an empty struct for the model to consume if none of the radio buttons are checked.
param name="params.uchecklist" type="struct" default="#StructNew()#";
title = "Home";
supervisor = model("supervisors").new(params.supervisor);
supervisor.save();
uchecklist = model("user_checklist").new(params.uchecklist);
uchecklist.save();
renderPage(action="t_validate");
}

Related

Thymeleaf: Partially set values to model object from outside the form tags

I have an model object that I send to front end. I populate that object inside the form. What I want to know is that if I can partially populate that object from a different event before user submits his/her form?
Example:
Entity:
public class Participant {
public String username;
public boolean taskCompleted;
}
Thymeleaf Form:
<form th:object="${participant}" th:action="#{/join}" method="post">
<input type="text" th:field="*{username}" >
<button type="submit">Join!</button>
</form>
Before submitting the form, I give users a task, like clicking a button on a different part of the page. If they do it, I want to do something like taskCompleted = true of the same participant object. Is that possible?
Use a hidden input in your form:
<form th:object="${participant}" method="post">
<input type="text" th:field="*{username}" >
<input type="hidden" th:field="*{taskCompleted}" />
<button type="submit">Join!</button>
</form>
When the user clicks a button, use JavaScript to set the value of the hidden input to true.
<!-- This button flips the value of taskCompleted to true -->
<button onclick="document.getElementById('taskCompleted').value = 'true';">Do the task first!</button>

Thymeleaf set default value [duplicate]

I am programming in Spring and using Thymeleaf as my view, and am trying to create a form where users can update their profile. I have a profile page which lists the user's information (first name, last name, address, etc), and there is a link which says "edit profile". When that link is clicked it takes them to a form where they can edit their profile. The form consists of text fields that they can input, just like your standard registration form.
Everything works fine, but my question is, when that link is clicked, how do I add the user's information to the input fields so that it is already present, and that they only modify what they want to change instead of having to re-enter all the fields.
This should behave just like a standard "edit profile" page.
Here is a segment of my edit_profile.html page:
First Name:
Here is the view controller method that returns edit_profile.html page:
#RequestMapping(value = "/edit", method = RequestMethod.GET)
public String getEditProfilePage(Model model) {
model.addAttribute("currentUser", currentUser);
System.out.println("current user firstname: " + currentUser.getFirstname());
model.addAttribute("user", new User());
return "edit_profile";
}
currentUser.getFirstname() prints out the expected value, but I'm getting blank input values in the form.
Thanks.
Solved the problem by removing th:field altogether and instead using th:value to store the default value, and html name and id for the model's field. So name and id is acting like th:field.
I'm slightly confused, you're adding currentUser and a new'd user object to the model map.
But, if currentUser is the target object, you'd just do:
<input type="text" name="firstname" value="James" th:value="${currentUser.firstname}" />
From the documentation:
http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html
I did not have a form with input elements but only a button that should call a specific Spring Controller method and submit an ID of an animal in a list (so I had a list of anmials already showing on my page). I struggled some time to figure out how to submit this id in the form. Here is my solution:
So I started having a form with just one input field (that I would change to a hidden field in the end). In this case of course the id would be empty after submitting the form.
<form action="#" th:action="#{/greeting}" th:object="${animal}" method="post">
<p>Id: <input type="text" th:field="*{id}" /></p>
<p><input type="submit" value="Submit" /> </p>
</form>
The following did not throw an error but neither did it submit the animalIAlreadyShownOnPage's ID.
<form action="#" th:action="#{/greeting}" th:object="${animal}" method="post">
<p>Id: <input type="text" th:value="${animalIAlreadyShownOnPage.id}" /></p>
<p><input type="submit" value="Submit" /> </p>
</form>
In another post user's recommended the "th:attr" attribute, but it didn't work either.
This finally worked - I simply added the name element ("id" is a String attribute in the Animal POJO).
<form action="#" th:action="#{/greeting}" th:object="${animal}" method="post">
<p>Id: <input type="text" th:value="${animalIAlreadyShownOnPage.id}" name="id" /></p>
<p><input type="submit" value="Submit" /> </p>
</form>

How to add form validation on group of radio button using jquery form validation plugin

How to add form validation on group of radio button using jquery form validation plugin. I have tried to add data-validation="required" but its not working.
PFB HTML code :
<input type="radio" id="inlineRadio1" value="option1" name="radioInline" data-validation="required">
<label for="inlineRadio1" data-validation="radio_button"> Inline One </label>
<input type="radio" id="inlineRadio2" value="option2" name="radioInline" data-validation="required">
<label for="inlineRadio2"> Inline Two </label>
</div>
Script code is :
$.validate()
I have taken the plugin from this url http://www.formvalidator.net/
You have to make a custom validator called custom radio. and add the attribute "data-validation="custom_radio" on input type
PFB code for your reference:
<div class="radio radio-info radio-inline">
<input type="radio" id="inlineRadio1" value="option1" name="radioInline" data-validation="custom_radio">
<label for="inlineRadio1" data-validation="radio_button"> Inline One </label>
<input type="radio" id="inlineRadio2" value="option2" name="radioInline" data-validation="custom_radio">
<label for="inlineRadio2"> Inline Two </label>
</div>
This is javascript code for custom validator where you return boolean based on value. which should get called before $.validate() function.
$.formUtils.addValidator({
name : 'custom_radio',
validatorFunction : function(value, $el, config, language, $form) {
if(value==='option 1'){
return false;
}else{
return true;
}
},
errorMessage : 'You have to atleast check one radio',
errorMessageKey: 'badradiobutton'
});
$.validate()

mvc3 and jquery - check RadioButtonFor

I have 3 radio buttons that are rendered in an mvc3 View. I'm using a view model and the following is View.aspx page where the radioButtonFor is rendered:
<%= Html.RadioButtonFor(model => model.Input.YesNoMaybe, item.Value, new { id = String.Format("Input_YesNoMaybe_{0}", item.Value) })%>
Can someone please help me figure out how to simply access and select the 2nd of the 3 radio buttons to checked using jQuery?
So far I've tried multiple variations of the following:
$("input[name='Input.YesNoMaybe_1']").attr('checked', 'checked');
This is HTML being rendered:
<div id="divEscrowFeeSplit">
<input type="radio" value="1" name="Input.YesNoMaybe" id="Input_YesNoMaybe_1" data-val-required="required." data-val-range-min="1" data-val-range-max="2147483647" data-val-range="select a valid option" data-val-number="Must be a number." data-val="true">
<label for="Input_YesNoMaybe_1">Yes</label>
<input type="radio" value="2" name="Input.YesNoMaybe" id="Input_YesNoMaybe_2">
<label for="Input_YesNoMaybe_2">No</label>
<input type="radio" value="3" name="Input.YesNoMaybe" id="Input_YesNoMaybe_3" checked="checked">
<label for="Input_YesNoMaybe_3">Maybe</label>
Try this:
$("#Input_YesNoMaybe_1").attr('checked', 'checked');

ASP MVC3 checkbox action without submit button

I am using ASP.net for a program with a number of check boxes and a submit button which initiates an action depending on the selected check boxes.
However, one of my check boxes should behave as this submit button, i.e, upon selecting/deselecting this check box, the same action as the button must be triggered. Can someone please help me in doing this (or perhaps direct me to a tutorial)
I have a controller class and model.
Thanks you
EDIT
The program look like:
#using(Html.BeginForm("controllername", FormMethod.Get)) {
#html.CheckBox("check1");
#HTMl.Checkbos("check2");
<input type="submit" value="Submit" />
}
Everything else is pretty much handled in the controller.
You can use javascript to listen to the check event of your check box and then invoke the form submit.
Assuming your markup of view is like this
<form id="yourFormId" action="user/post">
<input type="checkbox" class="optionChk" value="1" /> One
<input type="checkbox" class="optionChk" value="2" /> Two
<input type="checkbox" class="optionChk" value="3" /> Three
</form>
<script type="text/javascript">
$(function(){
$(".optionChk").click(function(){
var item=$(this);
if(item.val()=="2") //check your condition here
{
item.closest("form").submit();
}
});
});
</script>
EDIT : As per the question edit.
Change the CheckBox Helper method usage like the below to add a css class to the checkbox so that we can use that for the jQuery selection.
#Html.CheckBox("check1",new { #class="optionChk"})
imagining you have something like this:
#using(Html.BeginForm()) {
<label class="checkbox">
<input type="checkbox" name="chb_a" id="chb_a"> Option A
</label>
<label class="checkbox">
<input type="checkbox" name="chb_b" id="chb_b"> Option B
</label>
<label class="checkbox">
<input type="checkbox" name="chb_c" id="chb_c"> Option C
</label>
<label class="checkbox">
<input type="checkbox" name="chb_d" id="chb_d"> Option D
</label>
<button type="submit" class="btn">Submit</button>
}
you can write a simple jQuery to complement:
$(".submit").click(function() {
// find the <form> the element belongs and submit it
$(this).closest('form').submit();
});
and with this, all you need is to add a class named submit to any checkbox or more buttons if you want them to submit
for example:
<label class="checkbox">
<input type="checkbox" name="chb_e" id="chb_e" class="submit"> Option E
</label>
You can bind the click events on the checkboxes.
$( '.myCheckboxes' ).click(function () {
var clickedBox = $( this );
// now do something based on the clicked box...
});
If you need to know which checkboxes are checked, that's just another selector.
$( '.myCheckboxes:checked' ).each(function () {
// Now you have access to each checked box.
// Maybe you want to grab their values.
});
Just bind the checkbox to a click event. Assuming you have a way of uniquely identifying the checkbox that submits the form.
$( '#formSubmitCheckbox' ).click(function() {
$( '#myForm' ).submit();
});

Resources