how to add dynamic name in radio button using vue js - javascript

How can I add dynamic name in radio button?
<tr v-for="user in users">
<td>
<input type="radio" :name="groups_[[ user.id ]]" v-bind:value="photographer" v-bind:checked="user.group.name == photographer"> <label>photographer</label>
<input type="radio" :name="groups_[[ user.id ]]" v-bind:value="client" v-bind:checked="user.group.name == client"> <label>client</label>
</td>
</tr>
When I tried my code above it gives me an error
Property or method "groups_" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

Convert the groups_ to string by adding single quote.. then add plus sign (+) to concatenate the groups_ string to the user id.
<input type="radio" :name="'groups_' + user.id" v-bind:value="photographer" v-bind:checked="user.group.name == photographer"> <label>photographer</label>
<input type="radio" :name="'groups_' + user.id" v-bind:value="client" v-bind:checked="user.group.name == client"> <label>client</label>

Related

bind a textbox value if checkbox is checked

how to pass a textbox value to controller based on condition .
if checkbox is checked then bind the textbox with object value and pass to the controller other wise just leave it blank and pass the user input to controller.. what i am doing is not working. what is wrong with my code it is working in the case if checkbox is checked.
$scope.Product = [
{"ProductID":12,"LNumber":"hrx",weght:"2"},
{"ProductID":13,"LNumber":"pty",weght:"1"}
]
<div>
<div>
<input type="checkbox" data-ng-model="Copyknotes" />
<span >Copy notes from</span>
</div>
<table data-ng-repeat="Item in Product track by $index">
<tr >
<td>
<input type="radio" name="groupName_{{Item.ProductID}}" data-ng-model ="Item.isSelected" />
</td>
<td data-ng-if="Copyknotes == true">
<input type="text" data-ng-model="Item.LNumber">
</td>
<td data-ng-if="Copyknotes == false" id="hi">
<input type="text" data-ng-model="Item.LNumber=""">
</td>
</tr>
</table>
</div>
Just use
data-ng-init=""
instead of
data-ng-model="Item.LNumber="""
use
data-ng-model="Item.LNumber"
<table data-ng-repeat="Item in Product track by $index">
<tr >
<td>
<input type="radio" name="groupName_{{Item.ProductID}}" data-ng-model ="Item.isSelected" />
</td>
<td data-ng-if="Copyknotes == true">
<input type="text" data-ng-model="Item.LNumber">
</td>
<td data-ng-if="Copyknotes == false" id="hi">
<input type="text" data-ng-model="Item.LNumber" data-ng-init="">
</td>
</tr>
</table>
Use scope.function
<input type="checkbox" data-ng-model="Copyknotes" ng-change="changeValue(Copyknotes)" />
//Code should be inside Angular js controller
$scope.changeValue = function(Copyknotes){
if(Copyknotes)
{
//Manipulate text box value here
$scope.Item.LNumber = 'whatever';
}
}
Here is an example:
https://plnkr.co/edit/3Vtl6roWfL1ZqaR2nEvf
<td data-ng-if="Copyknotes == false">
<input type="text" data-ng-model="Item.NNumber" ng-init="Item.NNumber = ''">
</td>
The expression was wrong - data-ng-model="Item.LNumber=""" - if you want to assign a new value, you can use Item.LNumber = "''" (two single quotes within double quotes) to avoid interference with tag attribute "" symbols. I've made a live example of how it could be done. Don't know if your controller need original values of input, so new values (when checkbox is unchecked) are saving to NNumber instead. You can freely change them to LNumber if you want. Also, ng-init directive is used to initiate NNumber parameter of object when inputs are rendered into view.
Also you should define Copyknotes to compare. Or write your conditions like ng-if="Copyknotes", ng-if="!Copyknotes".
<input type="checkbox" data-ng-model="Copyknotes" ng-change="changeValue(Copyknotes)" />
first of all remove the data-ng-model and use following:
//Code should be inside Angular js controller
var oninput = null;
$scope.changeValue = function(Copyknotes){
if(Copyknotes)
{
var oninput = document.getElementById("textbox").onchange =function(){
$scope.item.LNumber = this.value;
}
//Manipulate text box value here
}else{
$scope.Item.LNumber = '';
oninput = null
}
}

