I have a drop down list and I want every time someone clicks on one of the list, it shows a hidden div, I've written this code but for some reason it doesn't work:
<?php
echo '<select name="ipqos" onchange="myFunction()">';
if ($enable_iprule[0]=='yes'){
echo '<option value="enable_iprule" selected>Enable IP Rule';
}
else{
echo '<option value="enable_iprule">Enable IP Rule';
}
if ($enable_qoshunter[8]=='yes'){
echo '<option value="enable_qoshunter" selected>Enable QoS Hunter';
}
else{
echo '<option value="enable_qoshunter">Enable QoS Hunter';
}
if ($enable_iprule[8]=='no' && $enable_qoshunter[0]=='no'){
echo '<option value="disable_all" selected>Disable All';
}
else{
echo '<option value="disable_all">Disable All';
}
echo '</select>';
echo "
<div id=\"ip\" style=\"display:none\">
<br><br>IP Rule :
<br><textarea name=\"ip_rule\" rows=\"2\"/>$ip_list[1]</textarea>
</div>
<div id=\"qos\" style=\"display:none\">
<br><br>QoS Target :
<br><textarea name=\"qos_target\" rows=\"2\"/>$qos_list[1]</textarea>
<script>
function myFunction() {
var menu = document.getElementById('ipqos');
if (menu.options[menu.selectedIndex].text == 'enable_iprule') {
document.getElementById('ip').style.display = 'block';
document.getElementById('qos').style.display = 'none';
}
else if (menu.options[menu.selectedIndex].text == 'enable_qoshunter') {
document.getElementById('qos').style.display = 'block';
document.getElementById('ip').style.display = 'none';
}
else {
document.getElementById('qos').style.display = 'none';
document.getElementById('ip').style.display = 'none';
}
}
</script>";
?>
I don't get any error messages on my script but for some reason every time I click on a menu, the corresponding hidden div doesn't show up
Where did I go wrong?
UPDATE: This is the View Source from Google Chrome
<select name="ipqos" onchange="myFunction()"><option value="enable_iprule">Enable IP Rule<option value="enable_qoshunter">Enable QoS Hunter<option value="disable_all">Disable All</select>
<div id="ip" style="display:none">
<br><br>IP Rule :
<br><textarea name="ip_rule" rows="2"/></textarea>
</div>
<div id="qos" style="display:none">
<br><br>QoS Target :
<br><textarea name="qos_target" rows="2"/></textarea>
<script>
function myFunction() {
var menu = document.getElementById('ipqos');
if (menu.options[menu.selectedIndex].text == 'enable_iprule') {
document.getElementById('ip').style.display = 'block';
document.getElementById('qos').style.display = 'none';
}
else if (menu.options[menu.selectedIndex].text == 'enable_qoshunter') {
document.getElementById('qos').style.display = 'block';
document.getElementById('ip').style.display = 'none';
}
else {
document.getElementById('qos').style.display = 'none';
document.getElementById('ip').style.display = 'none';
}
}
</script>
This line:
var menu = document.getElementById('ipqos');
There is no element with ID ipqos. There is an element with that name, but not an ID. Change it to:
<select name="ipqos" id="ipqos" onchange="myFunction()">
Second, you're comparing the text of the selected option. Looking at your options, you want to be checking the value instead:
menu.options[menu.selectedIndex].value == 'enable_iprule'
Working example:
function myFunction() {
var menu = document.getElementById('ipqos');
var val = menu.options[menu.selectedIndex].value;
if (val == 'enable_iprule') {
document.getElementById('ip').style.display = 'block';
document.getElementById('qos').style.display = 'none';
}
else if (val == 'enable_qoshunter') {
document.getElementById('qos').style.display = 'block';
document.getElementById('ip').style.display = 'none';
}
else {
document.getElementById('qos').style.display = 'none';
document.getElementById('ip').style.display = 'none';
}
}
<select name="ipqos" id="ipqos" onchange="myFunction()"><option value="enable_iprule">Enable IP Rule<option value="enable_qoshunter">Enable QoS Hunter<option value="disable_all">Disable All</select>
<div id="ip" style="display:none">
<br><br>IP Rule :
<br><textarea name="ip_rule" rows="2"/></textarea>
</div>
<div id="qos" style="display:none">
<br><br>QoS Target :
<br><textarea name="qos_target" rows="2"/></textarea>
RGraham solutions works perfectly.
I did a small work arround on your script.
Here is a simple jsFiddle : http://jsfiddle.net/5ypkaxup/
For the Javascript, I did simplify the process a little bit.
function changedSelect() {
var selectedOption = document.getElementById("ip_select").value;
document.getElementById("demo").innerHTML = "You selected: " + selectedOption;
if(selectedOption == 'enable_iprule') {
document.getElementById('ip').style.display = 'block';
document.getElementById('qos').style.display = 'none';
}
else if (selectedOption == 'enable_qoshunter') {
document.getElementById('qos').style.display = 'block';
document.getElementById('ip').style.display = 'none';
}
else {
document.getElementById('qos').style.display = 'none';
document.getElementById('ip').style.display = 'none';
}
}
As he told, you need to give an ID to your select element to make it works.
<select id="ip_select" name="ipqos" onchange="changedSelect();">
Related
It works... but i want to change the default to hidden.
Click first time to show the hidden text
<script>
function displayRow(itemID){
if ((document.getElementById(itemID).style.display == 'block')) {
document.getElementById(itemID).style.display = 'display';
} else {
document.getElementById(itemID).style.display = 'display';
}
}
</script>
<button onclick="displayRow('1')">Show/Hidden text</button>
Simply set your display to hidden by default
<button style='display: hidden;' onclick="displayRow('<? echo $element ?>')" class='no-print'>Show/Hidden text</button>
and the js
function displayRow(itemID){
var el = document.getElementById(itemID);
if ((el.style.display == 'hidden')) {
el.style.display = 'block';
} else {
el.style.display = 'hidden';
}
}
function displayRow(itemID){
if ((document.getElementById(itemID).style.display == 'none')) {
document.getElementById(itemID).style.display = 'block';
} else {
document.getElementById(itemID).style.display = 'none';
}
}
<table>
<tr style="display:none" id="1">
<td>Test</td>
</tr>
</table>
<button onclick="displayRow('1')">Show/Hidden text</button>
Use "none" instead "hidden", and put style="display: none" to the element which want to hide by default
function displayRow(itemID){
if (document.getElementById(itemID).style.display == 'block') {
document.getElementById(itemID).style.display = 'none';
} else {
document.getElementById(itemID).style.display = 'block';
}
}
Searched around and couldn't find what I was looking for. I have 2 buttons that pull up a two different select boxes on a click and they will disappear with a second click. However, I want select box 1 to disappear on Button click 2 and vice versa: select box 2 will disappear on Button click 1.
HTML:
window.onload = function()
{
document.getElementById('name1').style.display = 'none';
document.getElementById('name2').style.display = 'none';
};
function button1function(id){
if(document.getElementById(id).style.display == 'none'){
document.getElementById(id).style.display = 'initial';
}else{
document.getElementById(id).style.display = 'none';
}
}
function button2function(id){
if(document.getElementById(id).style.display == 'none'){
document.getElementById(id).style.display = 'initial';
}else{
document.getElementById(id).style.display = 'none';
}
}
<button type="button" value='hide/show' onclick="button1function('name1')">Button 1</button>
<button type="button" value='hide/show' onclick="button2function('name2')">Button 2</button>
<select id="name1">
<option value="">What would you like to know..</option>
</select>
<select id="name2">
<option value="">What would you like to know 2..</option>
</select>
Like this? https://jsfiddle.net/o3btLkpd/
try calling this at the top of the event handler for button 1:
document.getElementById('name2').style.display = 'none';
and this in the handler for button 2:
document.getElementById('name1').style.display = 'none';
the full resulting code would be like this:
window.onload = function() {
document.getElementById('name1').style.display = 'none';
document.getElementById('name2').style.display = 'none';
};
function button1function(id) {
document.getElementById('name2').style.display = 'none';
if (document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = 'initial';
} else {
document.getElementById(id).style.display = 'none';
}
}
function button2function(id) {
document.getElementById('name1').style.display = 'none';
if (document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = 'initial';
} else {
document.getElementById(id).style.display = 'none';
}
}
I have a code in which I want different html elements to appear and disappear based on selection in html dropdown. The problem is that the console returns the value of the dropdown correctly but with the given code below, none of the html appear upon changing the value of the dropdown.
Here's the code: http://textuploader.com/dhzi6
HTML
<select id="dropDown">
<option value="default" selected="selected"> Please select shape </option>
<option value="one" id="rectangle">Rectangle</option>
<option value="two" id="triangle">Triangle</option>
<option value="three" id="circle">Circle</option>
</select>
<div id="wrapperOne"></div>
<div id="wrapperTwo"></div>
<div id="wrapperThree"></div>
JS
var dropDown = document.getElementById("dropDown"),
myWrappers = [
document.getElementById("wrapperOne"),
document.getElementById("wrapperTwo"),
document.getElementById("wrapperThree")
];
for (i=0; i<myWrappers.length; i++){
if(dropDown.value === "default"){
myWrappers[i].style.display = "none";
} else if(dropDown.value === "one"){
myWrappers[i].style.display = "none";
myWrappers[0].style.display = "block";
} else if(dropDown.value === "two"){
myWrappers[i].style.display = "none";
myWrappers[1].style.display = "block";
} else if(dropDown.value === "three"){
myWrappers[i].style.display = "none";
myWrappers[2].style.display = "block";
}
}
The problem is you have not fired the onchange event. Add onchange event for your select box and kept your javascript code inside one function. It will work.
HTML
<select id="dropDown" onchange="test()">
<option value="default" selected="selected"> Please select shape </option>
<option value="one" id="rectangle">Rectangle</option>
<option value="two" id="triangle">Triangle</option>
<option value="three" id="circle">Circle</option>
</select>
<div id="wrapperOne"><h1>First</h1></div>
<div id="wrapperTwo"><h1>Second</h1></div>
<div id="wrapperThree"><h1>Third</h1></div>
JS
var dropDown = document.getElementById("dropDown"),
myWrappers = [
document.getElementById("wrapperOne"),
document.getElementById("wrapperTwo"),
document.getElementById("wrapperThree")
];
function test() {
for (i=0; i<myWrappers.length; i++){
if(dropDown.value === "default"){
myWrappers[i].style.display = "none";
} else if(dropDown.value === "one"){
myWrappers[i].style.display = "none";
myWrappers[0].style.display = "block";
} else if(dropDown.value === "two"){
myWrappers[i].style.display = "none";
myWrappers[1].style.display = "block";
} else if(dropDown.value === "three"){
myWrappers[i].style.display = "none";
myWrappers[2].style.display = "block";
}
}
}
FIDDLE DEMO
UPDATE
Now the above code will run successfully, but the way you are achieving the desired result is too complicated. You can make it very simple and neat. Look at the following code javascript code.
function changeEvent() {
var dropDown = document.getElementById("dropDown").value;
if(dropDown === "default"){
document.getElementById('wrapperOne').style.display = 'block';
document.getElementById('wrapperTwo').style.display = 'block';
document.getElementById('wrapperThree').style.display = 'block';
} else {
document.getElementById('wrapperOne').style.display = 'none';
document.getElementById('wrapperTwo').style.display = 'none';
document.getElementById('wrapperThree').style.display = 'none';
if(dropDown === "one"){
document.getElementById('wrapperOne').style.display = 'block';
} else if(dropDown === "two"){
document.getElementById('wrapperTwo').style.display = 'block';
} else if(dropDown === "three"){
document.getElementById('wrapperThree').style.display = 'block';
}
}
}
In the above code, first thing there is no for loop. Simply check the selected value and display the html parts accordingly. The same I have added in the snippet below.
function changeEvent() {
var dropDown = document.getElementById("dropDown").value;
if(selvalue === "default"){
document.getElementById('wrapperOne').style.display = 'block';
document.getElementById('wrapperTwo').style.display = 'block';
document.getElementById('wrapperThree').style.display = 'block';
} else {
document.getElementById('wrapperOne').style.display = 'none';
document.getElementById('wrapperTwo').style.display = 'none';
document.getElementById('wrapperThree').style.display = 'none';
if(selvalue === "one"){
document.getElementById('wrapperOne').style.display = 'block';
} else if(selvalue === "two"){
document.getElementById('wrapperTwo').style.display = 'block';
} else if(selvalue === "three"){
document.getElementById('wrapperThree').style.display = 'block';
}
}
}
<select id="dropDown" onChange="changeEvent()">
<option value="default" selected="selected"> Please select shape </option>
<option value="one" id="rectangle">Rectangle</option>
<option value="two" id="triangle">Triangle</option>
<option value="three" id="circle">Circle</option>
</select>
<div id="wrapperOne"><h1>This is Wrapper ONE</h1></div>
<div id="wrapperTwo"><h1>This is Wrapper TWO</h1></div>
<div id="wrapperThree"><h1>This is Wrapper THREE</h1></div>
If you are willing to use jQuery i would suggest this:
$('#dropDown').on('change', function(e){
var selectedOption = $(this).find(':selected');
if (selectedOption.attr('data-id') != null) {
$('.wrapper:not(#' + selectedOption.attr('data-id') + ')').hide();
$('#' + selectedOption.attr('data-id')).show();
} else {
$('.wrapper:not(:hidden)').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropDown">
<option value="default" selected="selected"> Please select shape </option>
<option data-id="wrapperOne" value="one" id="rectangle">Rectangle</option>
<option data-id="wrapperTwo" value="two" id="triangle">Triangle</option>
<option data-id="wrapperThree" value="three" id="circle">Circle</option>
</select>
<div id="wrapperOne" class="wrapper" style="display: none;">One</div>
<div id="wrapperTwo" class="wrapper" style="display: none;">Two</div>
<div id="wrapperThree" class="wrapper" style="display: none;">Three</div>
With best regards,
John
i am very confused why is this it doesn't show my div. This is just a simple idea, i have two divs which is :
<div id="custom-report">
</div>
<div id="daily-report">
</div>
now, i have a select which select when i want to hide or show them:
<select class="form-control" id="selectedrep">
<option value="0">--- SELECT OPTION ---</option>
<option value="1">Daily</option>
<option value="2">Custom</option>
</select>
and i am doing my javascript like this:
$('#selectedrep').change(function(){
var selectedReport = $(this).val();
if(selectedReport == 1) {
document.getElementById('daily-report').style.display = "block";
document.getElementById('custom-report').style.display = '';
alert("daily");
}
if(selectedReport == 2) {
document.getElementById('custom-report').style.display = "block";
document.getElementById('daily-report').style.display = '';
alert('custom');
}
else {
document.getElementById('custom-report').style.display = "none";
document.getElementById('daily-report').style.display = "none";
}
});
and also first, i will hide them all with my css with this:
#custom-report {
display: none;
}
#daily-report {
display: none;
}
why is it, when i go navigate to daily, it will show, and just vanished. and if i go navigate for custom, it will show my div correctly.
In your second condition, you should have else if instead of if
Else condition is only considered when second if condition fails, not every time. if....else if...else flow would solve this problem.
$('#selectedrep').change(function() {
var selectedReport = $(this).val();
if (selectedReport == 1) {
document.getElementById('daily-report').style.display = "block";
document.getElementById('custom-report').style.display = '';
} else if (selectedReport == 2) {
document.getElementById('custom-report').style.display = "block";
document.getElementById('daily-report').style.display = '';
} else {
document.getElementById('custom-report').style.display = "none";
document.getElementById('daily-report').style.display = "none";
}
});
#custom-report {
display: none;
}
#daily-report {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="custom-report">
CUSTOM
</div>
<div id="daily-report">
DAILY
</div>
<select class="form-control" id="selectedrep">
<option value="0">--- SELECT OPTION ---</option>
<option value="1">Daily</option>
<option value="2">Custom</option>
</select>
Simplified code -
$('#selectedrep').change(function() {
var selectedReport = this.value;
document.getElementById('custom-report').style.display = "none";
document.getElementById('daily-report').style.display = "none";
if (selectedReport == 1) {
document.getElementById('daily-report').style.display = "block";
} else if (selectedReport == 2) {
document.getElementById('custom-report').style.display = "block";
}
});
#custom-report {
display: none;
}
#daily-report {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="custom-report">
CUSTOM
</div>
<div id="daily-report">
DAILY
</div>
<select class="form-control" id="selectedrep">
<option value="0">--- SELECT OPTION ---</option>
<option value="1">Daily</option>
<option value="2">Custom</option>
</select>
Using jQuery(No need to have css) -
$('#selectedrep').change(function() {
var selectedReport = this.value;
var custom = $('#custom-report');
var daily = $('#daily-report');
custom.add(daily).hide()
if (selectedReport == 1) {
daily.show();
} else if (selectedReport == 2) {
custom.show();
}
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="custom-report">
CUSTOM
</div>
<div id="daily-report">
DAILY
</div>
<select class="form-control" id="selectedrep">
<option value="0">--- SELECT OPTION ---</option>
<option value="1">Daily</option>
<option value="2">Custom</option>
</select>
You have done mistake in if else. In your second condition you have to use if else instead of only if. Please follow below code::
$('#selectedrep').change(function(){
var selectedReport = $(this).val();
if(selectedReport == 1) {
document.getElementById('daily-report').style.display = "block";
document.getElementById('custom-report').style.display = '';
alert("daily");
}
else if(selectedReport == 2) {
document.getElementById('custom-report').style.display = "block";
document.getElementById('daily-report').style.display = '';
alert('custom');
}
else {
document.getElementById('custom-report').style.display = "none";
document.getElementById('daily-report').style.display = "none";
}
});
#custom-report {
display: none;
}
#daily-report {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="custom-report">
Custom Report
</div>
<div id="daily-report">
Daily Report
</div>
<select class="form-control" id="selectedrep">
<option value="0">--- SELECT OPTION ---</option>
<option value="1">Daily</option>
<option value="2">Custom</option>
</select>
Also just one thing As you are using jQuery onchange event you can use jQuery for hide and show. Please follow working jsfiddle link:: link
Why cant you add "else" infront of IF statement, this may be your problem.
$('#selectedrep').change(function(){
var selectedReport = $(this).val();
if(selectedReport == 1) {
document.getElementById('custom-report').style.display = 'none';
document.getElementById('daily-report').style.display = "block";
alert("daily");
}
else if(selectedReport == 2) {
document.getElementById('daily-report').style.display = 'none';
document.getElementById('custom-report').style.display = "block";
alert('custom');
}
else {
document.getElementById('custom-report').style.display = "none";
document.getElementById('daily-report').style.display = "none";
}
});
$("#selectdrep").on("click",function(){
var selectedvalue = $(this).val();
if(selectedvalue == "1"){
document.getElementById("custom-report").style.display = "block";
document.getElementById("daily-report").style.display = "none";
}else if(selectedvalue == "2"){
document.getElementById("daily-report").style.display = "block";
document.getElementById("custom-report").style.display = "none";
}else{
document.getElementById("custom-report").style.display = "none";
document.getElementById("daily-report").style.display = "none";
}
})
Or you could get rid of the if..else altogether:
$("#selectdrep").on("click",function(){
var selectedvalue = $(this).val();
document.getElementById("custom-report").style.display = selectvalue == 1 ? "block" : "none";
document.getElementById("daily-report").style.display = selectvalue == 2 ? "block" : "none";
})
In your second condition, you should have else if instead of if
Complete jQuery solution based on the fact you have $('#selectedrep').change() as your function.
$('#selectedrep').change(function() {
var selectedReport = $(this).val();
if (selectedReport == 1) {
$('#daily-report').show();
$('#custom-report').hide();
} else if (selectedReport == 2) {
$('#custom-report').show();
$('#daily-report').hide();
} else {
$('#custom-report').hide();
$('#daily-report').hide();
}
});
I have the following code that allows me to display the number of models I have in my database. Each model details are tagged with a href button for the user to select.
1) Once the user clicked on the href button, the button's text will be changed to "selected".
2) If the user clicked on the button showing "selected", the button's text will be changed to "select".
<div class="row text-center">
<?php
while($rowModelList=mysql_fetch_array($resultModelList))
{
?>
<div class="col-md-3 col-sm-6 hero-feature">
<div class="thumbnail">
<img src="Images/Models/<? echo $rowModelList['modelImage'];?>" alt="" style="height: 200px;">
<div class="caption">
<h4><?php echo $rowModelList['modelName']?></h4>
<p>
Select
</p>
</div>
</div>
</div>
<?php
}
?>
</div>
I have the following code that allows me to change the colour and text of the href button when clicked.
/* Changing the colour of the href button upon clicked */
function changecolor(element) {
alert(element.target.id);
if (element.innerHTML == "Select") {
element.innerHTML = "Selected";
element.style.backgroundColor = "#C0C0C0"; /*Grey*/
element.style.borderColor = "#C0C0C0";
alert(element);
} else {
element.innerHTML = "Select";
element.style.backgroundColor = "#FED136"; /*Yellow*/
element.style.borderColor = "#FED136";
alert(element);
}
return false;
}
However, I am trying to restrict the number of buttons to be selected by the user.
For example, a list of 20 models is shown to the user but they are only allowed to select 8 of the model. Once 8 of the button's text are shown to be "selected", they will need to deselect one of the selected button in order to make new selection.
Any idea how I can modify the code to achieve it?
Thanks in advance
simply count selected options in your function:
var selectedCount = 0; // global variable
function changecolor(element) {
alert(element.target.id);
if(selectedCount > 8)
{
alert("already selected 8 options");
return false;
}
if (element.innerHTML == "Select") {
element.innerHTML = "Selected";
selected++;
element.style.backgroundColor = "#C0C0C0"; /*Grey*/
element.style.borderColor = "#C0C0C0";
alert(element);
} else {
element.innerHTML = "Select";
element.style.backgroundColor = "#FED136"; /*Yellow*/
element.style.borderColor = "#FED136";
selected--;
alert(element);
}
return false;
}
But its a lot easier if you use class for each element. Less code, and more control. Add class "selected" if element is checked, and remove it if unchecked. You dont need to style it in your javascript code.
jQuery example with class usage:
jQuery(document).ready(function(){
jQuery('.option').click(function(){
if(jQuery(this).hasClass('selected'))
{
// mark as unchecked
jQuery(this).html('not selected');
jQuery(this).removeClass('selected');
}
else
{
// mark as checked
if(jQuery('.selected').length >= 2) // check limit
{
alert('to many selected');
return false
}
jQuery(this).html('selected');
jQuery(this).addClass('selected');
}
return false;
});
});
Just create a variable that tracks how many are selected
/* Changing the colour of the href button upon clicked */
var selectedCount = 0;
function changecolor(element) {
if (selectedCount >=8 ) {
return;
}
if (element.innerHTML == "Select") {
selectedCount++;
element.innerHTML = "Selected";
element.style.backgroundColor = "#C0C0C0"; /*Grey*/
element.style.borderColor = "#C0C0C0";
alert(element);
} else {
selectedCount--;
element.innerHTML = "Select";
element.style.backgroundColor = "#FED136"; /*Yellow*/
element.style.borderColor = "#FED136";
alert(element);
}
return false;
}
You should avoid a global variable and you can do so using a closure/module pattern.
/* Changing the colour of the href button upon clicked */
var changecolor = (function(){
var selectedCount = 0;
function(element) {
if (selectedCount >=8 ) {
return;
}
if (element.innerHTML == "Select") {
selectedCount++;
element.innerHTML = "Selected";
element.style.backgroundColor = "#C0C0C0"; /*Grey*/
element.style.borderColor = "#C0C0C0";
alert(element);
} else {
selectedCount--;
element.innerHTML = "Select";
element.style.backgroundColor = "#FED136"; /*Yellow*/
element.style.borderColor = "#FED136";
alert(element);
}
return false;
}
})();