i want to know how can we select more than one option from a select box like given below:
<label for="color">Colors</label>
<select class="inputbox" name="color" id="color" style="width:180px;">
<option value="Black">Black</option>
<option value="White">White</option>
<option value="Tan">Tan</option>
<option value="Navy">Navy</option>
<option value="RoyalBlue">Royal Blue</option>
<option value="Red">Red</option>
<option value="Yellow">Yellow</option>
<option value="Hunter(DarkGreen)">Hunter(Dark Green)</option>
<option value="Kelly(Green)">Kelly(Green)</option>
<option value="Burgundy">Burgundy</option>
</select>
Thanks
All you have to do is use the multiple attribute on the select box.
<select name="some-select" id="some-select" multiple="multiple">
<option>Black</option>
<option>White</option>
<option>Other</option>
</select>
inorder to use multiple values for a named parameter in $_GET/$_POST/$_REQUEST arrays in PHP, you have to name your form field like this:
name="myFieldName[]";
by puting the braces at the end of the name of the field, PHP will be able to store multiple values for that paramter. if you are using multiple checkboxes, or multiple selects, you should name your fields like this.
and don't forget the values for HTML option tags.
in your case, the HTML should be like this:
<select name="some-select[]" id="some-select" multiple="multiple">
<option value="balck">Black</option>
<option value="white">White</option>
<option value="other">Other</option>
</select>
your PHP code that is the action of the form can have the data like this.
$mySelectValues = $_REQUEST['some-select'];
// mySelectValues is an array now
foreach ($mySelectValues as $selected) {
echo $selected;
}
when you are viewing your HTML page, you can select multiple options by holding the Ctrl key and then selecting other options.
Ordinarily an HTML form will allow you to Ctrl-Click multiple options from a combo box, if you use the "multiple" option in the tag.You can also use "Shift-Click" for a range of values.
But the interesting question is how can you implement this so that more than 10% (estimated) of users can figure out how to use it?
I was late here but will try post my answer. may not be the best.
Add multiple attribute to the select and change name="color" to an array like name="color[]"
<label for="color">Colors</label>
<select class="inputbox" name="color[]" id="color" style="width:180px;" multiple>
<option value="Black">Black</option>
<option value="White">White</option>
<option value="Tan">Tan</option>
<option value="Navy">Navy</option>
<option value="RoyalBlue">Royal Blue</option>
<option value="Red">Red</option>
<option value="Yellow">Yellow</option>
<option value="Hunter(DarkGreen)">Hunter(Dark Green)</option>
<option value="Kelly(Green)">Kelly(Green)</option>
<option value="Burgundy">Burgundy</option>
</select>
and php could do something like this
foreach ($_POST['color'] as $selectedColor)
echo $selectedColor."\n";
//and this echos a comma separated string
$colorString=implode(",", $_POST['color']);
echo $colorString;
How to select multiple items? CTRL+Click the Options.
I've had this same problem, and the guys at htmlforums managed to come up with a way.
Heres the forum link:
http://www.htmlforums.com/client-side-scripting/t-select-multiple-items-without-ctrl-117760.html
And heres the answer: (i havn't had time to adapt it to your code, sorry)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Select Test</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript">
// Variables we need
var previous = new Array();
var lastClicked = '';
// We are going to attach event listeners, no code at the bottom or anything hard coded...
function addEvent(obj, evType, fn)
{
if(obj.addEventListener)
{
obj.addEventListener(evType, fn, false);
return true;
}
else if(obj.attachEvent)
{
var r = obj.attachEvent('on' + evType, fn);
return r;
}
else
{
return false;
}
}
// Let's begin when the DOM is ready
addEvent(window, 'load', begin);
// Attach the handlers to our selects
function begin()
{
addSelect('numbers');
addSelect('sm');
addSelect('sm2');
}
// We add a couple of handlers to each
function addSelect(id)
{
var sel = document.getElementById(id);
addEvent(sel, 'click', whichElement);
addEvent(sel, 'click', addRemoveClicked);
}
// Find which element we are looking at on this click
function whichElement(e)
{
if(!e)
{
var e = window.event;
}
if(e.target)
{
lastClicked = e.target;
}
else if(e.srcElement)
{
lastClicked = e.srcElement;
}
if(lastClicked.nodeType == 3) // Safari bug
{
lastClicked = lastClicked.parentNode;
}
}
// Make sure we are displaying the correct items
function addRemoveClicked(e)
{
if(!previous[this.id])
{
previous[this.id] = new Array();
}
// Remember what has been used
if(previous[this.id][lastClicked.value] == 1)
{
previous[this.id][lastClicked.value] = 0;
}
else
{
previous[this.id][lastClicked.value] = 1;
}
var selectBox = document.getElementById(this.id);
// Add correct highlighting
for(var i = 0; i < selectBox.options.length; i++)
{
selectBox.options[i].selected = '';
if(previous[this.id][selectBox.options[i].value] == 1)
{
selectBox.options[i].selected = 'selected';
}
}
}
</script>
</head>
<body>
<form name="selectTest" action="">
<select name="numbers" id="numbers" multiple="multiple" size="6">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select name="sm" id="sm" multiple="multiple" size="6">
<option value="a">To make</option>
<option value="b">Multiple</option>
<option value="c">Selections</option>
<option value="d">Just Click</option>
<option value="e">With The</option>
<option value="f">Mouse</option>
</select>
<select name="sm2" id="sm2" multiple="multiple" size="6">
<option>Everything</option>
<option>Is</option>
<option>Possible</option>
<option>Until</option>
<option>Proven</option>
<option>Otherwise</option>
</select>
</form>
</body>
</html>
I hope this helps.
Thanks,
Matthew Millar
Related
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>
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 have a form in which I have a list of Indian States and Cities. On selecting one of the states, the cities from that state are to be displayed in the <select> to show cities. I am using a php script hosted somewhere (a similar website) and I think that it can solve my purpose. The script takes the value of State options as parameter and returns a <select> with the corresponding cities.
The script is http://www.indane.co.in/state.php?stateid=2196 where 2196 is the ID/value of the selected state.
I need to display contents of this in my cities' .
Please suggest me how can I do this.
So far I have tried this,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
function showcat(id,ss,type)
{
var cid=id.value;
if(type=='state')
{
document.getElementById("state_loading").style.visibility="visible";
var response = httpGet("http://www.indane.co.in/state.php?stateid="+cid);
var id=document.getElementById('bgcity');
id.innerHTML=response;
}
}
function httpGet(theUrl)
{
var xHRObject = new XMLHttpRequest();
var url = theUrl;
xHRObject.open("GET", url, true);
xHRObject.send();
xHRObject.onreadystatechange = function () {
if (xHRObject.readyState==4 && xHRObject.status==200) {
var response = xHRObject.responseText;
return response;
}
}
}
</script>
</head>
<body>
<select name="bgstate" id="bgstate" style="width:200px" onChange="showcat(this,'sub1','state');">
<option value="">[ SELECT STATE ]</option>
<option value="2169" >Andhra Pradesh</option>
<option value="2196" >Arunachal Pradesh</option>
<option value="2170" >Assam</option>
<option value="2171" >Bihar</option>
<option value="5267" >Chhattisgarh</option>
<option value="2174" >Delhi</option>
<option value="2199" >Goa</option>
<option value="2175" >Gujarat</option>
<option value="2176" >Haryana</option>
<option value="2177" >Himachal Pradesh</option>
<option value="2178" >Jammu and Kashmir</option>
<option value="5268" >Jharkhand</option>
<option value="2185" >Karnataka</option>
<option value="2179" >Kerala</option>
<option value="2181" >Madhya Pradesh</option>
<option value="2182" >Maharashtra</option>
<option value="2183" >Manipur</option>
<option value="2184" >Meghalaya</option>
<option value="2197" >Mizoram</option>
<option value="2186" >Nagaland</option>
<option value="2187" >Orissa</option>
<option value="2189" >Punjab</option>
<option value="2190" >Rajasthan</option>
<option value="2195" >Sikkim</option>
<option value="2191" >Tamil Nadu</option>
<option value="2192" >Tripura</option>
<option value="5269" >UNION TERRITORY</option>
<option value="2193" >Uttar Pradesh</option>
<option value="5259" >Uttaranchal</option>
<option value="2194" >West Bengal</option>
</select>
<span id="state_loading" style="visibility:hidden;"><img src="http://www.indane.co.in/images/ajax_small_load.gif" /></span>
</td>
</tr>
<br/>
<tr valign="top">
<td> </td>
<td height="25" >City <span class="error">*</span></td>
<td colspan="2">
<span id="sub1">
<select name="bgcity" style="width:200px" id="bgcity" >
<option value="">[SELECT CITY]</option>
</select>
</span>
<span id="city_loading" style="visibility:hidden;"><img src="http://www.indane.co.in/images/ajax_small_load.gif" /></span>
<input type="button" value="Search" onClick="showcat(document.getElementById('bgcity'),'sub2','city');" style="cursor:pointer;" />
</tr>
</body>
</html>
Problem 1-The problem is the URL for city dropdown is returning a selectbox and you are replacing the options of the selectbox in your page with another selectbox
Another problem is access-control-allow-origin header.
Replace the city drop down in your page with the following
<span id="bgcity">
<select name="bgcity" style="width:200px" >
<option value="">[SELECT CITY]</option>
</select>
</span>
Change your showcat as
function showcat(id,ss,type)
{
var cid=id.value;
if(type=='state')
{
document.getElementById("state_loading").style.visibility="visible";
var response = httpGet("http://www.indane.co.in/state.php?stateid="+cid);
if(response !== undefined)
{
var id=document.getElementById('bgcity');
id.innerHTML=response;
}
}
}
I have removed the id associated with the select box to the span so that it replaces the whole drop down..and remove the second parameter in your showcat function as this change will give error...
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>');
}
});
});