HTML <select> conditional tag - javascript

I have a simple form that allows users to add clients and their locations (country, state, and city). There seems to be a problem in the code that causes the drop-down form fields to remain in place when the country is switched. For example, if the user selects China, followed by any Province, and then any city, and then switches the country, the drop--down for city still remains. This can be seen in the code snippet.
function displayCountry(answer) {
document.getElementById(answer).style.display = "block";
if (answer == "China") {
document.getElementById("India").style.display = "none";
document.getElementById("USA").style.display = "none";
} else if (answer == "India") {
document.getElementById("China").style.display = "none";
document.getElementById("USA").style.display = "none";
} else if (answer == "USA") {
document.getElementById("China").style.display = "none";
document.getElementById("India").style.display = "none";
}
}
function displayProvince(answer) {
document.getElementById(answer).style.display = "block";
if (answer == "Beijing Municipality") {
document.getElementById("Tianjin Municipality").style.display = "none";
} else if (answer == "Tianjin Municipality") {
document.getElementById("Beijing Municipality").style.display = "none";
}
}
function displayChinaCity(answer) {
document.getElementById(answer).style.display = "block";
if (answer == "Beijing") {
document.getElementById("Dongcheng").style.display = "none";
} else if (answer == "Dongcheng") {
document.getElementById("Beijing").style.display = "none";
}
}
<div class="container">
<h3>Add Client</h3>
<div class="tab-content">
<form action="/add/clients" method="post">
<div class="top-row">
<div class="field-wrap">
<label>Client ID<span class="req">*</span><input></label>
</div>
</div>
<div class="top-row">
<div class="field-wrap">
<label>Client name<span class="req">*</span><input></label>
</div>
</div>
<div class="field-wrap">
<label>Client type<span class= "req">*</span><select></select></label>
</div>
<div class="field-wrap">
<label>Client Origin<span class="req">*</span>
<select name="country" onchange="displayCountry(this.value)">
<option selected= "--">--</option>
<option value= "China" >China</option>
<option value= "India" >India</option>
<option value= "USA" >USA</option>
</select>
</label>
<div id="USA" style="display:none;">
<select></select>
</div>
<div id="China" style="display:none;"><br/>
Select Province<span class="req">*</span>
<select name="province" onchange="displayProvince(this.value)">
<option selected= "--">--</option>
<option value= "Beijing Municipality" >Beijing Municipality</option>
<option value= "Tianjin Municipality">Tianjin Municipality</option>
</select>
</div>
<div id="India" style="display:none;">
<select></select>
</div>
<div id="Beijing Municipality" style="display:none;"><br/>
Select City<span class="req">*</span>
<select name="city" onchange="displayChinaCity(this.value)">
<option selected= "--">--</option>
<option value= "Beijing">Beijing</option>
<option value= "Dongcheng">Dongcheng</option>
</select>
</div>
</div>
</form>
</div>
</div>

