We Keep Coding

How do I write html for form with multiple questions that use radio input type?

I have this quiz in multiple choice format where users can select one option per question and submit their answers at the end. This example shows what I'm trying achieve: [Example code w3school][1]
The problem I'm having is that selecting an option on a question de-selects any previous selection, meaning only one option can be selected for the entire quiz.
This is a section of my form template:
<form #submit.prevent="submit">
<div v-for="question in questions" :key="question.id">
<jet-label :for="question.question" :value="question.question" class="font-bold text-lg" />
<div v-for="option in question.options" :key="option.id">
<jet-label :for="option.option" :value="option.option" />
<input :id="option.id" type="radio" :value="option.option"
:name="option.question_id" v-model="form.options" />
</div>
</div>
<div class="flex items-center justify-end mt-4">
<jet-button class="ml-4" :class="{ 'opacity-25': form.processing }"
:disabled="form.processing">
Submit
</jet-button>
</div>
</form>
And this is the JS to handle user selection binding:
<script setup>
...
import { useForm } from '#inertiajs/inertia-vue3'
defineProps({
questions: Array
})
const form = useForm({
options: []
})
...
</script>
The issue probably is that inputs are seen as belonging to one group. How can I group the inputs based on the question id so that the select/deselect radio action is per question?
[1]: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_radio

v-model="form.options" seems to be the problem, all inputs have the same model.
Everytime a radio is selected it overwrites the this.options with the option value.
Try:
v-model="form.options[option.question_id]"
if that dosen't work try to add a custom event handler with #change
BTW: option.question_id is a weird data structure it meight be better to have the id in the question object, because it seems the options lay in an array inside the question object

Toggle button inside angular reactive form

In my angular reactive form i am trying to use three state toggle switch for which i have tried three state switch separately in the link
Three state toggle stackblitz: https://stackblitz.com/edit/angular-6-template-driven-form-validation-gh1dj1
And i need to implement the same with same css inside reactive form on each row inside formarray.
For which i have tried the same html and css and given as formcontrolname like,
<div class="switch-toggle switch-3 switch-candy">
<ng-container #buttonIcon *ngFor="let option of options" >
<input type="radio" formControlName="state" [checked]="value === option"
[value]="option" />
<label (click)="onSelectionChange(option)" for="{{option}}">{{option.id}}
</label></ng-container> <a></a>
</div>
But i couldn't achieve the result.
Reactive form stackblitz: https://stackblitz.com/edit/disable-group-control-value-on-another-control-value-for-yqraay
Please click over the add button in the second stackblitz to see the result.. Added the css in app.component.css..
Kindly help me to implement the three state toggle switch as like in the first stackblitz into the reactive form in second stackblitz and need to get the values of selected toggle..

Just add an [id] to the input tag and an [attr.for] to the label tag. Something like this:
<div
class="switch-toggle switch-3 switch-candy">
<ng-container
#buttonIcon
*ngFor="let option of options">
<input
type="radio"
formControlName="state"
[value]="option"
[id]="i+option" />
<label
[attr.for]="i+option">
{{option}}
</label>
</ng-container>
<a></a>
</div>
Here's a Working Sample StackBlitz for your ref.
Thanks to A.Winnen for his comments on the performance implications of using the previous approach.

The options array in your reactive component is different than the 3 way switch you implemented. The one in the real component does not have the id.
[
"on",
"na",
"off"
]
You can still use that like this:
<ng-container #buttonIcon *ngFor="let option of options" >
<input type="radio" formControlName="state" [checked]="value === option"
[value]="option" />
<label (click)="onSelectionChange(option)" for="{{option}}">
{{option}} //**refer the object as the id filed is missing**
</label>
Second difference is, you are missing the onSelectionChange function in your reactive component

Here's a stackblitz demo for your referance.
https://stackblitz.com/edit/angular-szsw3k

Data on view is not binding with controller

I'm a newbie AngularJS. I'm trying to make a checkbox with following properties.
1.selects and deselects all other checkbox coresponding to the All checkbox
2.if all otherCheckbox are selected then All checkbox is automatically selected.if one of the otherCheckbox is unselected then All checkbox is automatically unselected. Here is the code in view
<div ng-repeat="fence in thisUserFence">
<label>
<input type="checkbox" ng-model="fence.status" ng-change="otherCheckbox()">{{fence.name}}
</label>{{fence.status}}
</div>
<div>
<label>
<input type="checkbox" ng-click="checkAll()" ng-model="isAllSelected">All
</label>{{isAllSelected}}
</div>
Code in controller-
$scope.checkAll=function(){
var checkStatus=!$scope.isAllSelected;
$scope.isAllSelected=!$scope.isAllSelected;
console.log($scope.isAllSelected);
angular.forEach($scope.thisUserFence,function(fence){fence.status=checkStatus;});
}
$scope.otherCheckbox=function(){
$scope.isAllSelected=$scope.thisUserFence.every(function(item){return item.status;});
console.log($scope.isAllSelected);
}
Above logic works fine untill you check All checkbox and then unselect
any of otherCheckbox .
The value of $scope.isAllSelected is false in console but in view value of {{isAllSelected}} is true .Its not updating in view.

