need some help on radio buttons. How can i bind 2 radio buttons that are for one particular question but use 2 different fields in the database. For example there is a question that has a Yes/No answer. The yes answer binds to one field, and the No answer to another, they don't bind to a single filed that has a true, false value.
<div class="radio-s">
<input type="radio" ng-value="true" data-name="use_plan"
data-value="true" ng-model="record.offer_plan" />
<label>Yes</label>
</div>
<div class="radio-s">
<input type="radio" ng-value="false" data-name="use_plan"
data-value="true" ng-model="record.offer_plan" />
<label>No</label>
</div>
Thanks in advance.
Attach the name attribute to both of your radio buttons so that only one can be selected at a time and also bind them to the respective fields from your DB
<div class="radio-s">
<input type="radio" name="planGroup" ng-value="true" data-name="use_plan"
data-value="true" ng-model="record.offer_plan_yes" />
<label>Yes</label>
</div>
<div class="radio-s">
<input type="radio" name="planGroup" ng-value="false" data-name="use_plan"
data-value="true" ng-model="record.offer_plan_no" />
<label>No</label>
</div>
Related
I've got a form similar to the below, the name attributes have been set with MVC model binding in mind.
At the moment I'm only able to select one radio between the two forms. I want to select a radio button for each form, i.e. one radio button selected per form at any given time. I can't find a way to do this whilst keeping my name attribute naming convention.
Any ideas, thanks.
<div class="form-group-1">
<input type="radio" name="Students[0].Answer1" value=""><br>
<input type="radio" name="Students[0].Answer2" value=""><br>
</div>
<div class="form-group-2">
<input type="radio" name="Students[1].Answer1" value=""><br>
<input type="radio" name="Students[1].Answer2" value=""><br>
</div>
I have a textbox which I would like bound with data from the logged in user, so that the user can't edit it. Would this need to be a label, or is there another way?
<p>Practice:
<input class="form-control" type="text" value="6666666 - Siya's Awesome world" readonly="readonly" id="txtName" />
</p>
Ps. I don't want the values entered as I did above. Your help is appreciated.
Use input like this :
<input readonly="readonly" disabled="disabled" class="text-box single-line readonly" id="field-id" name="field-name" />
I am using MVC6 and have a checkbox input field in my form, but when the form is submitted the value for the checkbox always gets passed to the ViewModel as false:
Here is how the property is declared in my ViewModel:
[Display(Name = "Include Sales Tax")]
public bool IncludeSalesTax { get; set; }
Here is how the form looks in my MVC6 razor form:
<div class="form-group">
<div class="checkbox">
<label><input asp-for="IncludeSalesTax" type="checkbox" value="">#Html.DisplayNameFor(m => m.IncludeSalesTax)</label>
</div>
</div>
I figured the above would be the best way to follow Twitter Bootstrap standards and use the ASP.NET MVC6 asp-for tag for model binding.
When I submit the form the value for IncludeSalesTax is always false, even when checked. What am I doing wrong?
input type checkbox sends an "on" if it is set. Otherwise it is not sent.
It is important, that you set the value attribute to true. In this case it sends true or nothing, which is perfect to bind to a boolean.
<input type="checkbox" name="yourPropertyName" value="true" checked />
Pinki's answer above is good if the checkbox should default to checked.
If the checkbox should default to unchecked, a little in-line javascript sets the value to true or false upon clicking:
<input name="yourPropertyName" type="checkbox" value="false" onchange="this.value=this.checked">
After letting Visual Studio generate the form based on my ViewModel here is how it does it:
<div class="checkbox">
<input asp-for="isTaxable" />
<label asp-for="isTaxable"></label>
</div>
Additionally, I was missing the closing of my input tag. So it can also be done like this which is the bootstrap preferred way:
<label><input asp-for="isTaxable" type="checkbox" value=""/>#Html.DisplayNameFor(m => m.isTaxable)</label>
The razor view engine normally creates a checkbox and one hidden input using the same name.
You can simply use the html below to ensure you get your desired result:
<div class="form-group">
<div class="checkbox">
<input type="checkbox" value="true" name="IncludeSalesTax" />Include Sales Tax
<input type="hidden" value="false" name="IncludeSalesTax" />
</div>
</div>
Using #Html.CheckBoxFor generates a hidden field. Is there a way I can avoid generating that ?
Why I want to do that ? I was provided design, which has some script or library used in it for visual display. It works fine if Html is in below format (Checkbox with Label):
<div>
<input type="checkbox" value="resources" id="resources" class="cb">
<label for="resources">
I need an offset facility
</label>
<i class="tooltip-icon" data-icon="repayments"></i>
</div>
But it do not work if there is a hidden field between Checkbox and Label:
<div>
<input id="HomeLoanLead_Redraw_flexibility_Value" class="cb" type="checkbox" value="true" name="HomeLoanLead.Redraw_flexibility_Value" data-val-required="The Redraw_flexibility_Value field is required." data-val="true">
<input type="hidden" value="false" name="HomeLoanLead.Redraw_flexibility_Value">
<label for="HomeLoanLead_Redraw_flexibility_Value"> I want to make extra repayments </label>
<i class="tooltip-icon" data-icon="loan"></i>
</div>
If I try using <input type=checkbox> I m afraid I will not get out of box model binding in post action.
Please help.
I am posting my form to an MVC Controller, where I want to process some changes the user has made on a grid like html structure.
I have checkboxes rendered as simple HTML in my View for each row :
<input type="checkbox" id="cbxR1" checked="checked" />
<input type="checkbox" id="cbxR2" checked="checked" />
I would like to know how I would retrieve a checkbox value after an AJAX post.
I am trying to use the following to retrieve the
HttpContext.Current.Request.Form["cbxR1"]
and am always getting a null, regardless of whether the checkbox was checked or not.
The cbxR1, cbxR2 should be the name of an input element, not the id.
<form ...>
<input type="checkbox" name="cbxR1" checked="checked" />
<input type="checkbox" name="cbxR2" checked="checked" />
</form>