AJAX getXMLHTTP() but from multiple SELECT BOX

[StefanRSA]

I know how to do getXMLHTTP(); from a dropdown box to populate another dropdown box...

My problem is now as follow... I have a multiple SELECT BOX and I want to use all selected options in this select box to populate another SELECT BOX....

My select box is as follow:

<input type="checkbox" id="all" name="province[]" value="6" 
onclick="aprov();prov('/prov.php?prov='+this.value)">All Provinces
<input type="checkbox" id="a" name="province[]" value="1">Prov 1
<input type="checkbox" id="b" name="province[]" value="2">Prov 2
<input type="checkbox" id="c" name="province[]" value="3">Prov 3
<input type="checkbox" id="d" name="province[]" value="4">Prov 4
<input type="checkbox" id="e" name="province[]" value="5">Prov 5

I am using the aprov() to disable the other select boxes when "All Provinces" is selected.

I am now sitting with the problem that the next field should be updated with whatever is selected or removed from the Province Select Box........

Can this be done or am I loosing it completely?

 

Here is the code I usually use to send the getXMLHTTP();

function getXMLHTTP() { //fuction to return the xml http object
        var xmlhttp=false;    
        try{
            xmlhttp=new XMLHttpRequest();
        }
        catch(e)    {        
            try{            
                xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e){
                try{
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch(e1){
                    xmlhttp=false;
                }
            }
        }
        return xmlhttp;
    }
    function prov(strURL) {
        var req = getXMLHTTP();
        if (req) {
            req.onreadystatechange = function() {
                if (req.readyState == 4) {
                    // only if "OK"
                    if (req.status == 200) {            
                        document.getElementById('provdiv').innerHTML=req.responseText;                        
                    } else {
                        alert("Howzit!!! You did it wrong! \n" + req.statusText);
                    }
                }                
            }            
            req.open("GET", strURL, true);
            req.send(null);
        }
    }

/////////////////////////////////////////////////////////// FUNCTION TO DISABLE OTHER PROV IF ALL IS SELECTED
        function aprov() {
            var all = document.getElementById('all');
            var a = document.getElementById('a');
            var b = document.getElementById('b');
            var c = document.getElementById('c');
            var d = document.getElementById('d');
            var e = document.getElementById('e');
            if (all.checked) {
                a.disabled = 'disabled';
                b.disabled = 'disabled';
                c.disabled = 'disabled';
                d.disabled = 'disabled';
                e.disabled = 'disabled';
            }
            else {
                a.disabled = false;
                b.disabled = false;
                c.disabled = false;
                d.disabled = false;
                e.disabled = false;
            }
        }

 

[StefanRSA]

Sorry... I am talking about a CHECKBOX not a select box!!! 

[gamesmstr]

I am using the aprov() to disable the other select boxes when "All Provinces" is selected.

I am now sitting with the problem that the next field should be updated with whatever is selected or removed from the Province Select Box........

Can this be done or am I loosing it completely?

 

I'm fairly certain it can be done and I'm not sure you need AJAX to do it.  There seems to be some code missing here.  What is the"next field" to be populated?

[StefanRSA]

I'm fairly certain it can be done and I'm not sure you need AJAX to do it.  There seems to be some code missing here.  What is the"next field" to be populated?

 

I am sure it can be done as well. I want to use ajax as I actually want some other stuff to happen in the background as well.

 

At this stage I am just trying to send the selected provinces to another php page to do do the stuff and echo back... So.. If a visitor select Province 1 & Province 2 I want the cities of both provinces to display in the city div.

 

I have changed the code a bit and it now looks as follow... Only problem is that only the first selected province get send to the city.php page in the background.... bI want ALL selected provinces to be sent to the background....

 

<select name="province[]" id="province" multiple="multiple">
  <option value="0">Select Province</option>
  <option value="3">Eastern Cape</option>
  <option value="4">Free State</option>
  <option value="5">Gauteng</option>
  <option value="1">KwaZulu-Natal</option>
  <option value="6">Limpopo</option>
  <option value="7">Mpumalanga</option>
  <option value="9">Northern Cape</option>
  <option value="8">North West</option>
  <option value="2">Western Cape</option>  
  </select>
<br>
<a href="#" onclick="prov('<?=$root;?>/member/smbuild.php?prov='+province.value)">DONE</a><br>
<div id="provdiv"></div>

So.. Now it is a MULTIPLE SELECT BOX and I use the link below it to send the

    function prov(strURL) {
        var req = getXMLHTTP();
        if (req) {
            req.onreadystatechange = function() {
                if (req.readyState == 4) {
                    // only if "OK"
                    if (req.status == 200) {            
                        document.getElementById('provdiv').innerHTML=req.responseText;                        
                    } else {
                        alert("Howzit!!! You did it wrong! \n" + req.statusText);
                    }
                }                
            }            
            req.open("GET", strURL, true);
            req.send(null);
        }
    }

 

The result now is that it only send the first selected province and not all selected