Just change checkAll method like this, you do not need to change the status of isAllSelected in the method cause its already binded to the check box model
$scope.checkAll=function(){
angular.forEach($scope.thisUserFence,function(fence) {
fence.status=$scope.isAllSelected;
});
}
See working example here https://jsfiddle.net/Lt7aP/7426/

VueJS: input with dynamic value + v-model

I have a problem with VueJS when setting the value of an input radio AND v-model. I cant understand why I can not setting dynamically a value to an input and use a model to retrive what input the user selected.
In code is easier to understand:
export default {
props: ["question", "currentQuestion"],
data() {
return {
answer: undefined
}
},
computed: {
isCurrent() {
return this.currentQuestion && this.currentQuestion.id == this.question.id;
}
},
methods: {
groupName(question) {
return 'question_id_' + question.id
},
inputType(question) {
if (question.question_type_id == 2) return "checkbox";
return "radio";
}
},
mounted() {
console.log('Component mounted.')
}
}
<template>
<ul v-if="question.question_type_id != 4">
<li v-for="option in question.options" :key="option.id">
<div class="form-group">
<label>
<input v-model="answer" :value="option.id" :type="inputType(question)"
:name="groupName(question)" />
{{option.option}}
</label>
</div>
</li>
</ul>
</template>
So, in case there are 4 options, the user would see 4 radio buttons, each one with the "option.id" as a value and, WHEN the user clicks the radio button, the model "answer" would be populated with that value.
Now, when I try to compile this file, I get this error message:
:value="option.id" conflicts with v-model on the same element because the latter already expands to a value binding internally
So, could anyone help me understand how do I dynamically set a value to an input AND asssociate a model to retrieve the value when the input is selected?
By the way, VueJS documentation at this page says exactly what I am trying to do:
https://v2.vuejs.org/v2/guide/forms.html
Any help is very appreciated.

The main issue here is that you have a dynamic type on the input element, so I expect Vue is getting a little confused. value is not valid in combination with v-model for a checkbox input, unless you are binding to an array.
You can solve that by using a v-if/v-else.
<label>
<input v-if="question.question_type_id == 2"
v-model="answer"
type="checkbox"
:name="groupName(question)" />
<input v-else
v-model="answer"
:value="option.id"
type="radio"
:name="groupName(question)" />
{{option.option}}
</label>
Working example.
There are other issues, but this addresses the error you mention in the question. For one, it doesn't make much sense for more than one checkbox to be bound to a single v-model, unless you are binding to an array. In that case, you would have to swap what type answer is based on whether is a radio, a checkbox with a single value or a checkbox with multiple values. Seems like it would get complicated.

the proper way is to use placeholder.
<input :placeholder="option.id" v-model="answer" #input="functionToChangeValue($event)"/>
! DO NOT USE VALUE AND V-MODEL TOGETHER
it is because v-model create two way biding and your code brake

Knockout.js: Initial value of observable doesn't update RadioButton state

Here is a very simple story that I fail to make it work:
We have an array of questions. Each question has an array of answer. Each answer has a text and value. Each question has the property selectedAnswer that represents the selected answer's value.
Here is jsfiddle: https://jsfiddle.net/votsevfd/8/
Implementation:
<div data-bind="foreach : {data: questions}">
Question: <span data-bind="text: descr"></span>
<div data-bind="foreach: {data: answers}">
<div>
<label data-bind="text: text"></label>
<input name="something" type="radio" data-bind="checked: $parent.selectedAnswer, value: value"></input>
</div>
</div>
<div>
The selected answer is:<span data-bind="text: selectedAnswer"></span>
</div>
</div>
And here is the related JavaScript:
var model = {
questions: ko.observableArray(),
};
var q1 = {
descr: 'Do you like JS?',
selectedAnswer: ko.observable('200'), // Initially, select No (200)
answers: [
{text:'Yes', value:'100'},
{text:'No', value:'200'}
],
}
model.questions.push(q1);
ko.applyBindings(model);
Problem:
I want the appropriate radio button become selected according to initial value of selectedAnswer (in the above case, radio button No). But it doesn't work.
What am I missing?

This is a weird issue. I was able to fix it by changing the order of the checked and value bindings like this:
<input name="something" type="radio" data-bind="value: value, checked: $parent.selectedAnswer" />
Updated fiddle
There's another fix for this. If you switch to knockout's latest version, this issues goes away. So, I'm assuming they fixed it somewhere between version 2 and 3.0.
Updated fiddle
(Also, you can simplify your foreach binding to this:data-bind="foreach : questions")
Update:
It is indeed a bug. You can go through #user3297291's detailed answer for more information regarding this.