|
JavaScript - Chained Select Mysql
Hi!
I'm using this javascript and php/MySQL: http://www.dynamicdrive.com/dynamici...ects/index.htm When I make a selection in all 3 lists I have a button that saves the selections in my MySQL database, like this: set1, Toyota, Cars, Camry Then I want to be able to select set1 in a list and press an "Edit" button that retrieves these 3 selections and auto selects them in the list. How is this possible? Thanks in advance Vigour Similar TutorialsHi I wanna to have two select boxes, one of them will contain a list of provinces, and on the other I wanna have a list of cities, but based on selected province. When province selects, cities select box must be changed, too. I don't wanna use AJAX for this purpose, as the server is already too busy and I don't like to disturb it more. So if anyone can provide a solution, just by Javascript and not with AJAX, I would be appreciate it. Cheers! Hi I found this code from here http://www.dynamicdrive.com/forums/s...ad.php?t=35776 And cant seem to get it to work. I want to show 2 drop downs and then a hidden div with the answer. Code: <!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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="scripts/chainedmenu.js"></script>
<script type="text/javascript" src="scripts/config2.js"></script>
<script type="text/javascript">
window.onload=function(){
var lastDiv = "";
document.getElementById('secondlevel').onchange=function(){
if (lastDiv)
document.getElementById(lastDiv).className = "hiddenDiv";
//if value of the box is not nothing and an object with that name exists, then change the class
if (this.value && document.getElementById(this.value)) {
document.getElementById(this.value).className = "visibleDiv";
lastDiv = this.value;}}}
</script>
<style type="text/css">
.hiddenDiv {
display:none;
}
</style>
</head>
<body onLoad="initListGroup('chainedmenu', document.listmenu0.firstlevel, document.listmenu0.secondlevel, 'saveit'); ">
<form name="listmenu0">
<div class="black1 bold">1. Select Product Range</div>
<div class="selects"><select name="firstlevel" style="width:250px;"></select></div>
<div class="black1 bold">2. Select Product Code</div>
<div class="selects"><select id="secondlevel" name="secondlevel" onchange="showDiv(this.value)" style="width:250px;"></select></div>
</form>
<div id="storesContent">
<div id="one" class="hiddenDiv">DIV1</div>
<div id="two" class="hiddenDiv">DIV2</div>
<div id="three" class="hiddenDiv">DIV3</div>
</div>
</body>
</html>
many thanks Roy Hello to all and thank you for any help beforehand. I have an issue with the script below, Select the top dropdown and the second gets populated, this is a nice piece of script, the only problem is that when the information is posted and presented on the process page I click page back to the form to rectify some other field but the ajax resets so I have to select Country & City each time even if thease fields are correct. I know that back button as well as bookmark is a problem with ajax but i think there is a solution the only thing is I don't know how to apply it to this script. Source of the script: http://www.dhtmlgoodies.com/index.ht...chained_select Ajax file: http://www.dhtmlgoodies.com/AJAX/ajax.js test.html Code: <!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" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
var ajax = new Array();
function getCityList(sel)
{
var countryCode = sel.options[sel.selectedIndex].value;
document.getElementById('dhtmlgoodies_city').options.length = 0; // Empty city select box
if(countryCode.length>0){
var index = ajax.length;
ajax[index] = new sack();
ajax[index].requestFile = 'getCities.php?countryCode='+countryCode; // Specifying which file to get
ajax[index].onCompletion = function(){ createCities(index) }; // Specify function that will be executed after file has been found
ajax[index].runAJAX(); // Execute AJAX function
}
}
function createCities(index)
{
var obj = document.getElementById('dhtmlgoodies_city');
eval(ajax[index].response); // Executing the response from Ajax as Javascript code
}
function getSubCategoryList(sel)
{
var category = sel.options[sel.selectedIndex].value;
document.getElementById('dhtmlgoodies_subcategory').options.length = 0; // Empty city select box
if(category.length>0){
var index = ajax.length;
ajax[index] = new sack();
ajax[index].requestFile = 'getSubCategories.php?category='+category; // Specifying which file to get
ajax[index].onCompletion = function(){ createSubCategories(index) }; // Specify function that will be executed after file has been found
ajax[index].runAJAX(); // Execute AJAX function
}
}
function createSubCategories(index)
{
var obj = document.getElementById('dhtmlgoodies_subcategory');
eval(ajax[index].response); // Executing the response from Ajax as Javascript code
}
</script>
</head>
<body>
<form action="" method="post">
<table>
<tr>
<td>Country: </td>
<td><select id="dhtmlgoodies_country" name="dhtmlgoodies_country" onchange="getCityList(this)">
<option value="">Select a country</option>
<option value="dk">Denmark</option>
<option value="no">Norway</option>
<option value="us">US</option>
</select>
</td>
</tr>
<tr>
<td>City: </td>
<td><select id="dhtmlgoodies_city" name="dhtmlgoodies_city">
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
Here's the content of getCities.php Code: <?php
if(isset($_GET['countryCode'])){
switch($_GET['countryCode']){
case "no":
echo "obj.options[obj.options.length] = new Option('Bergen','1');\n";
echo "obj.options[obj.options.length] = new Option('Haugesund','2');\n";
echo "obj.options[obj.options.length] = new Option('Oslo','3');\n";
echo "obj.options[obj.options.length] = new Option('Stavanger','4');\n";
break;
case "dk":
echo "obj.options[obj.options.length] = new Option('Aalborg','11');\n";
echo "obj.options[obj.options.length] = new Option('Copenhagen','12');\n";
echo "obj.options[obj.options.length] = new Option('Odense','13');\n";
break;
case "us":
echo "obj.options[obj.options.length] = new Option('Atlanta','21');\n";
echo "obj.options[obj.options.length] = new Option('Chicago','22');\n";
echo "obj.options[obj.options.length] = new Option('Denver','23');\n";
echo "obj.options[obj.options.length] = new Option('Los Angeles','24');\n";
echo "obj.options[obj.options.length] = new Option('New York','25');\n";
echo "obj.options[obj.options.length] = new Option('San Fransisco','26');\n";
echo "obj.options[obj.options.length] = new Option('Seattle','27');\n";
break;
}
}
?>
Hi there, I am new to Java Script but had to delve into it to create the options for a form I wish to create. I downloaded chainedseletmenu from the following; http://www.dynamicdrive.com/dynamici...menu/index.htm I have the script working, so that you select a first option and a new box appears, then you select the next option and an aditional box appears and so on... This is fine, but I wish to only make additional selection boxes appear if certain options from the drop down lists are selected, but not for others. Also, I wish for users of my forms to be able to add options that are not yet available, I will give an example, lets say cars; if a user selects a make from the list, eg "Honda", a drop down selection list apears, the user then has the option to choose the "Type" of Honda, eg "Prelude", "Civic", "NSR" etc. I would like to be able to add an additional here; = "Not listed". When the "Not listed" is clicked, I would like to give my users the choice to enter the type (in this example, it could be "CRX") into an auto-appearing text box, after form submission, this could then be added the existing selection list for future users. I am aware that this requires use of a database and conection to tit, but for a start, can anyone guide me in the right direction, or does anyone have examples of such code that I can study and get an idea of what to do? This is for a non-profit educational site that I am trying to create for my learners! So would apprieciate any help I can get! Kind regards, Luke hey just wondering if anyone could help me with a problem im having with this menu for a website i got a chained menu javascript downloaded and all the data entered for it it will work in firefox but wont in internet explorer and i just dont understand why http://www.jomcfall97.talktalk.net/index1.html its the menu on the right hand side this is the error message Message: Object doesn't support this property or method Line: 247 Char: 5 Code: 0 URI: http://www.jomcfall97.talktalk.net/chainedmenu.js Here are lines 244 - 248 function initListGroup(n) { var _content=cs_findContent(n), count=0; if (_content!=null) { content=new cs_contentOBJ("cs_"+n,_content.menu); cs_content[cs_content.length]=content; and heres the full chainedmenu.js Code: var _disable_empty_list=false;
var _hide_empty_list=false;
var onclickaction="alert"
function goListGroup(){
for (i=arguments.length-1;i>=0; i--){
if (arguments[i].selectedIndex!=-1){
var selectedOptionvalue=arguments[i].options[arguments[i].selectedIndex].value
if (selectedOptionvalue!=""){
if (onclickaction=="alert")
alert(selectedOptionvalue)
else if (newwindow==1)
window.open(selectedOptionvalue)
else
window.location=selectedOptionvalue
break
}
}
}
}
if (typeof(disable_empty_list)=="undefined") { disable_empty_list=_disable_empty_list; }
if (typeof(hide_empty_list)=="undefined") { hide_empty_list=_hide_empty_list; }
var cs_goodContent=true, cs_M="M", cs_L="L", cs_curTop=null, cs_curSub=null;
function cs_findOBJ(obj,n) {
for (var i=0; i<obj.length; i++) {
if (obj[i].name==n) { return obj[i]; }
}
return null;
}
function cs_findContent(n) { return cs_findOBJ(cs_content,n); }
function cs_findM(m,n) {
if (m.name==n) { return m; }
var sm=null;
for (var i=0; i<m.items.length; i++) {
if (m.items[i].type==cs_M) {
sm=cs_findM(m.items[i],n);
if (sm!=null) { break; }
}
}
return sm;
}
function cs_findMenu(n) { return (cs_curSub!=null && cs_curSub.name==n)?cs_curSub:cs_findM(cs_curTop,n); }
function cs_contentOBJ(n,obj){ this.name=n; this.menu=obj; this.lists=new Array(); this.cookie=""; }; cs_content=new Array();
function cs_topmenuOBJ(tm) { this.name=tm; this.items=new Array(); this.df=0; this.addM=cs_addM; this.addL=cs_addL; }
function cs_submenuOBJ(dis,link,sub) {
this.name=sub;
this.type=cs_M; this.dis=dis; this.link=link; this.df=0;
var x=cs_findMenu(sub);
this.items=x==null?new Array():x.items;
this.addM=cs_addM; this.addL=cs_addL;
}
function cs_linkOBJ(dis,link) { this.type=cs_L; this.dis=dis; this.link=link; }
function cs_addM(dis,link,sub) { this.items[this.items.length]=new cs_submenuOBJ(dis,link,sub); }
function cs_addL(dis,link) { this.items[this.items.length]=new cs_linkOBJ(dis,link); }
function cs_showMsg(msg) { window.status=msg; }
function cs_badContent(n) { cs_goodContent=false; cs_showMsg("["+n+"] Not Found."); }
function cs_optionOBJ(text,value) { this.text=text; this.value=value; }
function cs_emptyList(list) { for (var i=list.options.length-1; i>=0; i--) { list.options[i]=null; } }
function cs_refreshList(list,opt,df) {
cs_emptyList(list);
for (var i=0; i<opt.length; i++) {
list.options[i]=new Option(opt[i].text, opt[i].value);
}
if (opt.length>0) {
list.selectedIndex=df;
}
}
function cs_getOptions(menu) {
var opt=new Array();
for (var i=0; i<menu.items.length; i++) {
opt[i]=new cs_optionOBJ(menu.items[i].dis, menu.items[i].link);
}
return opt;
}
function cs_updateListGroup(content,idx,sidx,mode) {
var i=0, curItem=null, menu=content.menu;
while (i<idx) {
menu=menu.items[content.lists[i++].selectedIndex];
}
if (menu.items[sidx].type==cs_M && idx<content.lists.length-1) {
var df=cs_getIdx(mode,content.cookie,idx+1,menu.items[sidx].df);
cs_refreshList(content.lists[idx+1], cs_getOptions(menu.items[sidx]), df);
if (content.cookie) {
cs_setCookie(content.cookie+"_"+(idx+1),df);
}
if (idx+1<content.lists.length) {
if (disable_empty_list) {
content.lists[idx+1].disabled=false;
}
if (hide_empty_list) {
content.lists[idx+1].style.display="";
}
cs_updateListGroup(content,idx+1,df,mode);
}
}
else {
for (var s=idx+1; s<content.lists.length; s++) {
cs_emptyList(content.lists[s]);
if (disable_empty_list) {
content.lists[s].disabled=true;
}
if (hide_empty_list) {
content.lists[s].style.display="none";
}
if (content.cookie) {
cs_setCookie(content.cookie+"_"+s,"");
}
}
}
}
function cs_initListGroup(content,mode) {
var df=cs_getIdx(mode,content.cookie,0,content.menu.df);
cs_refreshList(content.lists[0], cs_getOptions(content.menu), df);
if (content.cookie) {
cs_setCookie(content.cookie+"_"+0,df);
}
cs_updateListGroup(content,0,df,mode);
}
function cs_updateList() {
var content=this.content;
for (var i=0; i<content.lists.length; i++) {
if (content.lists[i]==this) {
if (content.cookie) {
cs_setCookie(content.cookie+"_"+i,this.selectedIndex);
}
if (i<content.lists.length-1) {
cs_updateListGroup(content,i,this.selectedIndex,"");
}
}
}
}
function cs_getIdx(mode,name,idx,df) {
if (mode) {
var cs_idx=cs_getCookie(name+"_"+idx);
if (cs_idx!="") {
df=parseInt(cs_idx);
}
}
return df;
}
function _setCookie(name, value) {
document.cookie=name+"="+value;
}
function cs_setCookie(name, value) {
setTimeout("_setCookie('"+name+"','"+value+"')",0);
}
function cs_getCookie(name) {
var cookieRE=new RegExp(name+"=([^;]+)");
if (document.cookie.search(cookieRE)!=-1) {
return RegExp.$1;
}
else {
return "";
}
}
// ----
function addListGroup(n,tm) {
if (cs_goodContent) {
cs_curTop=new cs_topmenuOBJ(tm); cs_curSub=null;
var c=cs_findContent(n);
if (c==null) {
cs_content[cs_content.length]=new cs_contentOBJ(n,cs_curTop);
}
else {
delete(c.menu); c.menu=cs_curTop;
}
}
}
function addList(n,dis,link,sub,df) {
if (cs_goodContent) {
cs_curSub=cs_findMenu(n);
if (cs_curSub!=null) {
cs_curSub.addM(dis,link||"",sub);
if (typeof(df)!="undefined") { cs_curSub.df=cs_curSub.items.length-1; }
}
else {
cs_badContent(n);
}
}
}
function addOption(n,dis,link,df) {
if (cs_goodContent) {
cs_curSub=cs_findMenu(n);
if (cs_curSub!=null) {
cs_curSub.addL(dis,link||"");
if (typeof(df)!="undefined") { cs_curSub.df=cs_curSub.items.length-1; }
}
else {
cs_badContent(n);
}
}
}
function initListGroup(n) {
var _content=cs_findContent(n), count=0;
if (_content!=null) {
content=new cs_contentOBJ("cs_"+n,_content.menu);
cs_content[cs_content.length]=content;
for (var i=1; i<initListGroup.arguments.length; i++) {
if (typeof(arguments[i])=="object" && arguments[i].tagName && arguments[i].tagName=="SELECT") {
content.lists[count]=arguments[i];
arguments[i].onchange=cs_updateList;
arguments[i].content=content; arguments[i].idx=count++;
}
}
if (content.lists.length>0) {
cs_initListGroup(content,content.cookie);
}
}
}
function resetListGroup(n) {
var content=cs_findContent("cs_"+n);
if (content!=null && content.lists.length>0) {
cs_initListGroup(content,"");
}
}
any help appreciated as ive just come to a standstill over this thanks I am trying to create 2 different drop down menus which are chained. First drop down menu: options 1, 2, 3, and 4 Second drop down menu: options 1, 2, 3 and 4 However for the first drop down menu, if you choose the number then that number cannot be selected again on the second drop down menu. So if i pick 4 on the first drop down. then only 1, 2, and 3 should show up on the second drop down OR if you pick 4 on the second drop down it gives you an error saying you selected that value. Here is the complicated part that I cannot figure out. I want each drop down menus on two different pages and not on the same page. So after you select the submit button on the first drop down it should go to another page with the second drop down.. Has anyone seen this before. if you can give me some tips or show me how its done or even a webpage that has already implemented this i would appreciate it. Thank you! part of index page Code:
<form id="form1" name="form1" method="get" action="show.php">
<select id="mark" name="mark">
<option value="">--</option>
<option value="100">BMW</option>
<option value="101">Audi</option>
</select>
<select id="series" name="series">
<option value="">--</option>
<option value="1" class="100">1 series</option>
<option value="3" class="100">3 series</option>
<option value="5" class="100">5 series</option>
<option value="6" class="100">6 series</option>
<option value="7" class="100">7 series</option>
<option value="11" class="101">A1</option>
<option value="23" class="101">A3</option>
<option value="33" class="101">S3</option>
<option value="44" class="101">A4</option>
<option value="54" class="101">S4</option>
</select>
<button name="" type="submit" > Find! </button>
</p>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.chained.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("#series").chained("#mark");
});
</script>
js Code: (function($) {
$.fn.chained = function(parent_selector, options) {
return this.each(function() {
/* Save this to self because this changes when scope changes. */
var self = this;
var backup = $(self).clone();
/* Handles maximum two parents now. */
$(parent_selector).each(function() {
$(this).bind("change", function() {
$(self).html(backup.html());
var selected = "";
selected = selected.substr(1);
/* Also check for first parent without subclassing. */
/* TODO: This should be dynamic and check for each parent */
/* without subclassing. */
var first = $(parent_selector).first();
var selected_first = $(":selected", first).val();
$("option", self).each(function() {
/* Remove unneeded items but save the default value. */
if (!$(this).hasClass(selected) &&
!$(this).hasClass(selected_first) && $(this).val() !== "") {
$(this).remove();
}
});
/* If we have only the default value disable select. */
if (1 == $("option", self).size() && $(self).val() === "") {
$(self).attr("disabled", "disabled");
} else {
$(self).removeAttr("disabled");
}
$(self).trigger("change");
});
/* Force IE to see something selected on first page load. */
$("option", this).first().attr("selected", "selected");
/* Force updating the children. */
$(this).trigger("change");
});
});
};
/* Alias for those who like to use more English like syntax. */
$.fn.chainedTo = $.fn.chained;
})(jQuery);
show.php Code: <?php
if (isset($_GET['mark']))
{
$papar_car=$_GET['mark'];
}
if (isset($_GET['series']))
{
$papar_ser=$_GET['series'];
}
?>
<!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"/>
</head>
<body>
<form id="form1" name="form1" method="get" action="show.php">
<select id="mark" name="mark">
<option value="">--</option>
<option value="100"<? if($papar_car=="100")echo "selected='selected'"; ?>>BMW</option>
<option value="101"<? if($papar_car=="101")echo "selected='selected'"; ?>>Audi</option>
</select>
<select id="series" name="series">
<option value="">--</option>
<option value="1" class="100" <? if($papar_ser=="1")echo "selected='selected'"; ?>>1 series</option>
<option value="3" class="100"<? if($papar_ser=="3")echo "selected='selected'"; ?>>3 series</option>
<option value="5" class="100"<? if($papar_ser=="5")echo "selected='selected'"; ?>>5 series</option>
<option value="6" class="100"<? if($papar_ser=="6")echo "selected='selected'"; ?>>6 series</option>
<option value="7" class="100<? if($papar_ser=="7")echo "selected='selected'"; ?>">7 series</option>
<option value="11" class="101" <? if($papar_ser=="11")echo "selected='selected'"; ?>>A1</option>
<option value="23" class="101" <? if($papar_ser=="23")echo "selected='selected'"; ?>>A3</option>
<option value="33" class="101"<? if($papar_ser=="33")echo "selected='selected'"; ?>>S3</option>
<option value="44" class="101" <? if($papar_ser=="44")echo "selected='selected'"; ?>>A4</option>
<option value="54" class="101"<? if($papar_ser=="54")echo "selected='selected'"; ?>>S4</option>
</select>
<button name="" type="submit" > Find! </button>
</p>
</form>
<script type="text/javascript" language="javascript">
var car_m= <?php echo $_POST['mark']; ?>
</script>
<script type="text/javascript" language="javascript">
var car_m_s= <?php echo $_POST['series']; ?>
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.chained.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("#series").chained("#mark");
});
</script>
guys, after i done selection in the form1, i press submit button and Im going to show.php page. on show.php page i want categories to be already selected. whats my problem? Hi Everyone! I would genuinely appreciate some help on this one. I'm trying to combine a chained drop down list with the ability for the last selection to show/hide a div. I've researched and found ways to do both individually, but I'm hitting the wall when it comes to combining the javascript. This is how I'd like it to work: -- User selects from DropDown List 1. -- DropDown List 2 options appear based on the selection in 1. -- User selects from DropDown List 2, -- Appropriate div is shown. Here's the Javascript I'm using to show/hide a div: Code: function showDiv(divID)
{
var div = document.getElementById(divID);
div.style.display = ""; //display div
}
function hideDiv(divID)
{
var div = document.getElementById(divID);
div.style.display = "none"; // hide
}
function hideAllDivs()
{
//Loop through the seclect menu values and hide all
var courseSelect = document.getElementById("courseSelect");
for (var i=0; i<=courseSelect.options.length -1; i++)
{
hideDiv(courseSelect.options[i].value);
}
}
function toggle(showID){
hideAllDivs(); // Hide all
showDiv(showID); // Show the one we asked for
}
Here's the Javascript for the chained drop down lists: Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" defer>
function cascadeSelect(parent, child){
var childOptions = child.find('option:not(.static)');
child.data('options',childOptions);
parent.change(function(){
childOptions.remove();
child
.append(child.data('options').filter('.sub_' + this.value))
.change();
})
childOptions.not('.static, .sub_' + parent.val()).remove();
}
$(function(){
cascadeForm = $('.cascadeTest');
deptartmentSelect = cascadeForm.find('.deptartmentSelect');
courseSelect = cascadeForm.find('.courseSelect');
cascadeSelect(deptartmentSelect, courseSelect);
});
And lastly, my HTML (simplified) Code: <form action="#" class="cascadeTest">
<table>
<tr>
<th>Organization:</th>
<td><select name="deptartmentSelect" class="deptartmentSelect">
<option value="0">Select a Department</option>
<option value="1">Dept A</option>
<option value="2">Dept B</option>
<option value="3">Dept C</option>
</select></td>
</tr>
<tr>
<th>Territory:</th>
<td><select name="courseSelect" class="courseSelect" onChange="toggle(this.options[this.options.selectedIndex].value)">
<option value="0" class="static">- Courses -</option>
<option value="A1" class="sub_1">Course A1</option>
<option value="B1" class="sub_2">Course B1</option>
<option value="C1" class="sub_3">Course C1</option>
</select></td>
</tr>
</table>
</form>
<div id="A1" style="display:none;">I am Course A1</div>
<div id="B1" style="display:none;">I am Course B1</div>
<div id="C1" style="display:none;">I am Course C1</div>
Thanks again in advance! Hey chaps, hope someone can help with this: I have a PHP form, with a couple of dynamic Select menus, which are populated from two SQL tables: // tbl_main_colour: Code: ID, NAME 1, Red 2, Blue 3, Green // tbl_shade_colour: Code: ID, NAME, FK_MAIN_COLOUR_ID 1, Light Red, 1 2, Dark Red, 1 3, Light Blue, 2 4, Dark Blue, 2 5, Light Green, 3 6, Dark Green, 3 What I'm after is something to filter the second select option, after the first select option has been chosen // Select 1: Code: Red // Select 2: Code: Light Red Dark Red I'm pretty sure this is possible, but not sure how to go about it, any help would be most appreciated. I've been having problems getting my select option to change the options of another select option. I'm not much of a javacsript coder, so I'm at a lost. When I select the first option nothing appears in the second option. here's the javascript code: Code:
function createOption(OptionText, OptionValue){
var temp = document.captcha_form("option");
temp.innerHTML = OptionText;
temp.value = OptionValue;
return temp;
}
function valChange(){
var firstList = document.getElementById("emailaddress");
var secondList = document.getElementById("subject");
while(secondList.hasChildNodes())
secondList.removeChild(secondList.childNodes[0]);
switch(firstList.value){
case "1":{
secondList.appendChild(createOption("Report Site Browsing Issue", Report Site Browsing Issues));
secondList.appendChild(createOption("Report Page Errors", Report Page Errors));
secondList.appendChild(createOption("Other", Other));
break;
}
case "2":{
secondList.appendChild(createOption("Report Unauthorized Game", Report Unauthorized Game));
secondList.appendChild(createOption("Report Spam", Report Spam));
secondList.appendChild(createOption("Report Harassment", Report Harassment));
secondList.appendChild(createOption("Report Illegal Activities", Report Illegal Activities));
secondList.appendChild(createOption("Request Account Removal", Request Account Removal));
break;
}
// ....
default:{
secondList.appendChild(createOption("Please select from the first list", ""));
break;
}
}
}
window.onload = valChange;
this is the form code Code: <div class="mailto_form"> <form method="POST" id="captcha_form" name="captcha_form" action="../includes/mailform.php"> <div style="padding-bottom: 1em;">Choose Recipient: <select name="emailaddress" id="emailaddress" onchange="valChange();"> <option value=""></option> <option value="1">Webmaster</option> <option value="2">Admin</option> </select> </div> <div style="padding-bottom: 1em;">Subject: <br /><select name="subject" id="subject"> </div> <div style="padding-bottom: 1em;">From: <br /><input type="text" name="email" id="email" value=""> </div> <div style="padding-bottom: 1em;">Enter the text contained in the image into the text box: <br /><img src="../includes/captcha.php" /> <br /><input type="text" name="userpass" value=""> </div> <div style="padding-bottom: 1em;">Message: <br /><textarea name="message" id="message" rows="10" cols="60"><?php echo "</tex" . "tarea>"; ?> </div> <div style="padding-bottom: 1em;"><input name="submit" type="submit" value="Submit"> </div> </form> </div> Link to the page http://www.netgamegurus.com/contact/ Hey Guys When a user changes the select list called "reason_code_master" I need the uodatecodes() function to update all the other select list with the id of "reason_codes" with the same . How can I do this. <select size='1' onchange="updatecodes()" name='reason_code_master'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> Hello, I am trying to make a simple code that has a selection list (with the choice fruit or veggie). When the user chooses fruit, the second list displays the options apple, orange, banana. When the user changes their choice to veggie, the second select list then contains carrot, corn, potatoes (and the apple, orange, banana disappear). I need some advice on how to do this Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body> <form name = "form1"> <fieldset> <legend>Fruit or Veggie</legend> <select name = "S1"> <option name = "fruit">Fruit </option> <option name = "veggie">Veggie</option> </select> <select name = "S2" </select> </fieldset> </form> <script language="JavaScript" type="text/javascript"> ??? </script> </body> </html> Hi JS Experts, I am working on a class registration system that requires students to register for a main class (101, 102 or 103). The student is supposed to select one main course as well as provide a second choice in case the first is not available. I have two dropdown select fields to capture data 1) Choice -1: 101 / 102 / 103 ( Student needs to select one - Reading the classID from classes table) 2) Choice -2: 101 / 102 / 103 ( If student selects 101 in Choice-1 then the only classes available under Choice-2 should be 102 or 103). How can I accomplish the above? Further to this there are two fields on the form where I would like to auto populate based on what they have selected in Choice-1 and Choice-2. For Example: If a parent selects choice1: 101 the child Choice1 field should autopopulate with 100. If a parent selects Choice2: 201 the child Choice2 field should autopopulate with 200 Any help would be really appreciated. Thanks Vinny I have a select box that has ~7000 options, that based on a different dropdown select & input field, gets filtered to 0 - 300 entries. I have another select dropdown that has 13000+ options in total for all the ~7000 entries, but each entry may have 1 to 5 options of these 13000. Is there a way to change the options of the last select dropdown based on what the user chooses in the filtered select box? Currently the idea I'm having is to have the browser load all 13000+ items and filter out the ones that don't apply to the currently selected item, but I'm not sure what kind of lag the user would experience while the browser loads & filters through all these items. Any help would be appreciated. Thanks. I've got some directory list boxes on the site I'm working on. I made them big and fixed rather than drop-down so they're easier to use in this context. But I had to enable the "multiple" attribute to make that work. The site has no provision for multiple selections so it's a tad annoying when the search function selects more than one name in the list. It doesn't really affect the site's operation but it could be confusing to some people. Is there a way to make the listbox show multiple selections without allowing multiple selections? Thanks for any help. <select onchange="display.apply(this, this.value.split(','))" multiple="multiple" id="People" name="People" style="border-style: none; height:244px; width:220px; margin-bottom: 15px;"> <option>Loading</option> </select> Ok so I'm making this form which when a selection is made in one box it will run through the javascript(function getMgmtHours), and update the div(mgmthours). Then another box shows up allowing another selection to be made which runs through the javascript(function getDays) and updates another div(mgmtdate). My problem is that when I use the second box to run through javascript, it overwrites what shows up in the first div (mgmthours) when it should be updating a different div (mgmtdate). Any ideas what I can do to get it update the relevant div and not overwrite the other one? Here is part of the javascript I have in my page head: Code: function getMgmtHours(str)
{
if (str=="")
{
document.getElementById("mgmthours").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("mgmthours").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getmgmthours.php?dist="+str,true);
xmlhttp.send();
}
function getDays(str)
{
if (str=="")
{
document.getElementById("mgmtdate").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("mgmtdate").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getdates.php?sunday="+str,true);
xmlhttp.send();
}
Here is the HTML/PHP portion being used: PHP Code: echo "<p>"; echo "Submit hours:"; echo "<form>"; echo "<select name='district' onchange='getMgmtHours(this.value)'>"; echo "<option value=''>Select a district:</option> <option value='1'>1</option> <option value='3'>3</option> <option value='4'>4</option>"; echo "</select>"; echo "</form>"; echo "</p>" echo "<p>"; echo "<form action='./hours.php' method='post' onSubmit='return checkMgmtHours'>"; echo "Weekending Day: "; echo "<select name='weekending' onchange='getDays(this.value)'>"; echo "<option value=''>Choose a Date:</option>"; while ($week < 32) { $nextsunday = strtotime("next Sunday"); if ($week > 0) { $timestamp = strtotime("-" . $week . " week", $nextsunday); } else { $timestamp = $nextsunday;} $weekending = date('M. d, Y', $timestamp); echo "<option value='" . $weekending . "'>" . $weekending . "</option>"; $week = $week + 1; } echo "</select>"; echo "<div id='mgmtdate' />"; echo "<div id='mgmthours' />"; echo "</p>"; Edit: Also, after getMgmtHours() runs, I can still use both getDays and getMgmtHours, howeer once I used getDays, I am no longer able to use getMgmtHours w/o refreshing the page. Hi All, First time user of this forum and need some help please. I have a webpage where I am displaying checkboxes next to rows. I would like to have one checkbox which will select everything. I have written this code but it does'nt seem to work. Can someone advice as to whats wrong here. The HTML code for checkAll checkbox is: Code: <thead> <tr> <th>Select All <input type='checkbox' name='checkall' onclick='checkedAll(frm1);'> </th> The HTML code for each checbox is : Code: <form id="frm1" />
<tbody>
<?php
foreach ($consignment_array as $ct_idx => $consignment)
{
$status = $consignment->getStatus();
$id= $consignment->getId();
?>
<tr class="<?php echo "cls" . $status; ?>">
<td id="c"> <input type=checkbox id= "1" name="deleteConsignments" onclick="row_color(this)" value= <?php echo $consignment->getId(); ?> /> </td>
The javascript is : Code: function checkedAll (frm1) {
alert("in check all");
var aa= document.getElementById('frm1');
if (checked == false)
{
checked = true
}
else
{
checked = false
}
for (var i =0; i < aa.elements.length; i++)
{
aa.elements[i].checked = checked;
}
}
The problem is that its not even going into the Javacript because I dont get the alert. Appreciate the help guys. Thanks. Hi, I have a select option inside a span, how do i get the select id. Code: <span id="getSelect"> <select id="myselect" name="mySelect" option../> </span> document.getElementById("getSelect").innerHTML; this will give me the whole select object...now how do i get the select id from that. Thanks hello, how can I set a selected item of a drop down menu (select in html) knowing its value and given a variable "dropdown" that points to the select ? Thanks Code: <select name="selectme" onChange=""> <option value="layer1name">1</option> <option value="layer2name">2</option> <option value="layer3name">3</option> </select> how can you make a onclick for this to work. So if you cliked the seconde one it would change somthing(i dont care what). |
|||||||