<table border="0" >
    <tr>
        <td>Ország:</td>
        <td>
<select name="orszag" id="orszag" size="1" onchange="orszag_csere(this.selectedIndex)" style="width:200px"></select></td>
    </tr>
    <tr>
        <td>Megye:</td>
        <td> <select name="megye" id="megye" size="1" onchange="megye_csere(this.selectedIndex)" style="width:200px"></select></td>
    </tr>
    <tr>
        <td>Város:</td>
        <td> <select name="varos" id="varos" size="1" style="width:200px"></select></td>
    </tr>
</table>

<script type="text/javascript" language="javascript">
tomb=new Array(
     new Array(1,'Magyarország',
         new Array(1,'Bács - Kiskun',
             new Array(27,'Ágasegyháza'),
             new Array(34,'Akasztó'),
             new Array(88,'Apostag'),
             new Array(3124,'Zsana')
        ),
        
         new Array(16,'Tolna',
             new Array(54,'Alsónána'),
             new Array(57,'Alsónyék'),
             new Array(3119,'Zomba')
        ),
        
         new Array(19,'Zala',
             new Array(42,'Alibánfa'),
             new Array(45,'Almásháza'),
             new Array(3099,'Zalatárnok'),
             new Array(3100,'Zalaújlak')
            )
        ),
    new Array(2,"Olaszország",
        new Array(1,"Nem tudom milyen megyék vannak ott!")
        )
    )

newOptionName = new Option("--- Kérem válasszon ---", 0);
document.getElementById('orszag').options[0] = newOptionName;
for(i=0;i<tomb.length;i++)
   {
    newOptionName = new Option(tomb[i][1], tomb[i][0]);
    document.getElementById('orszag').options[i+1] = newOptionName;
   }

v=0

function orszag_csere(mire)
{
mire--
v=mire
// Régi megye kitörlés
db=document.getElementById('megye').options.length
for(i=0;i<db;i++)
    {
    document.getElementById('megye').options[0]=null
    }
// Régi város kitörlés
db=document.getElementById('varos').options.length
for(i=0;i<db;i++)
    {
    document.getElementById('varos').options[0]=null
    }
if (mire>=0)
    {
    newOptionName = new Option("--- Kérem válasszon ---", 0);
    document.getElementById('megye').options[0] = newOptionName;
    t=tomb[mire]
    for(i=2;i<t.length;i++)
       {
        newOptionName = new Option(t[i][1], t[i][0]);
        document.getElementById('megye').options[i-1] = newOptionName;
       }
    }
}

function megye_csere(mire)
{
mire--
// Régi megye kitörlés
db=document.getElementById('varos').options.length
for(i=0;i<db;i++)
    {
    document.getElementById('varos').options[0]=null
    }
if (mire>=0)
   {
    newOptionName = new Option("--- Kérem válasszon ---", 0);
    document.getElementById('varos').options[0] = newOptionName;
    t=tomb[v][mire+2]
    for(i=2;i<t.length;i++)
       {
        newOptionName = new Option(t[i][1], t[i][0]);
        document.getElementById('varos').options[i-1] = newOptionName;
       }
    }
}



newOptionName = new Option("--- Kérem válasszon ---", 0);
document.getElementById('orszag').options[0] = newOptionName;
for(i=0;i<tomb.length;i++)
   {
    newOptionName = new Option(tomb[i][1], tomb[i][0]);
    document.getElementById('orszag').options[i+1] = newOptionName;
   }

v=0

function orszag_csere(mire)
{
mire--
v=mire
// Régi megye kitörlés
db=document.getElementById('megye').options.length
for(i=0;i<db;i++)
    {
    document.getElementById('megye').options[0]=null
    }
// Régi város kitörlés
db=document.getElementById('varos').options.length
for(i=0;i<db;i++)
    {
    document.getElementById('varos').options[0]=null
    }
if (mire>=0)
    {
    newOptionName = new Option("--- Kérem válasszon ---", 0);
    document.getElementById('megye').options[0] = newOptionName;
    t=tomb[mire]
    for(i=2;i<t.length;i++)
       {
        newOptionName = new Option(t[i][1], t[i][0]);
        document.getElementById('megye').options[i-1] = newOptionName;
       }
    }
}

function megye_csere(mire)
{
mire--
// Régi megye kitörlés
db=document.getElementById('varos').options.length
for(i=0;i<db;i++)
    {
    document.getElementById('varos').options[0]=null
    }
if (mire>=0)
   {
    newOptionName = new Option("--- Kérem válasszon ---", 0);
    document.getElementById('varos').options[0] = newOptionName;
    t=tomb[v][mire+2]
    for(i=2;i<t.length;i++)
       {
        newOptionName = new Option(t[i][1], t[i][0]);
        document.getElementById('varos').options[i-1] = newOptionName;
       }
    }
}

