HTML code with radio buttons
Whichever option is chosen here should be shown in the input box below
`<div class="Choosesize">
<details>
<summary class="SelectionHeader"><span class="circleborder">3</span><span>Select your size</span></summary>
<div class="SizeOptions">
<input class="SizeInput" type="radio" name="size" id="3XL" onclick="displaySize()">
<label class="SizeLabel" for="3XL" onclick="displaySize()"> Triple XL </label>
<input class="SizeInput" type="radio" name="size" id="2XL" onclick="displaySize()">
<label class="SizeLabel" for="2XL" onclick="displaySize()"> Double XL </label>
<input class="SizeInput" type="radio" name="size" id="XL" onclick="displaySize()">
<label class="SizeLabel" for="XL" onclick="displaySize()"> Extra Large </label>
<input class="SizeInput" type="radio" name="size" id="L" onclick="displaySize()">
<label class="SizeLabel" for="L" onclick="displaySize()"> Large </label>
<input class="SizeInput" type="radio" name="size" id="M" onclick="displaySize()">
<label class="SizeLabel" for="M" onclick="displaySize()"> Medium </label>
<input class="SizeInput" type="radio" name="size" id="S" onclick="displaySize()">
<label class="SizeLabel" for="S" onclick="displaySize()"> Small </label>
<input class="SizeInput" type="radio" name="size" id="XS" onclick="displaySize()">
<label class="SizeLabel" for="XS" onclick="displaySize()"> Extra Small </label>
</div>
</details>
</div>`
HTML code for input box
<div class="CustomOption"> <input type="text" name="size" disabled value="Your size" id="YourSizeId"> </div>
Javascript I've tried
`function displaySize() {
var SizeChecked = document.getElementsByName('size');
for (i=0; i<SizeChecked.length; i++) {
if (SizeChecked[i].checked)
document.getElementById("YourSizeId").innerHTML = SizeChecked[i].value;
}
}`
The text "Your size" should change to the text of whichever radio button is checked. Currently, it is not recognising this and nothing happens.
Related
HTML Code File:
<form [FormGroup]="form">
Subjects
<div>
<input type="checkbox" id=""formControlName="phyiscs">
<label class="checkvalues">Phyiscs</label><br>
<input type="checkbox" id=""formControlName="chemistry">
<label class="checkvalues">Chemistry</label><br>
<input type="checkbox" id=""formControlName="maths">
<label class="checkvalues">Maths</label><br>
</div>
Hobbies
<div>
<input type="checkbox" id=""formControlName="Outdoor">
<label class="checkvalues">Outdoor</label><br>
<input type="checkbox" id=""formControlName="Indoor">
<label class="checkvalues">Indoor</label><br>
<input type="checkbox" id=""formControlName="music">
<label class="checkvalues">Music</label><br>
</div>
Disability
<div>
<input type="checkbox" id=""formControlName="disability">
<label class="checkvalues">Disability</label><br>
<input type="checkbox" id=""formControlName="nodisability">
<label class="checkvalues">No Disability</label><br>
<input type="checkbox" id=""formControlName="visuadisability">
<label class="checkvalues">Visual Disability</label><br>
</div>
</form>
Ts File Code:
form = new FormGroup({
});
api response output: ["subject":{ {"physics":true}, {"chemistry":false}, {"Maths":false}, }, "hobbies":{ {"outdoor":true}, {"indoor":false}, {"music":false}, }, "disability":{ {"disability":false}, {"nodisability":true}, {"visualdisablity":false}, }]Give me some input on how to send values through the form array
I have 4 checkbox inputs and i want to disable each input if is checked!
And disable all inputs if user checked 2 checkboxes i achive this with v-model length >= 4
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" value="1" v-model="inputs" disabled="inputs.length >= 4">
text1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" value="2" v-model="inputs" disabled="inputs.length >= 4">
text1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" value="3" v-model="inputs" disabled="inputs.length >= 4">
text1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" value="4" v-model="inputs" disabled="inputs.length >= 4">
text1
</label>
</div>
What can i do to disable the input checkbox user checked?
Thanks for your question posting.
I think the disabled property of input tags should be :disabled.
<input type="checkbox" value="1" v-model="inputs" :disabled="inputs.length >= 4" />
Hope for your best result.
Thank you.
I have two registration forms ona a page, but I only want to render one by clicking on proper button: 'Contract Form' or 'Company Form'. Should I do it with v-if? In the code below I just copied few lines of the form.
<template>
<div>
<button #click="contract">UMOWA</button>
<button #click="company">FIRMA</button>
<div v-if="contract">
<form method="post" #submit.prevent="onSubmit">
<label for="firstname">IMIĘ</label>
<input id="firstname" v-model="firstName" type="text" required />
<label for="lastname">NAZWISKO</label>
<input id="lastname" v-model="lastName" type="text" required />
<button type="submit">Zarejestruj się</button>
</form>
</div>
<div v-if="company">
<form method="post" #submit.prevent="onSubmit">
<label for="firstname">IMIĘ</label>
<input id="firstname" v-model="firstName" type="text" required />
<label for="lastname">NAZWISKO</label>
<button type="submit">Zarejestruj się</button>
<input id="lastname" v-model="lastName" type="text" required />
<label for="email">ADRES E-MAIL</label>
<input id="email" v-model="email" type="text" required />
<button type="submit">Zarejestruj się</button>
</form>
</div>
</div>
</template>
Yes but you will need to add true in the buttons onclick:
<button #click="contract = true">UMOWA</button>
<button #click="company = true">FIRMA</button>
I have the following code which I would like to generate through a v-for:
<div class="rating-container">
<input type="radio" name="star" value="5" id="star-5">
<label class="star-radio" for="star-5">5</label>
<input type="radio" name="star" value="4" id="star-4">
<label class="star-radio" for="star-4">4</label>
<input type="radio" name="star" value="3" id="star-3">
<label class="star-radio" for="star-3">3</label>
<input type="radio" name="star" value="2" id="star-2">
<label class="star-radio" for="star-2">2</label>
<input type="radio" name="star" value="1" id="star-1">
<label class="star-radio" for="star-1">1</label>
</div>
But I need to keep them in the same order, I mean, a label right after the radio input element, I know v-for on the input tag or the label element would generate all the inputs first and then all the labels
Is there any way to do this with vuejs v-for so that I can preserve the element order and generate them with a loop ?
You could use the template tag as
The template element holds HTML code without displaying it
<div id="app">
<div class="rating-container" >
<template v-for="n in 5">
<input type="radio" name="star" :value="n" :id="'star-'+ n">
<label class="star-radio" :for="'star-'+ n">{{n}}</label>
</template>
</template>
</div>
If you want to loop trough the items in a reversed way you have to do it yourself
#using (Html.BeginForm()) {
<div>
<fieldset>
<legend>Form</legend>
<label for="FirstName">First Name:</label>
<input type="text" name="FirstName">
<label for="LastName">Last Name:</label>
<input type="text" name="LastName">
<label for="Period">Date:</label>
<input type="text" name="Period">
<p>
<input type="submit" value=" Send " />
</p>
</fieldset>
</div>
}
Here i want to make all the label field and text field to appear on same line?How could i do that?
Change Parent Div and paragraph display style to inline
<div style="display:inline">
<fieldset>
<legend>Form</legend>
<label for="FirstName">First Name:</label>
<input type="text" name="FirstName">
<label for="LastName">Last Name:</label>
<input type="text" name="LastName">
<label for="Period">Date:</label>
<input type="text" name="Period">
<p style="display:inline">
<input type="submit" value=" Send " />
</p>
</fieldset>
</div>