I'm trying to show the "expandrepeat" div when choosing a specific select option.
This is my not working code:
<script>
window.check=function(elem) {
if (elem.selectedIndex == 1) {
document.getElementById("expandrepeat").style.display = 'block';
} else {
document.getElementById("expandrepeat").style.display = 'none';
}
};
</script>
html:
<div class="information-lane">
<p class="information-title">{{trans.modal.repeat}}</p>
<select class="information-input form-control" onChange="check(this);">
<option value="-">No repeat</option>
<option value="-">Daily</option>
<option value="-">Weekly</option>
<option value="-">Monthly</option>
<option value="-">Yearly</option>
<option disabled="disabled">–––––––––––––––––––––––––––––––––––––––––––––</option>
<option value="-">Custom...</option>
</select>
</div>
<div id="expandrepeat" style="display:none;">
<p>Repeat every</p>
<input>
</div>
If you're new to Vue, you should read the documentation on how to handle Event Handling.
You could also use v-show instead of setting the display property manually.
new Vue({
el: "#app",
methods: {
check: function(ev) {
if (ev.target.value === "custom")
document.getElementById("expandrepeat").style.display = 'block';
else
document.getElementById("expandrepeat").style.display = 'none';
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" class="information-lane">
<select class="information-input form-control" #change="check">
<option value="-">No repeat</option>
<option value="">Daily</option>
<option value="-">Weekly</option>
<option value="-">Monthly</option>
<option value="-">Yearly</option>
<option disabled="disabled">–––––––––––––––––––––––––––––––––––––––––––––</option>
<option value="custom">Custom...</option>
</select>
</div>
<div id="expandrepeat" style="display:none;">
<p>Repeat every</p>
<input>
</div>
Related
here's the situation
I have a select element in my html code, with many option. One of these options is "Other". What I want is, when I select "Other", without refreshing the page, display an input element right under the select one with JS. The problem is that I have to refresh the page to see the change. Can you help me? :)
There's my code :
<label for="select-tribunal" class="form-label">Cadre Légal</label>
<select id="select-tribunal" required class="form-select" aria-label="Default select example">
<?php
foreach ($tribunaux as $tribunal){
echo '<option value="'.$tribunal['id'].'">'.$tribunal['nom'].'</option>';
}
?>
<option value="0">Autre Tribunal</option>
</select>
<input type="text" class="form-control" id="tribunal" style="visibility: hidden" placeholder="Entrez le nom du tribunal">
<script>
var tribunal = document.getElementById("select-tribunal");
if (tribunal.options[tribunal.selectedIndex].value === '0') {
document.getElementById('tribunal').style.visibility = 'visible';
} else {
document.getElementById('tribunal').style.visibility = 'hidden';
}
</script>
Thanks in advance :)
You have to add an eventlistener.
let tribunal = document.getElementById("select-tribunal");
tribunal.addEventListener('change', showInput);
showInput({
target: tribunal
});
function showInput(event) {
if (event.target.value === '0') {
document.getElementById('tribunal').style.visibility = 'visible';
} else {
document.getElementById('tribunal').style.visibility = 'hidden';
}
}
<label for="select-tribunal" class="form-label">Cadre Légal</label>
<select id="select-tribunal" required class="form-select" aria-label="Default select example">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="0" selected>Autre Tribunal</option>
</select>
<input type="text" class="form-control" id="tribunal" style="visibility: hidden" placeholder="Entrez le nom du tribunal">
Since php is running on server the page have to reload in order to see the changes you need to use JavaScript for for this task since you want to see the changes without reload
var select = document.querySelector("#mySelect");
var input = document.querySelector("#myInput");
select.addEventListener("change", function(event){
if(event.target.value === "other"){
input.style.display="block"
}else{
input.style.display="none"
}
})
<select id="mySelect">
<option value="a">A</option>
<option value="a">B</option>
<option value="c">C</option>
<option value="other">Other</option>
</select>
<input style="display: none" type="text" id="myInput">
I want to use plain JavaScript. I have a drop down list (<select> with a number of <option>s). When a certain option is selected I want a hidden div to display.
<select id="test" name="form_select">
<option value="0">No</option>
<option value ="1" onClick"showDiv()">Yes</option>
</select>
<div id="hidden_div" style="display: none;">Hello hidden content</div>
Then I'm trying it with this vanilla JavaScript code:
function showDiv(){
document.getElementById('hidden_div').style.display = "block";
}
I'm guessing my problem is with the onClick trigger in my options but I'm unsure on what else to use?
try this:
function showDiv(divId, element)
{
document.getElementById(divId).style.display = element.value == 1 ? 'block' : 'none';
}
#hidden_div {
display: none;
}
<select id="test" name="form_select" onchange="showDiv('hidden_div', this)">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
<div id="hidden_div">This is a hidden div</div>
Try handling the change event of the select and using this.value to determine whether it's 'Yes' or not.
jsFiddle
JS
document.getElementById('test').addEventListener('change', function () {
var style = this.value == 1 ? 'block' : 'none';
document.getElementById('hidden_div').style.display = style;
});
HTML
<select id="test" name="form_select">
<option value="0">No</option>
<option value ="1">Yes</option>
</select>
<div id="hidden_div" style="display: none;">Hello hidden content</div>
I think this is an appropriate solution:
<select id="test" name="form_select" onchange="showDiv(this)">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
<div id="hidden_div" style="display:none;">Hello hidden content</div>
<script type="text/javascript">
function showDiv(select){
if(select.value==1){
document.getElementById('hidden_div').style.display = "block";
} else{
document.getElementById('hidden_div').style.display = "none";
}
}
</script>
You should hook onto the change event of the <select> element instead of on the individual options.
var select = document.getElementById('test'),
onChange = function(event) {
var shown = this.options[this.selectedIndex].value == 1;
document.getElementById('hidden_div').style.display = shown ? 'block' : 'none';
};
// attach event handler
if (window.addEventListener) {
select.addEventListener('change', onChange, false);
} else {
// of course, IE < 9 needs special treatment
select.attachEvent('onchange', function() {
onChange.apply(select, arguments);
});
}
Demo
Being more generic, passing values from calling element (which is easier to maintain).
Specify the start condition in the text field (display:none)
Pass the required option value to show/hide on ("Other")
Pass the target and field to show/hide ("TitleOther")
function showHideEle(selectSrc, targetEleId, triggerValue) {
if(selectSrc.value==triggerValue) {
document.getElementById(targetEleId).style.display = "inline-block";
} else {
document.getElementById(targetEleId).style.display = "none";
}
}
<select id="Title"
onchange="showHideEle(this, 'TitleOther', 'Other')">
<option value="">-- Choose</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Other">Other --></option>
</select>
<input id="TitleOther" type="text" title="Title other" placeholder="Other title"
style="display:none;"/>
Check this code. It awesome code for hide div using select item.
HTML
<select name="name" id="cboOptions" onchange="showDiv('div',this)" class="form-control" >
<option value="1">YES</option>
<option value="2">NO</option>
</select>
<div id="div1" style="display:block;">
<input type="text" id="customerName" class="form-control" placeholder="Type Customer Name...">
<input type="text" style="margin-top: 3px;" id="customerAddress" class="form-control" placeholder="Type Customer Address...">
<input type="text" style="margin-top: 3px;" id="customerMobile" class="form-control" placeholder="Type Customer Mobile...">
</div>
<div id="div2" style="display:none;">
<input type="text" list="cars" id="customerID" class="form-control" placeholder="Type Customer Name...">
<datalist id="cars">
<option>Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
<option>Value 4</option>
</datalist>
</div>
JS
<script>
function showDiv(prefix,chooser)
{
for(var i=0;i<chooser.options.length;i++)
{
var div = document.getElementById(prefix+chooser.options[i].value);
div.style.display = 'none';
}
var selectedOption = (chooser.options[chooser.selectedIndex].value);
if(selectedOption == "1")
{
displayDiv(prefix,"1");
}
if(selectedOption == "2")
{
displayDiv(prefix,"2");
}
}
function displayDiv(prefix,suffix)
{
var div = document.getElementById(prefix+suffix);
div.style.display = 'block';
}
</script>
<select id="test" name="form_select" onchange="showDiv()">
<option value="0">No</option>
<option value ="1">Yes</option>
</select>
<div id="hidden_div" style="display: none;">Hello hidden content</div>
<script>
function showDiv(){
getSelectValue = document.getElementById("test").value;
if(getSelectValue == "1"){
document.getElementById("hidden_div").style.display="block";
}else{
document.getElementById("hidden_div").style.display="none";
}
}
</script>
you can use the following common function.
<div>
<select class="form-control"
name="Extension for area validity sought for"
onchange="CommonShowHide('txtc1opt2', this, 'States')"
>
<option value="All India">All India</option>
<option value="States">States</option>
</select>
<input type="text"
id="txtc1opt2"
style="display:none;"
name="Extension for area validity sought for details"
class="form-control"
value=""
placeholder="">
</div>
<script>
function CommonShowHide(ElementId, element, value) {
document
.getElementById(ElementId)
.style
.display = element.value == value ? 'block' : 'none';
}
</script>
function showDiv(divId, element)
{
document.getElementById(divId).style.display = element.value == 1 ? 'block' : 'none';
}
#hidden_div {
display: none;
}
<select id="test" name="form_select" onchange="showDiv('hidden_div', this)">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
<div id="hidden_div">This is a hidden div</div>
take look at my solution
i want to make visaCard-note div to be visible only if selected cardType is visa
and here is the html
<select name="cardType">
<option value="1">visa</option>
<option value="2">mastercard</option>
</select>
here is the js
var visa="1";//visa is selected by default
$("select[name=cardType]").change(function () {
document.getElementById('visaCard-note').style.visibility = this.value==visa ? 'visible' : 'hidden';
})
I am a newbie and I have this project where the user should have the option of custom input if the listed options are not in dropdown.
HTML
<div class="form-group">
<label class="col-sm-2 col-form-label">Select Page Size</label>
<select name = 'pageSelector' class="col-sm-3">
<option value ="">Select Page Size</option>
<option value ="84.1|118.9">A0</option>
<option value = "59.4|84.1">A1</option>
<option value = "7.4|10.5">A7</option>
<option value = "custom">Select Custom</option>
</select>
</div>
PHP
if(isset($_POST["pageSelector"]))
{
$result = $_POST['pageSelector'];
if($result == "")
{
echo "<script>alert('Please select the Page')</script>";
}
$result_explode = explode('|', $result);
$width_page = $result_explode[0];
$height_page = $result_explode[1];
// Converting the string variables to integer
$width_plate=(double)$width_plate;
$height_plate=(double)$height_plate;
$width_page=(double)$width_page;
$height_page=(double)$height_page;
// To calculate the number of pages that can be print with one selected plate
$calculated_width = $width_plate/$width_page;
$calculated_height = $height_plate/$height_page;
$print_include = (int)$calculated_height*(int)$calculated_width;
echo "<div class='h1'>Number of Prints in one plate ".$print_include." prints</div> ";
}
I would like if the user selects the custom option then a input text should appear on the screen.
If user selected a custom option then you can give him an input.
let selectEl = document.getElementById('select-list');
selectEl.addEventListener('change', (e) => {
if (e.target.value == 'custom') {
document.getElementById('txt-custom').style.display = 'block';
} else {
document.getElementById('txt-custom').style.display = 'none';
}
});
#txt-custom {
display: none;
}
<select id="select-list">
<option value="">Select an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="custom">Custom</option>
</select>
<input type="text" id="txt-custom" name="custom-value" />
var pageSelector = document.getElementById('pageSelector');
var customInput = document.getElementById('customInput');
pageSelector.addEventListener('change', function(){
if(this.value == "custom") {
customInput.classList.remove('hide');
} else {
customInput.classList.add('hide');
}
})
.hide {
width: 0;
height: 0;
opacity: 0;
}
<div class="form-group">
<label class="col-sm-2 col-form-label">Select Page Size</label>
<select name = 'pageSelector' class="col-sm-3 page" id="pageSelector">
<option value ="">Select Page Size</option>
<option value ="84.1|118.9">A0</option>
<option value = "59.4|84.1">A1</option>
<option value = "7.4|10.5">A7</option>
<option value = "custom">Select Custom</option>
</select>
<input type="text" class="hide" placeholder="Custom Selector" name="custom" id="customInput">
</div>
Demo Code :
First you should have input with style="display:none" and with jQuery
jQuery(document).ready(function() {
jQuery("#selectId").change(function() {
if (jQuery(this).val() === 'custom'){
jQuery('input[name=other_input]').show();
} else {
jQuery('input[name=other_input]').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<select name = 'pageSelector' class="col-sm-3" id="selectId" >
<option value ="">Select Page Size</option>
<option value ="84.1|118.9">A0</option>
<option value = "59.4|84.1">A1</option>
<option value = "7.4|10.5">A7</option>
<option value = "custom">Select Custom</option>
</select>
<br><br><br>
<input type="text" name="other_input" style="display:none" />
Angular Version
Angular CLI: 13.0.3
Node: 16.15.0
Package Manager: npm 8.5.5
In .html File
**<div class="col-md-6">
<label class="form-label">Attendence Type</label>
<select (change)="type($event)" class="form-select" aria-label="Default select example" >
<option selected value="P">Present</option>
<option value="A">Absent</option>
<option value="PL">Paid Leave</option>
<option value="UL">Unpaid Leave</option>
</select>
</div>**
I want to Show this input after select paid leave
**<div *ngIf="plFlag" class="col-md-6">
<label class="form-label">Leave Type</label>
<select class="form-select" aria-label="Default select example">
<option selected disabled>Leave Type</option>
<option value="CL">Causel Leave</option>
<option value="SL">Seek Leave</option>
</select>
</div>**
and in .ts File
**type(event: any) {
console.log(event.target.value);
if (event.target.value == "PL") {
this.plFlag = true;
}
else {
this.plFlag = false;
}
}**
I created a select list. How to create onload function using javascript. When open the page selected value is 1. At that time I need to show no1 div. How to do that?
function olresult(e) {
var selectedValue = document.getElementById("sel").value;
if (selectedValue == '1') {
document.getElementById('no1').style.display = 'none';
document.getElementById('no2').style.display = 'block';
} else {
document.getElementById('no1').style.display = 'block';
document.getElementById('no2').style.display = 'none';
}
}
<select id="sel" onload="olresult(event)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="no1" style="display:none;">
<p>123</p>
</div>
<div id="no2" style="display:none;">
<p>aaaaa</p>
</div>
<select> elements don't work with onload, you want to fire the event when the selection changes. You need to change onload to onchange.
If you need something to happen when the page loads, you can add onload to the <body> element or better yet just include your script to run at the end of the HTML document. Also, you may as well just remove display:none from the HTML.
function olresult(e) {
var selectedValue = document.getElementById("sel").value;
if (selectedValue == '1') {
document.getElementById('no1').style.display = 'none';
document.getElementById('no2').style.display = 'block';
} else {
document.getElementById('no1').style.display = 'block';
document.getElementById('no2').style.display = 'none';
}
}
<select id="sel" onchange="olresult(event)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="no1" style="display:none;">
<p>123</p>
</div>
<div id="no2">
<p>aaaaa</p>
</div>
I want to use plain JavaScript. I have a drop down list (<select> with a number of <option>s). When a certain option is selected I want a hidden div to display.
<select id="test" name="form_select">
<option value="0">No</option>
<option value ="1" onClick"showDiv()">Yes</option>
</select>
<div id="hidden_div" style="display: none;">Hello hidden content</div>
Then I'm trying it with this vanilla JavaScript code:
function showDiv(){
document.getElementById('hidden_div').style.display = "block";
}
I'm guessing my problem is with the onClick trigger in my options but I'm unsure on what else to use?
try this:
function showDiv(divId, element)
{
document.getElementById(divId).style.display = element.value == 1 ? 'block' : 'none';
}
#hidden_div {
display: none;
}
<select id="test" name="form_select" onchange="showDiv('hidden_div', this)">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
<div id="hidden_div">This is a hidden div</div>
Try handling the change event of the select and using this.value to determine whether it's 'Yes' or not.
jsFiddle
JS
document.getElementById('test').addEventListener('change', function () {
var style = this.value == 1 ? 'block' : 'none';
document.getElementById('hidden_div').style.display = style;
});
HTML
<select id="test" name="form_select">
<option value="0">No</option>
<option value ="1">Yes</option>
</select>
<div id="hidden_div" style="display: none;">Hello hidden content</div>
I think this is an appropriate solution:
<select id="test" name="form_select" onchange="showDiv(this)">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
<div id="hidden_div" style="display:none;">Hello hidden content</div>
<script type="text/javascript">
function showDiv(select){
if(select.value==1){
document.getElementById('hidden_div').style.display = "block";
} else{
document.getElementById('hidden_div').style.display = "none";
}
}
</script>
You should hook onto the change event of the <select> element instead of on the individual options.
var select = document.getElementById('test'),
onChange = function(event) {
var shown = this.options[this.selectedIndex].value == 1;
document.getElementById('hidden_div').style.display = shown ? 'block' : 'none';
};
// attach event handler
if (window.addEventListener) {
select.addEventListener('change', onChange, false);
} else {
// of course, IE < 9 needs special treatment
select.attachEvent('onchange', function() {
onChange.apply(select, arguments);
});
}
Demo
Being more generic, passing values from calling element (which is easier to maintain).
Specify the start condition in the text field (display:none)
Pass the required option value to show/hide on ("Other")
Pass the target and field to show/hide ("TitleOther")
function showHideEle(selectSrc, targetEleId, triggerValue) {
if(selectSrc.value==triggerValue) {
document.getElementById(targetEleId).style.display = "inline-block";
} else {
document.getElementById(targetEleId).style.display = "none";
}
}
<select id="Title"
onchange="showHideEle(this, 'TitleOther', 'Other')">
<option value="">-- Choose</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Other">Other --></option>
</select>
<input id="TitleOther" type="text" title="Title other" placeholder="Other title"
style="display:none;"/>
Check this code. It awesome code for hide div using select item.
HTML
<select name="name" id="cboOptions" onchange="showDiv('div',this)" class="form-control" >
<option value="1">YES</option>
<option value="2">NO</option>
</select>
<div id="div1" style="display:block;">
<input type="text" id="customerName" class="form-control" placeholder="Type Customer Name...">
<input type="text" style="margin-top: 3px;" id="customerAddress" class="form-control" placeholder="Type Customer Address...">
<input type="text" style="margin-top: 3px;" id="customerMobile" class="form-control" placeholder="Type Customer Mobile...">
</div>
<div id="div2" style="display:none;">
<input type="text" list="cars" id="customerID" class="form-control" placeholder="Type Customer Name...">
<datalist id="cars">
<option>Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
<option>Value 4</option>
</datalist>
</div>
JS
<script>
function showDiv(prefix,chooser)
{
for(var i=0;i<chooser.options.length;i++)
{
var div = document.getElementById(prefix+chooser.options[i].value);
div.style.display = 'none';
}
var selectedOption = (chooser.options[chooser.selectedIndex].value);
if(selectedOption == "1")
{
displayDiv(prefix,"1");
}
if(selectedOption == "2")
{
displayDiv(prefix,"2");
}
}
function displayDiv(prefix,suffix)
{
var div = document.getElementById(prefix+suffix);
div.style.display = 'block';
}
</script>
<select id="test" name="form_select" onchange="showDiv()">
<option value="0">No</option>
<option value ="1">Yes</option>
</select>
<div id="hidden_div" style="display: none;">Hello hidden content</div>
<script>
function showDiv(){
getSelectValue = document.getElementById("test").value;
if(getSelectValue == "1"){
document.getElementById("hidden_div").style.display="block";
}else{
document.getElementById("hidden_div").style.display="none";
}
}
</script>
you can use the following common function.
<div>
<select class="form-control"
name="Extension for area validity sought for"
onchange="CommonShowHide('txtc1opt2', this, 'States')"
>
<option value="All India">All India</option>
<option value="States">States</option>
</select>
<input type="text"
id="txtc1opt2"
style="display:none;"
name="Extension for area validity sought for details"
class="form-control"
value=""
placeholder="">
</div>
<script>
function CommonShowHide(ElementId, element, value) {
document
.getElementById(ElementId)
.style
.display = element.value == value ? 'block' : 'none';
}
</script>
function showDiv(divId, element)
{
document.getElementById(divId).style.display = element.value == 1 ? 'block' : 'none';
}
#hidden_div {
display: none;
}
<select id="test" name="form_select" onchange="showDiv('hidden_div', this)">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
<div id="hidden_div">This is a hidden div</div>
take look at my solution
i want to make visaCard-note div to be visible only if selected cardType is visa
and here is the html
<select name="cardType">
<option value="1">visa</option>
<option value="2">mastercard</option>
</select>
here is the js
var visa="1";//visa is selected by default
$("select[name=cardType]").change(function () {
document.getElementById('visaCard-note').style.visibility = this.value==visa ? 'visible' : 'hidden';
})