</script>

A megyék, és azok települései nem  teljesek, csak a példa kedvéért van a selecteknek tartalmuk.
Az eredeti program letölthet? Micu oldaláról http://www.micsoft.hu/_adatbazis

Próbáljuk ki: 

Ország:
Megye:
Város:

<script type="text/javascript" language="javascript">
function beir(ertek){
document.getElementById('text').value = ertek.value;
}
</script>

<form name="form1">
<select id="valami" onchange="beir(this)" name="valami">
<option value="">--Válassz--</option>
<option value="Valami1">Valami1</option>
<option value="Valami2">Valami2</option>
<option value="Valami3">Valami3</option>
<option value="Valami4">Valami4</option>
</select>
<input type="text" name="text" id="text">
</form>

A legördülőből választott value érték fog belekerülni az inputboxunkba. Összeköthetjük a form ellenőrrel és ha üres az inbutbox, akkor nem engedjük a form feldolgozását.

Próbáljuk ki:

--Válassz-- Valami1 Valami2 Valami3 Valami4

 

<style type="text/css">
div#forma{
background-color:#CCCCCC;
width: 250px;
padding: 10px;
margin-top: 50px;
border: 2px solid #FF0000;
}
</style>

<script type="text/javascript" language="javascript">
function onlyNumbers(mibe){
x=mibe.value;
ki="";
    for(i=0;i<x.length;i++){
       if (x.substr(i,1)>='0' && x.substr(i,1)<='9'){
          ki+=x.substr(i,1);
         }
        }
mibe.value=ki;

}

function form_ellenor(inputok,form_neve,szoveg,password_hiba,keves_elem, keves_elem_2){
    x=inputok.length;
    for(i=0; i < x ; i++ ){
        aktualis_tag = inputok[i];
            
        if(document.forms[form_neve].elements[aktualis_tag].value == ""){
        document.forms[form_neve].elements[aktualis_tag].style.background= "RED";
        alert(szoveg);
        document.forms[form_neve].elements[aktualis_tag].focus();
        return false;
      }else{
              
        document.forms[form_neve].elements[aktualis_tag].style.background= "white";
            if(inputok[i] == "ir_szam"){
                if(document.forms[form_neve].ir_szam.value.length < 4 ||                  document.forms[form_neve].ir_szam.value.length > 4){
                    document.forms[form_neve].ir_szam.focus();
                            document.forms[form_neve].ir_szam.style.background= "RED";
                            alert(keves_elem_2);
                            return false;
                }
            }
            
            if(inputok[i] == "jelszo" ){
            ez = document.forms[form_neve].elements[inputok[i]].value;
                var tilos = "ÖöÜüÓóÚúÉéÁáÍí";
    
                for (var k=0; k< ez.length; k++)
                {
                 for (j=0; j<tilos.length; j++)
                   {
                    
                       if (ez.charAt(k)==tilos.charAt(j))
                      {
                      alert("Kérem ne használjon ékezetes karaktereket.");
                       document.forms[form_neve].ujra_jelszo.value = "";
                      document.forms[form_neve].elements[inputok[i]].value = "";
                      document.forms[form_neve].elements[inputok[i]].focus();
                      document.forms[form_neve].elements[inputok[i]].style.background= "RED";
                       return false;
                      }
                      }
                  }
            }
            
                if(inputok[i] == "ujra_jelszo"){
                        if((document.forms[form_neve].jelszo.value.length) < 5){
                            document.forms[form_neve].jelszo.focus();
                            document.forms[form_neve].jelszo.style.background= "RED";
                            alert(keves_elem);
                            return false;
                        }
                            if(document.forms[form_neve].jelszo.value != document.forms[form_neve].elements[inputok[i]].value ){
                                alert(password_hiba);
                                document.forms[form_neve].elements[inputok[i]].value = "";
                                document.forms[form_neve].elements[inputok[i]].focus();
                                document.forms[form_neve].elements[inputok[i]].style.background= "RED";
                            return false;
                            }
                }
                
                if(inputok[i] == "email"){
                        str=document.forms[form_neve].elements[inputok[i]].value;
                            filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
                           if (!filter.test(str)){
                        document.forms[form_neve].elements[inputok[i]].focus();
                        document.forms[form_neve].elements[inputok[i]].style.background= "RED";
                           alert("Kérem egy valós e-mail címet adjon meg!");
                          return false;
                            }
                }
       }
    }
}
</script>