This is another approach to your problem. Instead of creating all select tags in HTML by hand, I'm making them with a function buildForms and using a data structure to keep all countries/states/cities in one place. I'm using the buildSelect function to produce all select tags and the functions updateStates and updateCities to hide/show the elements.
var data = {
countries: [{
name: 'China',
childs: [{
name: 'Beijing',
childs: [{name: 'Beijing'}, {name: 'Dongcheng'}]
}, {
name: 'Tianjin',
childs: [{name: 'Guangzhou'}, {name: 'Shanghai'}]
}]
}, {
name: 'India',
childs: [{
name: 'Uttar',
childs: [{name: 'Kanpur'}, {name: 'Ghaziabad'}]
}, {
name: 'Maharashtra',
childs: [{name: 'Mumbai'}, {name: 'Pune'}]
}]
}, {
name: 'USA',
childs: [{
name: 'Washington',
childs: [{name: 'Washington'}, {name: 'Seatle'}]
}, {
name: 'Florida',
childs: [{name: 'Orlando'}, {name: 'Miamy'}]
}]
}]
};
function buildSelect(name, data, childs) {
var div = $('<div>');
div.addClass('hidden autoSelect ' + data.name + ' ' + name);
var label = $('<label>');
label.text(name);
var select = $('<select>');
var option = $('<option>');
option.text('--');
select.append(option);
data.childs.forEach(function (child) {
option = $('<option>');
option.val(child.name);
option.text(child.name);
select.append(option);
});
if (childs) select.on('change', updateCities);
label.append(select);
div.append(label);
$('.country').append(div);
}
function buildForms(data) {
data.countries.forEach(function (country) {
buildSelect('State', country, true);
country.childs.forEach(function (state) {
buildSelect('City', state);
});
});
}
function hideAutoSelect (name) {
$('div.autoSelect.'+name).addClass('hidden');
}
function updateStates() {
var v = this.value;
if (v) {
hideAutoSelect('State');
hideAutoSelect('City');
var div = $('div.autoSelect.'+v);
div.removeClass('hidden');
var select = $('select', div);
if (select.val()) $('div.autoSelect.'+select.val()).removeClass('hidden');
}
}
function updateCities() {
var v = $(this).val();
if (v) {
hideAutoSelect('City');
$('div.autoSelect.'+v).removeClass('hidden');
}
}
$(document).on('ready',function () {
buildForms(data);
$('[name=country]').on('change', updateStates);
});
.hidden {display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h3>Add Client</h3>
<div class="tab-content">
<form action="/add/clients" method="post">
<div class="top-row">
<div class="field-wrap">
<label>Client ID<span class="req">*</span>
<input placeholder="0000000">
</label>
</div>
</div>
<div class="top-row">
<div class="field-wrap">
<label>Client name<span class="req">*</span>
<input placeholder="John">
</label>
</div>
</div>
<div class="field-wrap">
<label>Client type<span class= "req">*</span>
<select>
<option selected= "--">--</option>
</select>
</label>
</div>
<div class="field-wrap country">
<label>Client Origin<span class="req">*</span>
<select name="country">
<option selected= "--">--</option>
<option value= "China" >China</option>
<option value= "India" >India</option>
<option value= "USA" >USA</option>
</select>
</label>
</div>
</form>
</div>
</div>

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 rearrange div boxes with js written children, following given array?

I am trying to making a list, in which it calculate the sum of select numbers.
There are actually over 300 items, so I limited to 6 here.
Generally, the "Image with name" adding, Change Language, Calculations all works.
I also tried the "arrange buttons" in small scale, for which it also works.
But when I add the "rearrange" buttons for the list, the page just keep refreshing back to its original way.
Is there a way to do the rearrange DIV trick?
(By the way, this seems to be working on Firefox, Chrome and Safari, but just never works on IE/Edge)
let imgList = [{
name: 30001,
file: 'icon/30001.gif',
jpName = 'ア',
engName = 'alpha'
},
{
name: 30002,
file: 'icon/30002.jpg',
jpName = 'イ',
engName = 'beta'
},
(name: 40001, file: 'icon/40001.gif', jpName = 'ウ',
engName = 'gamma'
},
{
name: 41002,
file: 'icon/41002.jpg',
jpName = 'エ',
engName = 'delta'
},
{
name: 50301,
file: 'icon/50301.jpg',
jpName = 'オ',
engName = 'mu'
},
{
name: 50401,
file: 'icon/50401.jpg',
jpName = 'ン',
engName = 'nu'
}
];
//Language Controler
let control = [{
name: 'jp',
title: '計算',
ans: '答え'
},
{
name: 'eng',
title: 'Calculations',
ans: 'Answer'
}
]
//Array Lists
let ArrayOne = ['test30001', 'test30002', 'test40001', 'test41002', 'test50301', 'test50401'];
let ArrayTwo = ['test50301', 'test50401', 'test40001', 'test41002', 'test30001', 'test30002'];
let ArrayThree = ['test30001', 'test40001', 'test50301', 'test50401', 'test30002', 'test41002'];
//Give images and name
function goImage(arr) {
let x = imgList.findIndex(num => num['name'] === arr);
document.getElementById('art' + arr).innerHTML = '<img src="' + imgList[x].file + '"><br>' + imgList[x][language + 'Name'];
}
//Change page language
function placeAll() {
let tb = control.findIndex(lang => lang['name'] === language);
document.getElementById('title').innerHTML = control[tb].title;
document.getElementById('totalName').innerHTML = control[tb].ans;
imgList.forEach(nameFile => {
goImage(nameFile.name)
});
}
//when select other languages
let language = 'jp';
function handleLang(myRadio) {
language = myRadio.value;
placeAll();
}
//amount calculations
function calculate() {
var calValue = 0;
countThese.each(function() {
calValue += +$(this).val();
})
localStorage.setItem($(this).attr('id'), $(this).val());
let allRate = imgList.length * 10;
document.getElementById('totalAm').innerHTML = ((calValue / allRate) * 100).toFixed(2) + '%';
}
let countThese = $('#testBox:input').click(calculate);
//rearrange div boxes
function ArrayOne() {
$('#testBox div').each(function() {
if ($.inArray($(this).attr('id'), ArrayOne) == -1) {
$('#testBox').append($('#' + $(this).attr('id')));
}
});
};
function ArrayTwo() {
$('#testBox div').each(function() {
if ($.inArray($(this).attr('id'), ArrayTwo) == -1) {
$('#testBox').append($('#' + $(this).attr('id')));
}
});
};
function ArrayThree() {
$('#testBox div').each(function() {
if ($.inArray($(this).attr('id'), ArrayThree) == -1) {
$('#testBox').append($('#' + $(this).attr('id')));
}
});
};
<div id='title'></div>
<form id="calcul">
<div class="container" id="testBox">
<div class="tryBox" id="test30001">
<div id="art30001" class="star3">
</div>
<div id="ca30001" class="calLV3">
<select id="t30001" class="sLV3">
<option value="0">0</option>
<option value="0">1</option>
<option value="0">2</option>
</select>
</div>
</div>
<div class="tryBox" id="test30002">
<div id="art30002" class="star3">
</div>
<div id="ca30002" class="calLV3">
<select id="t30002" class="sLV3">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</div>
<div class="tryBox" id="test40001">
<div id="art40001" class="star4">
</div>
<div id="ca40001" class="calLV4">
<select id="t40001" class="sLV4">
<option value="0">0</option>
<option value="2">2</option>
<option value="4">4</option>
</select>
</div>
</div>
<div class="tryBox" id="test41002">
<div id="art41002" class="star4">
</div>
<div id="ca41002" class="calLV4">
<select id="t41002" class="sLV4">
<option value="0">0</option>
<option value="2">2</option>
<option value="4">4</option>
</select>
</div>
</div>
<div class="tryBox" id="test50301">
<div id="art50301" class="star5">
</div>
<div id="ca50301" class="calLV5">
<select id="t50301" class="sLV5">
<option value="0">0</option>
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="7">7</option>
</select>
</div>
</div>
<div class="tryBox" id="test50401">
<div id="art50401" class="star5">
</div>
<div id="ca50401" class="calLV5">
<select id="t50401" class="sLV5">
<option value="0">0</option>
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="7">7</option>
</select>
</div>
</div>
</div>
</form>
<div id='button1'>
<button onclick="ArrayOne()">WAY1</button>
<button onclick="ArrayTwo()">WAY2</button>
<button onclick="ArrayThree()">WAY3</button>
</div>
<div id='lang'>
<input type="radio" id="jp" name="lang" value="jp" onchange="handleLang(this)" checked>
<label for="jp">日本語</label>
<input type="radio" id="eng" name="lang" value="eng" onchange="handleLang(this)">
<label for="eng">English</label>
</div>
<div class="answer">
<div class="totalName" id="totalName"></div>
<div class="totalAm" id="totalAm"></div>
</div>
<script src="script.js"></script>
There are some syntax problems, like = in your object map declarations, redeclaration of ArrayOne as a function, and a ( in your object map.
You are iterating over the HTML elements in the order that they appear, and searching the array each time as a filter. If you want them to be in the order that the array indicates, you should be iterating in order over the array.
Or you have to account for the array index while you append, and insert them in the right position, which is more involved. The easiest would be to use CSS flex and order: (number)
Also, ids should be unique to the document, so searching into #testBox and then finding the id that you want should not be necessary. You should be able to use the #id selector directly. I have kept the selectors as $('#testBox div#'+id), just to match your original code, but it should really be just $('#'+id') or document.getElementById(id)
let imgList = [{
name: 30001,
file: 'icon/30001.gif',
jpName: 'ア',
engName: 'alpha'
},
{
name: 30002,
file: 'icon/30002.jpg',
jpName: 'イ',
engName: 'beta'
},
{name: 40001, file: 'icon/40001.gif', jpName: 'ウ',
engName: 'gamma'
},
{
name: 41002,
file: 'icon/41002.jpg',
jpName: 'エ',
engName: 'delta'
},
{
name: 50301,
file: 'icon/50301.jpg',
jpName: 'オ',
engName: 'mu'
},
{
name: 50401,
file: 'icon/50401.jpg',
jpName: 'ン',
engName: 'nu'
}
];
//Language Controler
let control = [{
name: 'jp',
title: '計算',
ans: '答え'
},
{
name: 'eng',
title: 'Calculations',
ans: 'Answer'
}
]
//Array Lists
let ArrayOne = ['test30001', 'test30002', 'test40001', 'test41002', 'test50301', 'test50401'];
let ArrayTwo = ['test50301', 'test50401', 'test40001', 'test41002', 'test30001', 'test30002'];
let ArrayThree = ['test30001', 'test40001', 'test50301', 'test50401', 'test30002', 'test41002'];
//Give images and name
function goImage(arr) {
let x = imgList.findIndex(num => num['name'] === arr);
document.getElementById('art' + arr).innerHTML = '<img src="' + imgList[x].file + '"><br>' + imgList[x][language + 'Name'];
}
//Change page language
function placeAll() {
let tb = control.findIndex(lang => lang['name'] === language);
document.getElementById('title').innerHTML = control[tb].title;
document.getElementById('totalName').innerHTML = control[tb].ans;
imgList.forEach(nameFile => {
goImage(nameFile.name)
});
}
//when select other languages
let language = 'jp';
function handleLang(myRadio) {
language = myRadio.value;
placeAll();
}
//amount calculations
function calculate() {
var calValue = 0;
countThese.each(function() {
calValue += +$(this).val();
})
localStorage.setItem($(this).attr('id'), $(this).val());
let allRate = imgList.length * 10;
document.getElementById('totalAm').innerHTML = ((calValue / allRate) * 100).toFixed(2) + '%';
}
let countThese = $('#testBox:input').click(calculate);
//rearrange div boxes
function ArrayOne1() {
$(ArrayOne).each(function() {
$('#testBox').append(
$('#testBox div#'+this)
);
});
/* $('#testBox div').each(function() {
if ($.inArray($(this).attr('id'), ArrayOne) == -1) {
$('#testBox').append($('#' + $(this).attr('id')));
}
});*/
};
function ArrayTwo1() {
$(ArrayTwo).each(function() {
$('#testBox').append(
$('#testBox div#'+this)
);
});
/*
$('#testBox div').each(function() {
if ($.inArray($(this).attr('id'), ArrayTwo) == -1) {
$('#testBox').append($('#' + $(this).attr('id')));
}
});*/
};
function ArrayThree1() {
$(ArrayThree).each(function() {
$('#testBox').append(
$('#testBox div#'+this)
);
});
/* $('#testBox div').each(function() {
if ($.inArray($(this).attr('id'), ArrayThree) == -1) {
$('#testBox').append($('#' + $(this).attr('id')));
}
});*/
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='title'></div>
<form id="calcul">
<div class="container" id="testBox">
<div class="tryBox" id="test30001">
<div id="art30001" class="star3">
</div>
<div id="ca30001" class="calLV3">
<select id="t30001" class="sLV3">
<option value="0">0</option>
<option value="0">1</option>
<option value="0">2</option>
</select>
</div>
</div>
<div class="tryBox" id="test30002">
<div id="art30002" class="star3">
</div>
<div id="ca30002" class="calLV3">
<select id="t30002" class="sLV3">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</div>
<div class="tryBox" id="test40001">
<div id="art40001" class="star4">
</div>
<div id="ca40001" class="calLV4">
<select id="t40001" class="sLV4">
<option value="0">0</option>
<option value="2">2</option>
<option value="4">4</option>
</select>
</div>
</div>
<div class="tryBox" id="test41002">
<div id="art41002" class="star4">
</div>
<div id="ca41002" class="calLV4">
<select id="t41002" class="sLV4">
<option value="0">0</option>
<option value="2">2</option>
<option value="4">4</option>
</select>
</div>
</div>
<div class="tryBox" id="test50301">
<div id="art50301" class="star5">
</div>
<div id="ca50301" class="calLV5">
<select id="t50301" class="sLV5">
<option value="0">0</option>
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="7">7</option>
</select>
</div>
</div>
<div class="tryBox" id="test50401">
<div id="art50401" class="star5">
</div>
<div id="ca50401" class="calLV5">
<select id="t50401" class="sLV5">
<option value="0">0</option>
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="7">7</option>
</select>
</div>
</div>
</div>
</form>
<div id='button1'>
<button onclick="ArrayOne1()">WAY1</button>
<button onclick="ArrayTwo1()">WAY2</button>
<button onclick="ArrayThree1()">WAY3</button>
</div>
<div id='lang'>
<input type="radio" id="jp" name="lang" value="jp" onchange="handleLang(this)" checked>
<label for="jp">日本語</label>
<input type="radio" id="eng" name="lang" value="eng" onchange="handleLang(this)">
<label for="eng">English</label>
</div>
<div class="answer">
<div class="totalName" id="totalName"></div>
<div class="totalAm" id="totalAm"></div>
</div>
<script src="script.js"></script>

Trying to make it so if the 3rd option on the dropdown is chosen, then the text boxes will disable and a new box will appear

I have three options on the drop down when the third option is selected i want the two boxes to be hidden and disabled then the hidden box to appear. Any help is appreciated. I have no class ID for the drop down.
function changetextbox()
if (document.getElementsByName("customerType")[0].options[2].selected = true;) {
document.getElementById("retCustDetails").disable= true;
document.getElementById("tradeCustDetails").style.visibility = "visible";
} else {
document.getElementById("retCustDetails").disable= false ;
}
}
<section id="makeBooking">
<h2>Make booking</h2>
Your details
Customer Type: <select name="customerType">
<option value="">Customer Type?</option>
<option value="ret">Customer</option>
<option value="trd">Trade</option>
</select>
<div id="retCustDetails" class="custDetails">
Forename <input type="text" name="forename">
Surname <input type="text" name="surname">
</div>
<div id="tradeCustDetails" class="custDetails" style="visibility:hidden">
Company Name <input type="text" name="companyName">
</div>
Frist add an oninput event to the select tag and an ID to it so you can access it easier like this:
<select id="customerType" name="customerType" oninput="checkValue()">
Then make this script that will get the value of the select element and then check which elements it needs to show or hide:
function checkValue() {
var selectedValue = document.getElementById('customerType').value;
var retEle = document.getElementById("retCustDetails");
var trdEle = document.getElementById("tradeCustDetails");
if (selectedValue == 'trd') {
retEle.style.visibility = 'hidden';
trdEle.style.visibility = 'visible';
} else {
retEle.style.visibility = 'visible';
trdEle.style.visibility = 'hidden';
}
}
You should get this once your done:
function checkValue() {
var selectedValue = document.getElementById('customerType').value;
var retEle = document.getElementById('retCustDetails');
var trdEle = document.getElementById('tradeCustDetails');
if (selectedValue == 'trd') {
retEle.style.visibility = 'hidden';
trdEle.style.visibility = 'visible';
} else {
retEle.style.visibility = 'visible';
trdEle.style.visibility = 'hidden';
}
}
<section id="makeBooking">
<h2>Make booking</h2>
Your details
Customer Type:
<select id="customerType" name="customerType" oninput="checkValue()">
<option value="">Customer Type?</option>
<option value="ret">Customer</option>
<option value="trd">Trade</option>
</select>
<div id="retCustDetails" class="custDetails">
Forename <input type="text" name="forename">
Surname <input type="text" name="surname">
</div>
<div id="tradeCustDetails" class="custDetails" style="visibility:hidden">
Company Name <input type="text" name="companyName">
</div>
</section>
Edit
Since your not allowed to change the HTML, try this script here instead:
document.getElementsByName('customerType')[0].oninput = function() {
var selectedValue = document.getElementsByName('customerType')[0].value;
var retEle = document.getElementById('retCustDetails');
var trdEle = document.getElementById('tradeCustDetails');
if (selectedValue == 'trd') {
retEle.style.visibility = 'hidden';
trdEle.style.visibility = 'visible';
} else {
retEle.style.visibility = 'visible';
trdEle.style.visibility = 'hidden';
}
}
So you'll end up with:
document.getElementsByName('customerType')[0].oninput = function() {
var selectedValue = document.getElementsByName('customerType')[0].value;
var retEle = document.getElementById('retCustDetails');
var trdEle = document.getElementById('tradeCustDetails');
if (selectedValue == 'trd') {
retEle.style.visibility = 'hidden';
trdEle.style.visibility = 'visible';
} else {
retEle.style.visibility = 'visible';
trdEle.style.visibility = 'hidden';
}
}
<section id="makeBooking">
<h2>Make booking</h2>
Your details
Customer Type: <select name="customerType">
<option value="">Customer Type?</option>
<option value="ret">Customer</option>
<option value="trd">Trade</option>
</select>
<div id="retCustDetails" class="custDetails">
Forename <input type="text" name="forename">
Surname <input type="text" name="surname">
</div>
<div id="tradeCustDetails" class="custDetails" style="visibility:hidden">
Company Name <input type="text" name="companyName">
</div>
</section>
Maybe something like that? I'm not exactly sure if that is what you want to have.
$('#tradeCustDetails').css({ 'display': 'none' });
$(document).on('change','select',function(){
var selectvalue = $('select').val();
if(selectvalue == 'trd'){
$('#retCustDetails').css({ 'display': 'none' });
$('#tradeCustDetails').css({ 'display': 'block' });
$('#tradeCustDetails').css({ 'visibility': 'visible' });
} else {
$('#retCustDetails').css({ 'display': 'block' });
$('#tradeCustDetails').css({ 'display': 'none' });
$('#tradeCustDetails').css({ 'visibility': 'hidden' });
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="makeBooking">
<h2>Make booking</h2>
Your details
Customer Type: <select name="customerType">
<option value="">Customer Type?</option>
<option value="ret">Customer</option>
<option value="trd">Trade</option>
</select>
<div id="retCustDetails" class="custDetails">
Forename <input type="text" name="forename">
Surname <input type="text" name="surname">
</div>
<div id="tradeCustDetails" class="custDetails" style="visibility:hidden">
Company Name <input type="text" name="companyName">
</div>
Divs don't have a "disabled." So, you'll have to disable each child of the div.
document.getElementsByName('customerType')[0].onchange =
function changetextbox() {
var inp = document.getElementById("retCustDetails").childNodes;
if (document.getElementsByName("customerType")[0].options[2].selected === true) {
for (var i = 0; i < inp.length; i++) {
inp[i].disabled = true;
}
document.getElementById("tradeCustDetails").style.visibility = "visible";
} else {
for (var i = 0; i < inp.length; i++) {
inp[i].disabled = false;
}
document.getElementById("tradeCustDetails").style.visibility = "hidden";
}
}
<section id="makeBooking">
<h2>Make booking</h2>
Your details
Customer Type:
<select name="customerType">
<option value="">Customer Type?</option>
<option value="ret">Customer</option>
<option value="trd">Trade</option>
</select>
<div id="retCustDetails" class="custDetails">
Forename <input type="text" name="forename"> Surname <input type="text" name="surname">
</div>
<div id="tradeCustDetails" class="custDetails" style="visibility:hidden">
Company Name <input type="text" name="companyName">
</div>

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>

Hide or Show div based on option selection

I'm trying to show or hide the div based on the option selected. When Customer is selected, it should show retCustDetails and when Trade is selected it should show tradeCustDetails.
Please let me know what I'm missing on the codes below.
<h2>Place order</h2>
Your details
Customer Type: <select id="show" name="customerType" onchange="change()">
<option value="">Customer Type?</option>
<option value="ret">Customer</option>
<option value="trd">Trade</option>
</select>
<div id="retCustDetails" class="custDetails">
Forename <input type="text" name="forename" id="forename" />
Surname <input type="text" name="surname" id="surname" />
</div>
<div id="tradeCustDetails" class="custDetails" style="visibility:hidden">
Company Name <input type="text" name="companyName" id="companyName" />
</div>
JS
function change(obj) {
var selectBox = obj;
var selected = selectBox.options[selectBox.selectedIndex].value;
var retCustDetails = document.getElementById("retCustDetails");
var tradeCustDetails = document.getElementById("tradeCustDetails");
if(selected === '1'){
retCustDetails.style.display = "block";
tradeCustDetails.style.display = "none";
}
else{
retCustDetails.style.display = "none";
tradeCustDetails.style.display = "block";
}
}
There were few minor mistakes in your code, I have corrected it to make it work -
<body>
<h2>Place order</h2>
Your details
Customer Type: <select id="show" name="customerType" onchange="change(this)">
<option value="">Customer Type?</option>
<option value="ret">Customer</option>
<option value="trd">Trade</option>
</select>
<div id="retCustDetails" class="custDetails" style="display:none">
Forename <input type="text" name="forename" id="forename" />
Surname <input type="text" name="surname" id="surname" />
</div>
<div id="tradeCustDetails" class="custDetails" style="display:none">
Company Name <input type="text" name="companyName" id="companyName" />
</div>
<script>
function change(obj) {
var selectBox = obj;
var selected = selectBox.options[selectBox.selectedIndex].value;
var retCustDetails = document.getElementById("retCustDetails");
var tradeCustDetails = document.getElementById("tradeCustDetails");
if(selected == 'ret'){
retCustDetails.style.display = "block";
tradeCustDetails.style.display = "none";
}
else{
retCustDetails.style.display = "none";
tradeCustDetails.style.display = "block";
}
}
</script>
</body>
You are using visibility:hidden in your html but in your js your are changing the display property.
Change visibility:hidden to display:none.
Use this as change funtion's parameter like onchange="change(this)"
And JS function change to following.
function change(obj) {
var selectBox = obj.value;
var retCustDetails = document.getElementById('retCustDetails');
var tradeCustDetails = document.getElementById('tradeCustDetails');
if(selectBox == 'ret'){
retCustDetails.style.display = "block";
tradeCustDetails.style.display = "none";
}
else{
retCustDetails.style.display = "none";
tradeCustDetails.style.display = "block";
}
}
This is an alternative method. This too works. Cheers !
<script>
jQuery(function($) {
$('#show').change(function(){
var val = $(this).val();
if( val == 'ret') {
$('#retCustDetails').show();
$('#tradeCustDetails').hide();
} else if(val == 'trd') {
$('#tradeCustDetails').show();
$('#retCustDetails').hide();
} else {
$('#tradeCustDetails').hide();
$('#retCustDetails').hide();
}
});
});
</script>
<h2>Place order</h2>
Your details
Customer Type: <select id="show" name="customerType">
<option value="">Customer Type?</option>
<option value="ret">Customer</option>
<option value="trd">Trade</option>
</select>
<div id="retCustDetails" class="custDetails" style="display:none">
Forename <input type="text" name="forename" id="forename" />
Surname <input type="text" name="surname" id="surname" />
</div>
<div id="tradeCustDetails" class="custDetails" style="display:none">
Company Name <input type="text" name="companyName" id="companyName" />
</div>
pass the this as argument to the change() method. Also change the if condition as like below
if(selected === 'ret'){
//...
}
because you get the selected value, it give either "ret" or "trd"
Change the tradeCustDetails visibility: hidden to display: none
Try this code.
function change(obj) {
//alert(obj);
var selectBox = obj;
var selected = selectBox.options[selectBox.selectedIndex].value;
var retCustDetails = document.getElementById("retCustDetails");
var tradeCustDetails = document.getElementById("tradeCustDetails");
if(selected === 'ret'){
retCustDetails.style.display = "block";
tradeCustDetails.style.display = "none";
}
else{
retCustDetails.style.display = "none";
tradeCustDetails.style.display = "block";
}
}
<h2>Place order</h2>
Your details
Customer Type: <select id="show" name="customerType" onchange="change(this)">
<option value="">Customer Type?</option>
<option value="ret">Customer</option>
<option value="trd">Trade</option>
</select>
<div id="retCustDetails" class="custDetails">
Forename <input type="text" name="forename" id="forename" />
Surname <input type="text" name="surname" id="surname" />
</div>
<div id="tradeCustDetails" class="custDetails" style="display:none">
Company Name <input type="text" name="companyName" id="companyName" />
</div>
Hope this will help you.

Categories