get multiple checkbox checked value in c#

In my web form I am generating multiple checkboxes dynamically. hence they are not in the control. I am trying to get the value using Request.Form[name] but it is not correct
<input type="checkbox" name="Suppresision" value="Suppresision" />Suppresision
Now I have a add button which dynamically (using Javascript) add more similar checkbox. So within my table element now I have
<input type="checkbox" name="Suppresision" value="Suppresision" />Suppresision
<input type="checkbox" name="Suppresision" value="Suppresision" />Suppresision
<input type="checkbox" name="Suppresision" value="Suppresision" />Suppresision
How do I try to get the values of all three ? I am doing the same for textbox but when I use Request.Form[textbox name] I get a comma separated values of all of them. But for the checkbox I do Request.Form["Suppresision"] I only get one value that too Suppresision instead of checked or not checked.How do I get all three value even if it not checked
If you absolutely need to get a list of all the checkbox controls you have dynamically added you could assemble them into a hidden input when you submit the form.
You need to include a hidden input for each set of checkboxes you add with a name like name="[checkbox name]_allValues"
<input type="checkbox" name="Suppresision" value="Suppresision1" />Suppresision 1
<input type="checkbox" name="Suppresision" value="Suppresision2" />Suppresision 2
<input type="checkbox" name="Suppresision" value="Suppresision3"/>Suppresision 3
<input type='hidden' value='' name="Suppresision_allVals">
Then add in this jQuery to loop the checkbox groups and you will have access to the full list of values for each checkbox on the server.
$(document.forms[0]).submit(function(event){
$('input[type=checkbox]').each(function( index ) { //loop all checkboxes
$itm = $( this );
$allVals = $('input[name=' + $itm.attr('name') + '_allVals]').first();
if ($allVals.length) { //see if we have a hidden input
$allVals.val($allVals.val()
+ ($allVals.val().length > 0 ? ',' : ' ') //add delemiter
+ ($itm.is(':checked') ? $itm.val() : '')); //add value
}
});
});
This way you will have access to the full list in Request.Form["Suppresision_allVals"] with blank values for unchecked boxes similar to what you have for empty textbox controls now.
You have same name attribute value for the three checkboxes. You should have different to make sure they can be read separately from the request form's collection on the server side. Also, in case of checkboxes, it should be checked attribute. Hopefully this will put you the right direction.
<input type="checkbox" name="Suppresision1" checked="checked" />
<input type="checkbox" name="Suppresision2" checked="" />
<input type="checkbox" name="Suppresision3" checked="" />
<input type="checkbox" class="chkItems" name="Suppresision1" checked="checked" />
<input type="checkbox" class="chkItems" name="Suppresision2" checked="" />
<input type="checkbox" class="chkItems" name="Suppresision3" checked="" />
var chkValue = [];
$('.chkItems:checked').each(function(i, e) {
chkValue.push({
chkItem : $(this).val()
});
});

How can I disable my checkbox from AngularJS input?

<div ng-repeat="x in spaceutilization">
<input type="checkbox" name="{{x.filenumber}}" id="{{x.id}}" class = "pdffiles" value="101SP{{x.initials}}.dwg" /><label for="{{x.id}}"><button type = "button" class = "btn btn-primary btn-sm hidden-sm hidden-xs"> PDF</button></label><br />
</div>
I need to be able to add something to this snippet that disables the input checkbox based on another AngularJS input such as {{x.status}}. I tried simply doing:
<input type="checkbox" name="{{x.filenumber}}" id="{{x.id}}" class = "pdffiles" value="101SP{{x.initials}}.dwg" {{x.status}} />
Where status:'disabled' but that gave an output of
{{x.status}}=""
within the input element...which I don't understand why at all. But it seemed like the simplest route.
You need to use ng-disabled="expression" directive, on basic of expression evaluation value it add disabled attribute to that element.Also for better attribute values evaluation you could use ng-attr directive
Markup
<input type="checkbox" ng-attr-name="{{x.filenumber}}" ng-attr-id="{{x.id}}" class ="pdffiles"
value="101SP{{x.initials}}.dwg" ng-disabled="x.status == 'disabled'"/>
If x.status does return a bool value then you could directly used ng-disabled="{{x.status}}"

