Hello artisan,
In today's blog I am going to show you how we can open a other option block by selecting other option in various input type like radio, select, checkbox.
This is helpful when we do not have options listed in given options and we want you put our own answer/option in that.
So let's begin the code.
First we need to create component named as ExampleComponent.vue and add the below code
<template>
<div class="bg-white p-7 shadow h-screen mx-auto">
<h2 class="text-center my-2 p-3 border-b">Example</h2>
<div class="w-full border shadow">
<select
v-model="form.data"
class="border border-indigo-300 rounded-lg shadow-lg px-3 py-2 w-1/4"
@change="onSelectChange(form.data)"
>
<option :value="null" selected>Select Option</option>
<option
v-for="option in options"
:key="option.id"
:value="getOptionValue(option)"
>
{{ getOptionDisplayName(option) }}
</option>
</select>
<input
id="otherFiled"
v-model="form.others"
type="text"
class="border px-4 py-2 my-4 border border-indigo-300 rounded-lg shadow-lg w-1/4"
placeholder="Please specify your option"
style="display: none"
/>
{{ form.data }} - {{ form.others }}
<div class="border-t mt-4 py-4">
<form @submit.prevent="saveCheckboxValues">
<input v-model="checkedFruits.option" type="checkbox" value="apple" />
<label>apple</label>
<input
v-model="checkedFruits.option"
type="checkbox"
value="orange"
/>
<label>orange</label>
<input v-model="checkedFruits.option" type="checkbox" value="grape" />
<label>grape</label>
<input
v-model="checkedFruits.other"
type="checkbox"
value="other"
@change="getCheckedValue(checkedFruits.other)"
/>
<!-- @change="getCheckedValue($event)" -->
<label>{{ getRadioOtherOption("other") }}</label>
<input
id="otherCheckedOption"
v-model="checkedFruits.other"
type="text"
class="border px-4 py-2 my-4 border border-indigo-300 rounded-lg shadow-lg w-1/4"
placeholder="Please specify your option"
style="display: none"
/>
<button
type="submit"
class="border shadow border-indigo-300 p-2 ml-6 rounded-lg"
>
Save
</button>
</form>
</div>
<p>{{ checkedFruits }}</p>
<div class="border-t mt-4 py-4">
<form @submit.prevent="saveRadioValue">
<input v-model="selectedColors.value" type="radio" value="yellow" />
<label>yellow</label>
<input v-model="selectedColors.value" type="radio" value="orange" />
<label>orange</label>
<input v-model="selectedColors.value" type="radio" value="pink" />
<label>pink</label>
<input
v-model="selectedColors.value"
type="radio"
value="other"
@change="getRadioOptionValue(selectedColors.value)"
/>
<label>{{ getRadioOtherOption("other") }}</label>
<input
id="otherOption"
v-model="selectedColors.value"
type="text"
class="border px-4 py-2 my-4 border border-indigo-300 rounded-lg shadow-lg w-1/4"
placeholder="Please specify your option"
style="display: none"
/>
<button
type="submit"
class="border shadow border-indigo-300 p-2 ml-6 rounded-lg"
>
Save
</button>
</form>
</div>
<p>{{ selectedColors }}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
options: ["yes", "no", "both", "other | Other (please specify)"],
form: {
data: [],
others: [],
},
checkedFruits: {
option: [],
other: "",
},
selectedColors: {
value: "",
// other: '',
},
};
},
methods: {
// this fn will only change the display name if it has other field
getOptionDisplayName(option) {
return option.replace("other | ", "");
},
// checks if value starts other | option so we can replace it with other so that we can use it for other answers by users
getOptionValue(option) {
if (option.startsWith("other | ")) {
return "other";
}
return option;
},
// if selected option has other option selected then it will display other box and its value will be stored in other array
onSelectChange(data) {
if (data === "other") {
document.getElementById("otherFiled").style.display = "block";
} else {
document.getElementById("otherFiled").style.display = "none";
}
},
// ex radio other option
getRadioOtherOption(option) {
if (option === "other") {
return "Other";
} else {
return option;
}
},
getRadioOptionValue(option) {
if (option === "other") {
document.getElementById("otherOption").style.display = "block";
} else {
document.getElementById("otherOption").style.display = "none";
}
},
getCheckedValue(option) {
console.log(option);
if (option === true) {
document.getElementById("otherCheckedOption").style.display = "block";
} else {
document.getElementById("otherCheckedOption").style.display = "none";
}
},
saveRadioValue() {
this.$inertia.post(this.route("ex.store"), this.selectedColors);
},
saveCheckboxValues() {
this.$inertia.post(
this.route("example.storeCheckbox"),
this.checkedFruits
);
},
},
};
</script>
Now add this component to App.vue as given below.
<template>
<div id="app">
<ExampleComponent />
</div>
</template>
<script>
import ExampleComponent from "./components/ExampleComponent";
export default {
name: "App",
components: {
ExampleComponent,
},
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
You can check the functionality on given code block.
Happy Reading.. ❤️ 🦄
Top comments (0)