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');
Related
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()
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");
}
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 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();
});
Is this even possible? Maybe i am stupid but i cannot apply any of the answers here or elsewhere to my specific situation.
What i want to do is pass a strongly typed model of Quiz to my view. Quiz has a collections of questions. Question has a collection of possibleanswers.
Questions look like:
Question.Text
Question.Id
Question.PossibleAnswers
PossibleAnswers look like:
PossibleAnswer.Id
PossibleAnswer.Value
PossibleAnswer.Label
PossibleAnswer.Selected
I want to pass the Quiz to the view, the view should setup the form where each Question has a radiobuttonlist(group) of PossibleAnswers.
Question1 text blah blah blah:
<input id="1_1" type="radio" name="question1" value="1" />
<input id="1_2" type="radio" name="question1" value="2" />
<input id="1_3" type="radio" name="question1" value="3" />
Now i don't care exactly the format for the id's of the radio buttons in the group.. clearly MVC must care.. so whatever way works i want to do that. But i would expect when i submit the form to the action i should be able to loop through the Questions and get the possibleAnswer in each Question's possibleAnswer collections with the .isAnswer marked as true:
foreach(var item in model.Questions)
{
foreach(var aitem in item.PossibleAnswers)
{
if(aitem.Selected)
//do some stuff
}
}
so i don't get it.. this:
#foreach (var item in Model.Questions)
{
#foreach (var jitem in item.PossibleAnswers)
{
#Html.RadioButtonFor(x => item.QuestionId, jitem.Value)
}
}
is not even close.. can someone please explain what i am doing wrong? Is my model wrong? Can MVC do this? Do i need to change the PossibleAnswer model type to RadioButtonListItems or something? help!
------------------------------------ ** UPDATE ** ----------------
#for (int i = 0; i < Model.Questions.Count(); i++)
{
<p>#Model.Questions.ElementAt(i).QuestionText</p>
#Html.RadioButtonListFor(m => m.Questions.ElementAt(i).AnswerRadios,
"Question" + i);
}
This code seems to work! At least it will output some radiobuttons.. BUT it is outputting the html as special entities..
<td id="Question0_Container">
<input id="Question0_1" name="Question0_value" type="radio" value="17" />
<label for="Question0_1">1</label>
<input id="Question0_2" name="Question0_value" type="radio" value="18" />
<label for="Question0_2">2</label>
<input id="Question0_3" name="Question0_value" type="radio" value="19" />
<label for="Question0_3">3</label>
<input id="Question0_4" name="Question0_value" type="radio" value="20" />
<label for="Question0_4">4</label>
<input id="Question0_5" name="Question0_value" type="radio" value="21" />
<label for="Question0_5">5</label>
</td>
Here is what I use. I have made some minor modifications but it works great.