I currently have this UI:
the problem is that when I click one radio button, any preselected button will become unselected. So that's telling me that there aren't different input groups - all of the <input> tags are probably in one big group.
This is probably a pretty vanilla problem, but I am simply not an HTML or Angular expert.
Here is the code for this, there is an outer loop and an inner loop using ng-repeat:
<form name="myQuestionsForm" ng-submit="submit()"> // outer form
<div class="panel panel-default" ng-repeat="q in questions | orderBy:[]">
<h1>{{q.prompt.value}}</h1>
<div class="panel-body">
<form id="aform"> // inner form
<div ng-repeat="c in q.children | orderBy:[]">
<div ng-if="c.kind == 'text'">
<label>
{{c.value}}
<textarea name="response" class="form-control" ng-value="c.value" ng-model="q.newResponse.value"></textarea>
</label>
</div>
<div ng-if="c.kind == 'checkbox'">
<label>
{{c.value}}
<input type="checkbox" name="response" class="form-control" ng-value="c.value" ng-model="q.newResponse.value">
</label>
</div>
<div ng-if="c.kind == 'radio'">
<label>
{{c.value}}
<input type="radio" name="response" class="form-control" ng-value="c.value" ng-model="q.newResponse.value">
</label>
</div>
</div>
</form>
</div>
</div>
<div style="text-align: center;">
<button type="submit" class="btn btn--success btn">
<h5>Submit</h5>
</button>
</div>
</form>
Perhaps the reason this is happening is because I have nested forms? Maybe I need to get rid of the outer form?
Group radio buttons with the name attribute.
<input> type attribute
The type of control to display. The default type is text, if this attribute is not specified. Possible values are:
radio: A radio button. You must use the value attribute to define the value submitted by this item. Use the checked attribute to indicate whether this item is selected by default. Radio buttons that have the same value for the name attribute are in the same "radio button group". Only one radio button in a group can be selected at a time.
– MDN HTML Element Reference - <input>
See also:
AngularJS input[radio] Directive API Reference
AngularJS ng-value Directive API Reference
AngularJS ng-checked Directive API Reference
Related
I am dynamically populating the radio button using a json. And using ng-repeat to display it. My issue is that the last radio button gets picked by default which I don't want. I don't see any reason for it to be selected.
<div ng-repeat="bankAccount in availableBankAccounts">
<div class="account-list grey-bottom-border">
<div class="col-sm-6">
<label class="radio col-xs-12 spacer-top-sm option-label">
<input type="radio" name="radio2" ng-model="updateDD.bankAccountId" ng-value="updateDD.bankAccountId" ng-click="selectedReason(bankAccount)" required="" class="ng-untouched ng-dirty ng-valid ng-valid-required">
<span class="control-indicator control-indicator-lg hand-cursor"></span>
<span>Account ending in *{{bankAccount.depositAccountNumber|last4Digits}}</span>
</label>
<!-- <p>Account ending in *7890</p> -->
</div>
</div>
</div>
Js file:
$scope.updateDD.bankAccountId=$scope.radio7;
if($scope.availableBankAccounts.length>1)
{
$scope.createJson();
}
Any help indicating what is making last radio button select by default will be helpful.
Try $scope.availableBankAccounts.length>=1
Should work
You are giving the same value to ng-model, where you want to see the selected value and ng-value, which you want to use for value.
Instead of
ng-model="updateDD.bankAccountId" ng-value="updateDD.bankAccountId"
you should do something like
ng-model="updateDD.bankAccountId" ng-value="bankAccount.Id"
I have an ng-repeat with a bunch of radio buttons inside:
<div class="panel panel-default" ng-repeat="offer in vm.offerList">
...
<td ng-show="offer.edit">
<div class="row">
<input type="radio" name="before" ng-model="offer.before" value="false">
<input type="radio" name="before" ng-model="offer.before" value="true">
</div>
</td>
...
</div>
The model offer.before has the correct value, however, when the row is shown, the radio button doesn't appear checked. Why is this happening? I need the radio button to show the selected value.
This is a fiddle example of my problem: http://jsfiddle.net/danielrvt/dpoLdgjq/
Because anything inside attribute value gets toString() like value true will be considered as 'true' & it will looks for 'true'(string) instead of true(boolean).
Better use ng-value instead of value attribute. It will treat true value as in true of type boolean only.
Additionally in your case you have to add name attribute to be unique for each radio button group each offer element radio will be considered as unique form element.
Markup
<div class="row">
{{offer.before}}
<input type="radio" name="before{{$index}}" ng-model="offer.before" ng-value="false">
<input type="radio" name="before{{$index}}" ng-model="offer.before" ng-value="true">
</div>
Forked Fiddle
I have nested ng-repeats which are conflicting with each other
<div ng-repeat="item in items">
<input ng-if="!item.choices" ng-model=data["item"+$index] type="text"/>
<div ng-repeat="choice in item.choices">
<input ng-model=data["item"+$parent.$index] type="radio" name={{item.name}}/>
</div>
</div>
The indexes inside of the second loop are conflicting with the first. For example, if there are 2 radio buttons, they conflict with the first and second input's, despite the fact that they should have different indexes. Changing the radio button value changes the first and second text field input values. What is the issue?
I am attempting to put together a fairly complex form using dojo and dijit widgets. The form has multiple 'sections' which allow the user to attach an existing object (via select tag) or create an entirely new object inline in the form.
My inputs are rendered conditionally based radio buttons and manipulated via javascript. What I am having problems doing, is conditionally making dijit widgets required based on whether the inputs are rendered or not (which itself depends on which radio button is selected.
My html (actually jsp)
<div>
<input id="useExisting" type="radio" name="radio" checked value="useExisting" onclick="renderExistingInput()" /> <label for="useExisting">Use Existing</label>
<input id="new" type="radio" name="radio" value="new" onclick="renderNewInputs()"/> <label for="new">Create New</label>
</div>
<br>
<div id="newInputs">
<div class="row">
<label class="label" for="newName">Name </label>
<span class="formInput"><input type="text" id="newName" name="newName" required="true" dojoType="dijit.form.ValidationTextBox"/></span>
</div>
<!-- More inputs with required="true"-->
<br>
</div>
<div id="existingInput>
<div class="row">
<label class="label" for="existingSelect">Existing Object </label>
<span class="formInput">
<select name="existingSelect" id="existingSelect" dojoType="dijit.form.Select">
<!--JSTL tags for compiling list of options -->
</select>
</span>
</div>
</div>
Accompanying javascript functions:
function renderExistingInput() {
dojo.fx.wipeOut(getWipeArguments('newInputs')).play();
dojo.fx.wipeIn(getWipeArguments('existingInput')).play();
}
function renderNewInputs() {
dojo.fx.wipeOut(getWipeArguments('existingInput')).play();
dojo.fx.wipeIn(getWipeArguments('newInputs')).play();
}
function getWipeArguments(id) {
var wipeArgs = {
node : id
};
return wipeArgs;
}
The basic 'flow' of user interactions is User clicks a radio button, the correct div renders as a result of that. What I want then are inputs that are not rendered to not be considered required. I'm not entirely sure how to do this. Is it possible to manipulate that particular attribute directly via dojo? Or is there a better way to do this entirely?
Seem's like My answer was staring me right in the face. I simply needed to pull together the different parts I had come across. My final function for changed the 'required' attribute looks like:
function setWidgetRequiredAttributes(baseDomNodeId, requiredValue){
foundWidgets = dijit.findWidgets(dojo.byId(baseDomNodeId));
console.log(foundWidgets);
foundWidgets.forEach(function(widget){
widget.required=requiredValue;
});
}
I have used JavaScript to hide the divs containing form elements:
<script type="text/javascript">
<!--
function showMe (it, box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById(it).style.display = vis;
}
//-->
</script>
When certain checkbox(es) are selected the respective div(s) are shown or get visible:
<form>
<input type="checkbox" name="modtype" value="value1" onclick="showMe('div1', this)" />value1
<input type="checkbox" name="modtype" value="value2" onclick="showMe('div2', this)" />value2
<input type="checkbox" name="modtype" value="value3" onclick="showMe('div3', this)" />value3
<input type="checkbox" name="modtype" value="value4" onclick="showMe('div4', this)" />value4
<input type="checkbox" name="modtype" value="value5" onclick="showMe('div5', this)" />value5
<div class="row" id="div1" style="display:none">Show Div 1 <input type="text" name="valueone" id="valueone" /></div>
<div class="row" id="div2" style="display:none">Show Div 2 <input type="text" name="valuetwo" id="valueone" /></div>
<div class="row" id="div3" style="display:none">Show Div 3 <input type="text" name="valuethree" id="valueone" /></div>
<div class="row" id="div4" style="display:none">Show Div 4 <input type="text" name="valuefour" id="valueone" /></div>
<div class="row" id="div5" style="display:none">Show Div 5 <input type="text" name="valuefive" id="valueone" /></div>
<br />
<input type="submit" name="button" id="button" value="Submit" />
</form>
In the above case I have used 5 divs with five inputs, if a user selects two checkboxes and submits the form, I don't want the other 3 input fields to get submitted with empty fields. Rather ONLY selected 2 input field's value should get submitted.
You can try disabling the blank fields as disabled fields do not submit with the form.
This is not the way forms work. You need to either:
modify the value of the inputs (usually bad) or...
manipulate the DOM elements to modify what is part of the form and what is not at a structural (and not styling) level (very bad) or...
break this into multiple forms and submit the one you're interested in only or...
disregard the information you're not interested in at the server side or...
change your form design.
Without further evidence I'd go with one of the latter two.
I can think of only two ways to solve this:
Check the values of checkboxes on server and ignore the textbox values (but the values will still be sent to server)
When unchecked, completely remove the divs (or just inputs) from the form using JavaScript and add them back when checkbox is checked
Slightly modified version of the previous one would be to have another hidden form, where you can move the divs when unchecked. You need to remove the elements from current form and move them back when checkbox is checked - this way, you could preserve the values user already filled into the textboxes, but when unchecked, the values won't be submitted with current form.