How to clear radio button on select box value change? VueJS2 - javascript

I'm a newbie to JavaScript/VueJS and I need some help on clearing all radio inputs when a select box value (office code) is changed.
Here's my HTML/view code:
<div id="app">
<form id="myForm'>
<select id="office" v-model="selectedOffice" required>
<option value="" selected disabled>-Select-</option>
<option v-for="office in officeList" :value="office">{{office.code}}</option>
</select>
<section v-if="selectedOffice !== ''">
<h2>Please specify your product type:</h2>
<div id="productsList>
<label>
<input type="radio" name="productType" id="book" v-model="selectedProductType"> BOOKS
</label>
<label>
<input type="radio" name="productType" id="magazines" v-model="selectedProductType"> MAGAZINES
</label>
....snipped...
</form>
</div>
My model:
var vm = new Vue({
el: '#app',
data: {
selectedOffice: '',
selectedProductType: '',
officeList: [
{ code: 'Office1' }, {code: 'Office2' }, ...snipped...
]
I thought maybe I'd do create a method in the Vue instance like so:
methods: {
clearRadio: function(){
productType.prop('checked', false);
}
}
...but I am unsure how to implement that to the view (assuming that's the best way to do this) on office value change.
Thanks for any help!

You can do this using
#change
<template>
.....
<select #change="clearType" id="office" v-model="selectedOffice" required>
<option value="" selected disabled>-Select-</option>
<option v-for="office in officeList" :value="office">{{office.code}}</option>
</select>
.....
</template>
<script>
.....
methods: {
clearType: function(){
this.selectedProductType = ''
}
}
.....
</script>

Related

How to automatically select the first option in a dropdown menu in Vue 3

I have 2 dropdown menus, the second one changes values depending on the selection of the first dropdown.
All I want to do is set the first value of the second dropdown to be selected by default no matter what the option in the first dropdown is.
At the moment, the default selection of the second dropdown is always empty.
I tried fetching the values from types and loading them via v-for on the option tag and setting :selected="index===0" but it didn't work either.
Demo: https://codesandbox.io/s/relaxed-flower-2hjox1?file=/src/App.vue
The Template
<div class="col-md-6">
<label for="type" class="form-label">Type</label>
<select id="type" class="form-select" v-model="form.type">
<option value="en-US" selected>English (US)</option>
<option value="en-GB">English (British)</option>
</select>
</div>
<div class="col-md-6">
<label for="selected" class="form-label">Option 2</label>
<div v-if="form.type === 'en-GB'">
<select id="selected" name="selected" class="form-select" v-model="form.selected">
<option value="Arsenal">Arsenal</option>
<option value="Chelsea">Chelsea</option>
<option value="Liverpool">Liverpool</option>
</select>
</div>
<div v-else-if="form.type === 'en-US'">
<select id="selected" name="selected" class="form-select" v-model="form.selected">
<option value="Lakers">Lakers</option>
<option value="Bulls">Bulls</option>
<option value="Mavericks">Mavericks</option>
</select>
</div>
</div>
Javascript
export default {
name: "App",
data() {
return {
form: {
type: 'en-GB',
selected: ''
},
types: {
american: ['Lakers', 'Bulls', 'Mavericks'],
british: ['Arsenal', 'Liverpool', 'Chelsea']
}
}
},
};
const app = Vue.createApp({
data() {
return {
form: {
type: "en-GB",
selected: "",
},
types: {
american: ["Lakers", "Bulls", "Mavericks"],
british: ["Arsenal", "Liverpool", "Chelsea"],
},
};
},
watch: {
'form.type': {
handler() {
this.form.selected = this.form.type === "en-GB" ? this.types.british[0] : this.types.american[0]
},
immediate: true
}
}
})
app.mount('#demo')
<script src="https://unpkg.com/vue#3/dist/vue.global.prod.js"></script>
<div id="demo">
<div class="col-md-6">
<label for="type" class="form-label">Type</label>
<select id="type" class="form-select" v-model="form.type">
<option value="en-US" selected>English (US)</option>
<option value="en-GB">English (British)</option>
</select>
</div>
<div class="col-md-6">
<label for="selected" class="form-label">Option 2</label>
<div v-if="form.type === 'en-GB'">
<select
id="selected"
name="selected"
class="form-select"
v-model="form.selected"
>
<option value="Arsenal">Arsenal</option>
<option value="Chelsea">Chelsea</option>
<option value="Liverpool">Liverpool</option>
</select>
</div>
<div v-else-if="form.type === 'en-US'">
<select
id="selected"
name="selected"
class="form-select"
v-model="form.selected"
>
<option value="Lakers">Lakers</option>
<option value="Bulls">Bulls</option>
<option value="Mavericks">Mavericks</option>
</select>
</div>
</div>
</div>
You can create watcher and set default values for second select:
watch: {
'form.type': {
handler() {
this.form.selected = this.form.type === "en-GB" ? this.types.british[0] : this.types.american[0]
},
immediate: true
}
}
All I want to do is set the first value of the second dropdown to be
selected by default no matter what the option in the first dropdown
is.
Add a watcher, which watches form.type, then pick the first item from types
Note, I've changed american key to the key your using for type, then you can loop over the options, if you don't have that in place you'll need mapping object anyway typeMap: {'en-US': 'american', 'en-GB': 'british' } ... types[typeMap[form.type]]
new Vue({
el: '#app',
data() {
return {
form: {
type: 'en-GB',
selected: ''
},
types: {
'en-US': ['Lakers', 'Bulls', 'Mavericks'],
'en-GB': ['Arsenal', 'Liverpool', 'Chelsea']
}
}
},
watch: {
'form.type' () {
this.form.selected = this.types[this.form.type][0]
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>
<div id="app">
<div class="col-md-6">
<label for="type" class="form-label">Type</label>
<select id="type" class="form-select" v-model="form.type">
<option value="en-US" selected>English (US)</option>
<option value="en-GB">English (British)</option>
</select>
</div>
<div class="col-md-6">
<label for="selected" class="form-label">Option 2</label>
<select id="selected" name="selected" class="form-select" v-model="form.selected">
<option v-for="name in types[form.type]">{{ name }}</option>
</select>
</div>
</div>

How to disabled dropdown select conditionally in Vue JS

I'm learning vue js, and am trying about conditional input group with vue js. I have 2 radio buttons, and 1 dropdown select. What I want is when Radio 1 is selected, the dropdown is enabled. and when Radio 2 is selected, the dropdown is disabled. I have made the code as below. Can anyone help me?
new Vue({
el: '#app',
data: {
radioTypes: [
{
name:'Type 1',
value:60
},
{
name:'Type 2',
value:70
}
],
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" integrity="sha512-P5MgMn1jBN01asBgU0z60Qk4QxiXo86+wlFahKrsQf37c9cro517WzVSPPV1tDKzhku2iJ2FVgL67wG03SGnNA==" crossorigin="anonymous" />
<div id="app">
<div v-for="data in radioTypes" v-bind:key="data.name">
<input type="radio" v-model="radioVal" name="storage-type" :id="'storage'+data.name.toLowerCase()" :value="data.name">
<label :for="'storage-'+data.name.toLowerCase()">{{data.name}}</label>
</div>
<div>
<select id="inputGroupSelect01" :disabled="radioTypes.name === 'Type 2'">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
You don't have to create a computed property, you can just check it like this.
new Vue({
el: '#app',
data: {
radioVal: '',
}
});
<div id="app">
<input type="radio" v-model="radioVal" name="radioType" value="one">
<label for="Radio1">Radio 1</label>
<input type="radio" v-model="radioVal" name="radioType" value="two">
<label for="Radio1">Radio 2</label>
<div>
<!-- Disable the select when radioVal value is two -->
<select id="inputGroupSelect01" :disabled="radioVal === 'two'">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
In addition to the other answer, it's probably worth noting that a computed should ideally be pure and not have what is called "side effects". That basically means a computed should not change other variables, but return something based on other variables (hence the name "computed"). So, like this:
radioEnable(){
return this.radioVal === 'one';
}
But as stated, you don't even need the computed here.

Scroll to div when input has been completed

I have a form with three steps and want to
achieve an effect that when the user completes each step, the next step scrolls up into view.
How can I achieve this? I am using VUEJS 2.5.2. I have removed some HTML to keep it cleaner and clearer.
Can anyone help with a solution?
My code so far is:
<template>
<div id="app">
<form action="" method="post">
<div id="step1" v-show="quote.location === 'home'">
<select v-model="brand">
<option value="" selected disabled hidden>Select brand</option>
<option v-for="(car, index) in cars">{{ index }}</option>
</select>
<select v-model="model">
<option value="" selected disabled hidden>Select model</option>
<option v-for="option in cars[brand]" :value="option.prize">{{ option.prize }}</option>
</select>
</div><!--/step1-->
<div id="step2" v-show="brand && model != ''">
<h2><span class="text">Do you need an installer?</span></h2>
<div class="location">
<div class="selection">
<input type="radio" id="yesInstaller" name="yesInstaller" value="Yes" v-model="quote.installer">
<label for="yesInstaller">Yes</label>
</div>
<div class="selection">
<input type="radio" id="noInstaller" name="noInstaller" value="No" v-model="quote.installer">
<label for="noInstaller">No</label>
</div>
</div>
</div><!--/step2-->
<div id="step3" v-show="quote.installer != ''">
<h2><span class="text">Right on! Here’s an overview of your selection.</span></h2>
</div><!--/step2-->
</form>
</template>
<script>
export default {
name: 'Quote',
data () {
return {
totalSteps: 4,
currentStep: 1,
show: true,
brand: '',
model: '',
cars: {
'BMW': [ { size:'1', prize:'BMW i3' }, { size:'2',prize:'BMW i8' }, { size:'3',prize:'BMW 740e' } ],
'AUDI': [ { size:'1', prize:'Audi A3 E-Tron' },{ size:'2', prize:'Audi Q7 E-Tron' } ],
'Chevrolet': [ { size: '1', prize:'Chevrolet Bolt'}, {size:'1', prize:'Chevrolet Volt' } ],
'Fiat': [ { size: '1', prize:'Fiat 500e'}]
}
}
}
}
</script>

Assign value of radio button based on dynamic number of user selected values

After a user makes his/her selections of the five select dropdowns, I want to set the value of a radio button from field "radio_btn_name" based on up to 3 of the users selections. Think of each object as a "rule". If a combination of selections matches that rule, give "radio_btn_x" the "output" value.
In Part 1 of my question I achieved my desired result when the number of "selected_option_names_" is equal to the number of select dropdowns. However, I need to be able to check for a dynamic number of dropdowns against only up to 3 user selections.
I imagine the solution will be drastically different from part 1, as a result I feel a new question is warranted.
JSFiddle
$(document).ready(function() {
// A successful solution would render all these rules true, radio_button_4,
// radio_button_8 and radio_button_1 would get their respective new values
var objs = [{
selected_option_name_1: "select_1",
selected_option_name_2: "",
selected_option_name_3: "",
selected_option_value_1: "1-1",
selected_option_value_2: "",
selected_option_value_3: "",
radio_btn_name: "radio_button_4",
output: "5000-R"
}, {
selected_option_name_1: "select_1",
selected_option_name_2: "select_2",
selected_option_name_3: "select_5",
selected_option_value_1: "1-1",
selected_option_value_2: "2-2",
selected_option_value_3: "5-2",
output: "10000-R",
radio_btn_name: "radio_button_8"
}, {
selected_option_name_1: "select_4",
selected_option_name_2: "",
selected_option_name_3: "",
selected_option_value_1: "4-1",
selected_option_value_2: "",
selected_option_value_3: "",
output: "15000-R",
radio_btn_name: "radio_button_1"
}];
// Solution for part 1. Will only work if number of dropdowns == "selected_option_name_"
$("#submit").on("click", function() {
$("#wrapper").find("input[type='radio']").each(function(i, o) {
var btn = $(this);
var btn_name = $(this).attr("name");
$.each(objs, function(index, rule) {
if (btn_name == rule.radio_btn_name) {
if(rule.selected_option_value_1 == $('#select_1').val()
&& rule.selected_option_value_2 == $('#select_2').val()
&& rule.selected_option_value_3 == $('#select_3').val()) {
btn.val(rule.output);
console.log(rule.output);
}
}
});
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div>
<select class="group_1" name="select_1">
<option value=""></option>
<option value="1-1">Dropdown 1-1</option>
<option value="1-2">Dropdown 1-2</option>
<option value="1-3">Dropdown 1-3</option>
</select>
</div>
<br>
<div>
<input type="radio" name="radio_button_1" value="r()">
<input type="radio" name="radio_button_2" value="o()">
<input type="radio" name="radio_button_3" value="n()">
</div>
<div>
<select class="group_1" name="select_2">
<option value=""></option>
<option value="2-1">Dropdown 2-1</option>
<option value="2-2">Dropdown 2-2</option>
<option value="2-3">Dropdown 2-3</option>
</select>
</div>
<br>
<div>
<input type="radio" name="radio_button_4" value="r()">
<input type="radio" name="radio_button_5" value="o()">
<input type="radio" name="radio_button_6" value="n()">
</div>
<div>
<select class="group_1" name="select_3">
<option value=""></option>
<option value="3-1">Dropdown 3-1</option>
<option value="3-2">Dropdown 3-2</option>
<option value="3-3">Dropdown 3-3</option>
</select>
</div>
<br>
<div>
<input type="radio" name="radio_button_7" value="r()">
<input type="radio" name="radio_button_8" value="o()">
<input type="radio" name="radio_button_9" value="n()">
</div>
<br>
<div>
<select class="group_1" name="select_4">
<option value=""></option>
<option value="4-1">Dropdown 4-1</option>
<option value="4-2">Dropdown 4-2</option>
<option value="4-3">Dropdown 4-3</option>
</select>
</div>
<br>
<div>
<input type="radio" name="radio_button_10" value="r()">
<input type="radio" name="radio_button_11" value="o()">
<input type="radio" name="radio_button_12" value="n()">
</div>
<br>
<div>
<select class="group_1" name="select_5">
<option value=""></option>
<option value="5-1">Dropdown 5-1</option>
<option value="5-2">Dropdown 5-2</option>
<option value="5-3">Dropdown 5-3</option>
</select>
</div>
<br>
<button id="submit">Submit</button>
</div>
It turns out the solution wasn't as far off as I thought. I just needed to add an input type hidden with name equal to empty string to account for any empty strings in my objects.
I also updated my jQuery to find the value of names vs id's from part one of my post.
Updated fiddle
$(document).ready(function() {
$("#submit").on("click", function() {
$("#wrapper").find("input[type='radio']").each(function(i, o) {
var btn = $(this);
var btn_name = $(this).attr("name");
$.each(objs, function(index, rule) {
if (btn_name == rule.radio_btn_name) {
if(rule.selected_option_value_1 == $('[name="'+rule.selected_option_name_1 + '"]').val()
&& rule.selected_option_value_2 == $('[name="'+rule.selected_option_name_2 + '"]').val()
&& rule.selected_option_value_3 == $('[name="'+rule.selected_option_name_3 + '"]').val()) {
btn.val(rule.output);
console.log(rule.output);
}
}
});
});
});
});
<div>
<input type="hidden" name="" value="">
<button id="submit">Submit</button>
</div>

Hide/Display label and textbox on dropdown

I am trying to hide/display label and textbox on the dropdown select.
So I No is selected, I dont want to display anything else
If 1 is selected, I want to display 1 label and 1 textbox
If 2 is selected, I want to display 2 label and 2 textbox
What am I doing incorrect?
<!DOCTYPE html>
<html>
<head>
<script>
function checkvalue(val)
{
if(val==="No")
{
document.getElementById('guest_label').style.display='none';
document.getElementById('guest_name1').style.display='none';
document.getElementById('guest_label').style.display='none';
document.getElementById('guest_name2').style.display='none';
}
else if(val==="1")
{
document.getElementById('guest_label').style.display='block';
document.getElementById('guest_name1').style.display='block';
}
else
{
document.getElementById('guest_label').style.display='block';
document.getElementById('guest_name1').style.display='block';
document.getElementById('guest_label').style.display='block';
document.getElementById('guest_name2').style.display='block';
}
}
</script>
</head>
<body>
<label for="guest_number">Any Guest: </label>
<select name="guest" onchange='checkvalue(this.value);'>
<option value="No" selected >No</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<label for="guest_label" style='display:none'>Other Guest Name: </label>
<input type="text" name="guest_name" id="guest_name1" style='display:none'/>
<input type="text" name="guest_name" id="guest_name2" style='display:none'/>
</body>
</html>
Thanks
Change the second label tag from
<label for="guest_label" style='display:none'>Other Guest Name: </label>
to
<label id="guest_label" style='display:none'>Other Guest Name: </label>
Your JavaScript code will fail at document.getElementById('guest_label') .style.display='none'; when it it is not able to find element whose id is 'guest_label'.
document.getElementById('guest_label') will return null and we cannot call .style for null value.
Check the corrected one.
Unless the code you posted was incomplete, you have no element with id "guest_label". JS returned an error when it tried to reference a property of element with that id, which is a null.
You need to include IDs for guest_label1 and guest_label2, and then toggle guest_label2 of 1 is selected.
<script>
function checkvalue(val)
{
if(val=="No")
{
document.getElementById('guest_label1').style.display='none';
document.getElementById('guest_name1').style.display='none';
document.getElementById('guest_label2').style.display='none';
document.getElementById('guest_name2').style.display='none';
}
else if(val==="1")
{
document.getElementById('guest_label1').style.display='block';
document.getElementById('guest_name1').style.display='block';
document.getElementById('guest_label2').style.display='none';
document.getElementById('guest_name2').style.display='none';
}
else
{
document.getElementById('guest_label1').style.display='block';
document.getElementById('guest_name1').style.display='block';
document.getElementById('guest_label2').style.display='block';
document.getElementById('guest_name2').style.display='block';
}
}
</script>
</head>
<body>
<label for="guest_number">Any Guest: </label>
<select name="guest" onchange='checkvalue(this.value);'>
<option value="No" selected >No</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<label id="guest_label1" for="guest_label" style='display:none'>Other Guest Name: </label>
<input type="text" name="guest_name" id="guest_name1" style='display:none'/>
<label id="guest_label2" for="guest_label" style='display:none'>Other Guest Name: </label>
<input type="text" name="guest_name" id="guest_name2" style='display:none'/>
</body>
</html>

Categories