Set a radio button in an ng-repeat to checked

Evening all. Could anyone tell me how to set a radio button to checked in an ng-repeat when it loads? In the table below I have a list of prices with a sort function I created. It sorts from the lowest price down. Is there a way I can set the lowest price radio button to 'checked' each time the table loads?
<table>
<tr ng-repeat="prices in productVariant.prices | orderBy: tcoSort">
<td><strong>{{prices.code }}</strong></td>
<td ng-click="displayFullPricing(prices)">
<input type="radio" name="{{variant.code}}" ng-click="displayFullPricing(prices, $index)">
</td>
</tr>
$scope.tcoSort = function (productVariant) {
return productVariant.nonRecurring.retailPrice + (productVariant.monthly.retailPrice * $scope.productAttributesObj.Term);
};
Thanks
Very simple used $scope.modelName and set its value to any of the value(attribute) of radio button you want to set by default for example:-
Male
Female
now set $scope.one="male" in controller you will get the default value to radio button.
In case of ng-repeat concept is same but you just need to use $parent with the model of ng-repeat because ng-repeat creates its own scope that can not be accessed from controller.
Below is small simulated example:-
<div ng-repeat="check in people">
<input type="radio" name="hello" value="{{check.name}}" ng-model="$parent.human"/> {{check.name}}
</div>
$scope.people=[
{
'name':'rachit'
},
{
'name':'gulati'
},
{
'name':'rocks'
}
]
$scope.human='gulati';//You need to set it to the lowest price from your array .
Here is fiddle
<input type="radio" name="{{variant.code}}" ng-click="displayFullPricing(prices, $index)" checked>
??
An example using checkboxes that you could use:
<tr ng-repeat="content in contents" ng-class="{danger: currentContent.resource_uri === content.resource_uri || checkboxes.isSelected[content.id]}" name="content[{{$index}}]" ng-click="selectContent(content, $index);">
<td class="grid-checkbox"><input type="checkbox" ng-model="checkboxes.isSelected[content.id]" name="checkbox[{{content.id}}]" ng-checked="checkboxes.isSelected[content.id]" ng-change="changeCheckbox(content, $index)"/></td></tr>
this is a snippet from my code I guess what you need is
<input type="checkbox" ng-model="checkboxes.isSelected[content.id]" name="checkbox[{{content.id}}]" ng-checked="checkboxes.isSelected[content.id]" ng-change="changeCheckbox(content, $index)"/>
hope it helps

Create explanation(s) box for radio button form with jQuery

