Naming inputs in quiz application I am building a quiz application where I may have multiple questions like:
<form>
{{-- Question 1 --}}
<div class="question-1">
<input type="text" name="title">
<textarea name="description"></textarea>
<select name="option">
<option value="value-1">Option 1</option>
<option value="value-2">Option 2</option>
<option value="value-3">Option 3</option>
<option value="value-4">Option 4</option>
</select>
</div>
{{-- Question 2 --}}
<div class="question-2">
<input type="text" name="title">
<textarea name="description"></textarea>
<select name="option">
<option value="value-1">Option 1</option>
<option value="value-2">Option 2</option>
<option value="value-3">Option 3</option>
<option value="value-4">Option 4</option>
</select>
</div>
</form>
or
<form>
{{-- Question 1 --}}
<div class="question-1">
<input type="text" name="title">
<textarea name="description"></textarea>
<input type="radio" name="option" /> Option 1
<input type="radio" name="option" /> Option 2
<input type="radio" name="option" /> Option 3
<input type="radio" name="option" /> Option 4
</div>
{{-- Question 2 --}}
<div class="question-2">
<input type="text" name="title">
<textarea name="description"></textarea>
<input type="radio" name="option" /> Option 1
<input type="radio" name="option" /> Option 2
<input type="radio" name="option" /> Option 3
<input type="radio" name="option" /> Option 4
</div>
</form>
how can I name inputs in order to binding input using wire:model or validating fields in my livewire component?
@kmnurunnabi You may go with array-based naming because it's important to ensure that the inputs for each question are uniquely identified.
For example:
{{-- Question 1 --}}
<input type="text" name="questions[0][title]" wire:model="questions.0.title">
<textarea name="questions[0][description]" wire:model="questions.0.description"></textarea>
<select name="questions[0][option]" wire:model="questions.0.option">
<option value="value-1">Option 1</option>
....
</select>
{{-- Question 2 --}}
<input type="text" name="questions[1][title]" wire:model="questions.1.title">
<textarea name="questions[1][description]" wire:model="questions.1.description"></textarea>
<select name="questions[1][option]" wire:model="questions.1.option">
<option value="value-1">Option 1</option>
...
</select>
@tisuchi Thanks for your answer. Now if i have repeater button that can add question fields dynamically then how to bind that dynamic behaviour? How to structure my bounded property dynamically with those dynamic input fields?
@tisuchi This is tricky but is there any solution to fix that?
@kmnurunnabi You should have a Question model, which has many Option models. Each option would then have its own unique identifier.
When a user is answering a question, you can then check if the option actually belongs to that question, and store the user’s response if so.
Please sign in or create an account to participate in this conversation.