<div align="center"><div id="forma">
<form name="form_proba" method="post" action="#" onSubmit="return form_ellenor(new Array('nev','ir_szam','telefon','email','jelszo','ujra_jelszo'),'form_proba','Üres mező','A jelszó és az újra jelszó mező nem egyforma tartalmú!','A jelszó legalább öt karaktert tartalmazzon!','Az irányítószám négy karakterből áll!');">
<table border="0" cellpadding="2" cellspacing="0">
    <tr>
        <td>Név</td>
        <td><input type="text" name="nev" value="" /></td>
    </tr>
    <tr>
        <td>Irányító szám</td>
        <td><input type="text" name="ir_szam" value="" onkeyup="onlyNumbers(this);"  maxlength="4"/></td>
    </tr>
    <tr>
        <td>Telefon</td>
        <td><input type="text" name="telefon" value="" /></td>
    </tr>
    <tr>
        <td>email</td>
        <td><input type="text" name="email" value="" /></td>
    </tr>
    <tr>
        <td>Jelszó</td>
        <td><input type="password" name="jelszo" value="" /></td>
    </tr>
    <tr>
        <td>Újra jelszó</td>
        <td><input type="password" name="ujra_jelszo" value="" /></td>
    </tr>
    <tr>
        <td colspan="2"><input name="kuld_btn" type="submit" id="kuld_btn" value="Elküld" /></td>
    </tr>
</table>

</form>
</div>
</div>

 

Próba:

Egy jól konfigurálható form ellenőr. Persze ez csak a felhasználói oldalon ellenőriz. A szerver oldalon is illik ellenőrizni a kapott adatokat. Az onSubmit-nál, a new Array() -résznél felsoroljuk, azokat az adatokat amelyeket ellenőrizni szeretnénk.

Csak a felsorolt inputokat fogja számonkérni.

<script type="text/javascript" language="javascript">
function vizsgal(){
if(!document.getElementById("elfogad").checked) {
document.getElementById("elkuld_btn").disabled = true;
} else {
document.getElementById("elkuld_btn").disabled = false;
}
}

</script>

<form name="form1" method="post" action="index.php">
<input type="checkbox" name="elfogad" id="elfogad" value="igen" onclick="vizsgal();" />
A feltételek elfogadása <br/>
<input type="submit" name="elkuld_btn" id="elkuld_btn" value="Küld" disabled ="true" />
</form> 

Próba:

A feltételek elfogadása

elso_oldal.htm tartalma

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Nagy kép megjelenítő</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<script language="JavaScript" type="text/JavaScript">
function detect() {
if (navigator.appName == 'Microsoft Internet Explorer' && navigator.platform == 'MacPPC') {
return true;
} else {
return false;
}
}
function openNewWindow(URLtoOpen, popwidth, popheight) {
var Macit = detect();
var screenWidth = screen.availWidth;
var screenHeight = screen.availHeight;
var x = (screenWidth/2)-(popwidth/2);
var y = (screenHeight/2)-(popheight/2);
if (Macit == 1) {
popwidth2 = popwidth - 16;
popheight2 = popheight - 16;
} else {
popwidth2 = popwidth;
popheight2 = popheight;
}
var winParams = "height=" + popheight2 + ",width=" + popwidth2 +",resizable=0,directories=0,dependent=1,toolbar=0,scrollbar=0,tollbar=0,screenX=" + x + ",screenY=" + y + ",left=" + x + ",top=" + y;
newWindow = window.open(URLtoOpen,'_blank', winParams);

}

</script>
</head>

<body><a href="javascript:openNewWindow('megjelenito.php?nagy_kep_url=http://www.mezofi.com/
Templates/kepek/nagy_kepek/lampion/lampion_14ha.jpg','450','447');" >
<img src="http://www.mezofi.com/Templates/kepek/lampion/lampion_14ha.jpg" width="100" height="100" border="0" alt=""/>
</a></body>
</html>

megjelenito.php tartalma.

<?php
if(isset($_GET["nagy_kep_url"])){
$nagy_kep_url=$_GET["nagy_kep_url"];
}else{
print("Nem érkezett kép cím!");
exit;
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Nagy k&eacute;p megjele&iacute;t&#337;</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body style="margin: 0" onblur="parent.window.close()">
<img src="<?php echo $nagy_kep_url;?>" alt="" />

</body>
</html>

Próbáljuk ki!

Ha a nagy kép mellé kattintasz bezáródik a nagy ablak!