I would like to know how you could add a help symbol beside a disabled option in a dropdown in html, if possible. I would like it so that when you click on the symbol it then tells you why that option has been disabled. Something similar to the dropdown below.
This is the basic code I have for the dropdown right now.
<select name="description" rows="4" class="form-control">
<option value="RhinoTab"><?php echo _l('estimate_table_option1_1'); ?></option>
<option value="RTi"><?php echo _l('estimate_table_option1_2'); ?></option>
<option value="Magical Shit" disabled>Magical Shit</option>
</select>
I ended up finding an example I was able to use as a work around to get my project working. Instead of having an icon it is when you click on the "disabled" option but it will do something close enough to what I was looking for.
$(function(){
var options_sel_idx = 0;
$("#options").on("change", this, function(event) {
if($(this.options[this.selectedIndex]).hasClass("disabled")) {
alert("a");
this.selectedIndex = options_sel_idx;
} else {
options_sel_idx = this.selectedIndex;
}
});
});
<style type="text/css">
.disabled {color:#808080;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="options" id="options">
<option value="">Select</option>
<option value="1">Options 1</option>
<option value="0" class="disabled">Options 2</option>
<option value="0" class="disabled">Options 3</option>
<option value="0" class="disabled">Options 4</option>
</select>
Related
I would like to add an option in my drop down menu that unset or destroys the session $_SESSION['selected_opt].
Practice code:
<form class="search-form">
<select name="thema" class="selectpicker">
<option value="t1" class="special">Select something</option>
<optgroup label="Select...">
<option value="s1" data-icon="glyphicon-sort-by-alphabet" class="special">Selection 1</option>
<option value="s1" data-icon="glyphicon-sort-by-alphabet" class="special">Selection 2</option>
<option value="s1" data-icon="glyphicon-sort-by-alphabet" class="special">Selection 3</option>
<option value="s4" data-icon="glyphicon-sort-by-alphabet" class="special">Selection 1</option>
</optgroup>
</select>
</form>
I've seen some code's like this around:
<option value="black" <?php if(isset($_SESSION['kategorie']) == "black") { echo ' selected';} ?>>Black and white</option>
So I've put something like that in the code:
<option value="t1" <?php if($_SESSION['selected_opt']) { unset($_SESSION['selected_opt']);} ?> class="class_opt">Select something</option>
But of course this didn't work. Is this at all possible or should I use something like jQuery? I could find a suitable answer anywhere... I hope someone can help...
You can do something like:
<select name="thema" class="selectpicker" change='selectChanged(this);'>
and create the function:
<script>
function selectChanged(obj){
if($(obj).val() == "LogOut"){
//redirect to your session clearing / log out page
window.location.href = 'http://example.com/LogOut.php''
};
});
</script>
and your option will be:
<option value="LogOut">Log Out</option>
I have a dropdown where the values are fetched from the database,
now, when the last option which is the " ADD ELEMENTARY SCHOOL" is selected, I want the dropdown to be hidden and an input text will replace the dropdown that will let the user enter a not existing data like this one. Thanks
This is my html code.
<select id="elemschool" class="form-control">
<?php
$select=$dbcon->query("Select * from elem_school");
while ($row=$select->fetch_array()) {
?>
<option value="<?php echo $row['Elem_ID']?>">
<?php echo $row['School_Name']?>
</option>
<?php
}
?>
<option style="background-color: #77A5F8" class="addelem" value="addelementary">- ADD ELEMENTARY SCHOOL -</option>
</select>
<input type="text" class="form-control hidden" name="elem_school" id="elem_school" placeholder="NAME OF SCHOOL">
</div>
First of all please provide us with a snippet of the existing code so we can change it to a working one and secondly what if someone want to select the
MANAOLO FORTICH CENTRAL ELEMENTARY SCHOOL
and selected the
ADD ELEMENTARY SCHOOL option
how would you allow the user to select another option if its not there
What I would recommend is to show/hide or disable/enable the input box depending on what user select from the list
<html>
<head>
</head>
<body>
<select name='school' onchange="newSchool(this.value)">
<option value="">Select a school</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<input type="text" id="input" disabled />
<script>
function newSchool(schoolName) {
if (schoolName == 3) {
document.getElementById("input").disabled = false;
} else {
document.getElementById("input").disabled = true;
}
}
</script>
</body>
</html>
If you want to hide it as well as disabling it
<html>
<head>
</head>
<body>
<select name='school' onchange="newSchool(this.value)">
<option value="">Select a school</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<input type="text" id="input" disabled />
<script>
document.getElementById("input").hidden = true;
function newSchool(schoolName) {
if (schoolName == 3) {
document.getElementById("input").hidden = false;
document.getElementById("input").disabled = false;
} else {
document.getElementById("input").hidden = true;
document.getElementById("input").disabled = true;
}
}
</script>
</body>
</html>
prepare two DOM element. A visible select element and a hidden input element.
bind a change event to select element, and check if the value equal to the value of item named "add elementary school", and then hidden the select element and show the input element.
I don't want it as a label.
Something like this:
But this 'value' should go away as soon as I click on it once and the actual values should start showing.
$('select').change(function() {
if ($(this).children('option:first-child').is(':selected')) {
$(this).addClass('ddplaceholder');
} else {
$(this).removeClass('ddplaceholder');
}
});
.ddplaceholder{color: grey;}
select option:first-child{color: grey; display: none;}
select option{color: #555;} // bootstrap default color
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select class="form-control ddplaceholder">
<option value="">Type your own text</option>
<option value="1">example 1</option>
<option value="2">example 2</option>
<option value="3">example 3</option>
</select>
</form>
You need to add some jQuery/See the above example.This is what you want.
You can use script in addition to this. You can use remove first child on mouse hover using jquery.
You can disable and pre select the default value. Then when user clicks cant re select this option.
<option selected="true" disabled="disabled">
Just create empty option's
<option value="" disabled selected>Select Category</option>
<option value="" disabled selected>Select Item</option>
<option value="" disabled selected>Select Vencdor</option>
I want to display a number of textboxes in a form based on the selected option from a dropdown listbox.
For example, if user selects 1 then 1 textbox should be shown and if user selects 2 then 2 textboxes should be displayed. And I need to do it in PHP.
I found some answers using jQuery. Can we use jQuery inside PHP? If yes, then how?
Edit
#Edwin Alex
This is how my select option looks like.
<h2><u>DEPENDENT DETAILS</u></h2><br />
<table border="1" style="border-style:dotted" width="100%" id="dependenttable">
<tr><td>No of Dependent</td><td><select name="numDep" id="dropdown">
<option value="">Please Select</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option></select></td></tr>
<tr id="textboxDiv"></tr>
At the end of file inside <> these I have written your code.
You can use Jquery to get this. Try this,
HTML :
<tr><td>No of Dependent</td><td><select name="numDep" id="dropdown">
<option value="">Please Select</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option></select></td>
</tr>
<tr id="textboxDiv"></tr>
Jquery :
<script type="text/javascript">
$(document).ready(function() {
$("#dropdown").change(function() {
var selVal = $(this).val();
$("#textboxDiv").html('');
if(selVal > 0) {
for(var i = 1; i<= selVal; i++) {
$("#textboxDiv").append('<input type="text" name="textVal[]" value="" />');
}
}
});
});
</script>
Paste this code at the bottom of your page inside tag.
Your select box ID should be dropdown.
You need to have a div with an ID textboxDiv to place your generated textboxes.
I think you can do it easily with the help of JavaScript. Here is an example of it. Try it and modify it according to your requirement
<html>
<head>
<title>Select DIV to show</title>
<script type="text/javascript">
function show(obj) {
no = obj.options[obj.selectedIndex].value;
count = obj.options.length;
for(i=1;i<count;i++)
document.getElementById('myDiv'+i).style.display = 'none';
if(no>0)
document.getElementById('myDiv'+no).style.display = 'block';
}
</script>
</head>
<body>
<form name="myForm">
<select onChange="show(this)">
<option value="0">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</form>
<div id="myDiv1" style="display:none"> <form>
<select>
<option value="0">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</form></div>
<div id="myDiv2" style="display:none"><form><input type="text" ><br>
<input type="text"/><br>
<input type="submit"/></form></div>
<div id="myDiv3" style="display:none"><form><input type="text" ><br>
<input type="text"/><br>
<input type="submit"/></form></div>
</body>
</html>
In this example just change the code in "myDiv1", "myDiv2", "myDiv3". I think it will hep you.:)
I have a html form defined . I have a button for the user to select his occupation . If his occupation happens to be a student then i need to generate another new button dynamically . If the user selects anything other than a student then i dont want any new button . I am unsure how to do . Do i use jquery ? I have no idea to use jquery . Can some one help ? Any pointers
Thanks.
<?php
?>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$('#occupation').change(function()
{
if($(this).val() == 'Student')
{
$('#school').show();
} else {
$('#school').hide();
}
});
});
</script>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<form>
<select name="occupation" id="occupation">
<option value="">- Select Occupation -</option>
<option value="Worker">Worker</option>
<option value="Student">Student</option>
</select>
<select name="school" id="school" style="display: none;">
<option value="">Select School Type</option>
<option value="4 Year">4 Year</option>
<option value="2 Year">2 Year</option>
</select>
</form>
</body>
</html>
Personally I accomplish this by placing the additional form element in the HTML, simply hidden like so:
<select name="occupation" id="occupation">
<option value="">- Select Occupation -</option>
<option value="Worker">Worker</option>
<option value="Student">Student</option>
</select>
<select name="school" id="school" style="display: none;">
<option value="">Select School Type</option>
<option value="4 Year">4 Year</option>
<option value="2 Year">2 Year</option>
</select>
Then you can use JS, as I prefer jQuery, to show the div or hide the div when applicable:
$(document).ready(function()
{
$('#occupation').change(function()
{
if($(this).val() == 'Student')
{
$('#school').show();
} else {
$('#school').hide();
}
});
});
Using jQuery would simplify this:
Let's say you have the following:
<form>
<select name="occupation">
<option value="Non-Student">Non-Student</option>
<option value="Student">Student</option>
</select>
</form>
Then the following would be used to append the button if the user selected 'Student':
$(function(){
$('select[name="occupation"]').change(function(){
var val = $(this).val();
if(val=='Student'){
$('form').append('<button>New Button</button>');
}
});
});