I'll use a simplified version below but am trying to build a form with simple yes/no questions. If the answer is no, no explanation is required. If the answer is yes, a new table row is inserted and textarea appears requiring an explanation for that particular question.
Of note, I use the jQuery validate plugin to make sure values are checked and plan to implement a required-dependency function for each field in the end.
My Form:
<form name="formtest" action="">
<table class="background_table">
<tbody>
<tr>
<td>Are you a man?</td>
<td>
<input type="radio" name="q1" id="yes1">Yes
<input type="radio" name="q1" id="no1">No
</td>
</tr>
<tr>
<td>Do you have hair?</td>
<td>
<input type="radio" name="q2" id="yes2">Yes
<input type="radio" name="q2" id="no2">No
</td>
</tr>
<tr>
<td>Do you have children?</td>
<td>
<input type="radio" name="q3" id="yes3">Yes
<input type="radio" name="q3" id="no3">No
</td>
</tr>
</tbody>
</table>
<input type="submit" />
</form>
I believe my jQuery function would iterate through all fields (given my actual form has 20+ questions) using the .each() function and then run a test on the individual fields to see if the value was yes:checked. If it was a new row is insert after the field with a blank text area.
I am not quite sure what the best method for naming and identifying the text areas might be at this time. Ultimately, all text area answers could be combined into an array I suppose and broken out by an ID and value but not sure how I'd like to handle that quite yet.
jQuery function:
$(function() {
$('input').each( function() {
if( $('#yes1').is(':checked')) { //need to figure out how to find the yes value for each input
$('#yes1').closest('tr').after('<tr><td colspan="2">Please explain below:<br><textarea name="a1" id="a1"></textarea></td></tr>');
}
});
$("#formtest").validate({
errorLabelContainer: "#form_error_message",
wrapper: "li",
rules: {
q1: 'required',
q2: 'required',
q3: 'required',
q4: 'required',
a1: { required: "yes1:checked" },
a2: { required: "yes2:checked" },
a3: { required: "yes3:checked" },
a4: { required: "yes4:checked" }
},
messages: {
//custom messages for all rules above
},
submitHandler: function() {
//Do processing
}
});
});
My function currently does not work but am looking for guidance as to how this can best be achieved. In the end it may just be easier to present a single text area for explanation of ANY checkbox is answered 'yes' at the end of the form but feel the initial method looks nicer and allows me to separate responses if I wanted.
final update
Of note, as part of a form, users have the ability to get back to this page. To prevent them having to retype answers and selections, I use PHP SESSION variables to contain previously entered data. I needed to make sure the explanation boxes showed or hid themselves as necessary. To prevent any issues with non-js browsers, I have all my explain boxes display initially then are set to hidden if the value of the corresponding checkbox is not equal to value of 1:
$(":radio:checked").each(function() {
if( $(this).val() != 1) {
$(this).closest('tr').next().hide();
}
});
It looks like you are only checking on the initial DOM load. You need to fire off a check on click events so that your box will appear/disappear on click. I would add a hidden tr row containing each comment box, and then either show or hide as appropriate. Something like this:
$('input:radio').click(function() {
$commentTr = $(this).closest('tr').next();
if ($(this).val() == 'Yes') {
$commentTr.hide();
}
else {
$commentTr.show();
}
});
On closer inspection, I suppose the check for a value of "Yes" wouldn't quite work. I'd recommend using HTML label tags with the "for" attribute populated with unique IDs of each input.
<input type="radio" name="q1" id="yes1"><label for="yes1">Yes</label>
Then you could have a check like:
$('label[for="' + id + '"'].html() == 'Yes'
I've set up a jsfiddle here which I think does what you're looking for.
There are a couple of things to consider with your current solution. First of all, as Danimal37 mentions, you are only running this on load of the page. You want the explanation boxes to show/hide whenever the value of each radio button change. Second of all, there is a built-in way to distinguish between the 'yes' and the 'no'. Just give the input elements value attributes. To fix these problems, I propose the following (I've ignored the validation portion and you can see it in action in this jsfiddle: http://jsfiddle.net/xonev/RU986/2/):
// The Javascript
$('input[value="1"]').change(function () {
var explainId = $(this).attr('name') + 'explain';
$(this).closest('tr').after('<tr id="' + explainId + '"><td colspan="2">Please explain below:<br><textarea name="a1" id="a1"></textarea></td></tr>');
});
$('input[value="0"]').change(function () {
var explainId = $(this).attr('name') + 'explain';
$(this).closest('tr').next('tr#' + explainId).remove();
});
<!-- The HTML -->
<form name="formtest" action="">
<table class="background_table">
<tbody>
<tr>
<td>Are you a man?</td>
<td>
<input type="radio" name="q1" id="yes1" value="1" />Yes
<input type="radio" name="q1" id="no1" value="0" />No
</td>
</tr>
<tr>
<td>Do you have hair?</td>
<td>
<input type="radio" name="q2" id="yes2" value="1" />Yes
<input type="radio" name="q2" id="no2" value="0" />No
</td>
</tr>
<tr>
<td>Do you have children?</td>
<td>
<input type="radio" name="q3" id="yes3" value="1" />Yes
<input type="radio" name="q3" id="no3" value="0" />No
</td>
</tr>
</tbody>
</table>
<input type="submit" />
</form>

Categories