Visszalépés az előző oldalra
Sziasztok!
Egy ügyviteli programhoz írok beviteli képernyőt, akarom mondani form-ot.
A probléma ott kezdődött, hogy egymástól függő input mezők vannak rajta. Az űrlap alapértelmezett választásokkal indul, a hozzájuk tartozó függő lehetőségek engedélyezve vannak. A többi letiltva, láthatóak, de nem választhatóak. A menet közbeni váltásokat a disabled jellemző ki és bekapcsolása oldja meg. Szóval látható minden, menet közben nem bővül vagy szűkül az űrlap.
Van egy trükk az oldalon. A többszörös elküldést a submit gomb eltüntetésével érem el. Helyette egy addig nem látható animált gif jelenik meg. Erre azért is szükség van, mert a szerverre várni kell.
Remélem látszik a lényeg a mellékelt forrásban:
- "érték"-nek nincs kapcsolata
- "darab"-nak lehet kísérője az "egyéb"
form.cssform.htmlform.jsHa kész a kimutatás, akkor elvileg vissza lehetne lépni az előző oldalra, ami maga az űrlap. Azt várnám, úgy jelenik meg ahogy otthagytam. Ehelyett valami más történik. Összekeveredik rajta a kattintás eredménye és a forrásból származó beállítás. Vagy valami ilyesmi.
Konkrétan, ha a "darab" mezőt választom, és kipipálom az "egyeb"-et, akkor megmarad a pipa visszalépés után is, de a mező ezzel együtt disabled is lesz, ami az eredeti forrásban így volt, de a javascript átváltotta menet közben.
Ez még úgy-ahogy védhető. Beszúrtam egy onload eseményre lefutó scriptet. Pótlólag kapcsolgatja a disabled jellemzőket.
onload.js1. Nem lehet ezt jobban?
Tudom, elavult a javascript használatom. Ha ez okozza a gondokat, nem bánom, csak jól lenne tudni.
2. A submit/working.gif cserén nem segít a függvény. Az böngésző függő dolog. Chrome, IE esetén visszalépéskor nincs animált kép, a submit-gomb látszik, vagyis nincs teendő. FF esetén marad a kép, vissza sem tudom cserélni gombra.
3. Végül, ha valaki elolvasta eddig. A submit_once visszatérési értéke tulajdonképpen mindegy. Ha hibát találok ellenőrzéskor, az alert hívása elegendő. Amúgy return true/false után egyformán meghívódik a feldolgozó.
Nem tudom hogyan tudnék javítani még a kódon, vagy mit csináljak másképp. Várom az ötleteket és tippeket.
Köszönöm
■ Egy ügyviteli programhoz írok beviteli képernyőt, akarom mondani form-ot.
A probléma ott kezdődött, hogy egymástól függő input mezők vannak rajta. Az űrlap alapértelmezett választásokkal indul, a hozzájuk tartozó függő lehetőségek engedélyezve vannak. A többi letiltva, láthatóak, de nem választhatóak. A menet közbeni váltásokat a disabled jellemző ki és bekapcsolása oldja meg. Szóval látható minden, menet közben nem bővül vagy szűkül az űrlap.
Van egy trükk az oldalon. A többszörös elküldést a submit gomb eltüntetésével érem el. Helyette egy addig nem látható animált gif jelenik meg. Erre azért is szükség van, mert a szerverre várni kell.
Remélem látszik a lényeg a mellékelt forrásban:
- "érték"-nek nincs kapcsolata
- "darab"-nak lehet kísérője az "egyéb"
form.css
#egyeb { margin: 0 0 0 50px;}
input[type="submit"]{
display:inline;}
#karika {
display:none;
padding: 0 0 0 200px;}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="hu">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<meta name="language" content="hu">
<title> Form teszt </title>
<link rel="stylesheet" href="form.css">
<script type="text/javascript" src="form.js"> </script>
<script type="text/javascript" src="onload.js"> </script>
</head>
<body>
<form onSubmit="return submit_once()" name="adatok" method="post" action="index.php">
<fieldset>
<legend> Adatok </legend>
<input type="radio" name="tabla[]" value="FT" id="ertek" onClick="egyeb_off()" checked>
<label for="ertek"> értékben </label>
</br>
<input type="radio" name="tabla[]" value="DB" id="darab" onClick="egyeb_on()">
<label for="darab"> mennyiségben </label>
<input type="checkbox" name="egyeb" id="egyeb" disabled>
<label for="egyeb"> egyéb adatok </label>
</fieldset>
<p>
<input type="submit" name="elkuld" value=" Számítás ... " id="elkuld">
</p>
<p>
<img src="working.gif" id="karika">
</p>
</form>
</body>
</html>
/* 'Ertek' tablazat, nincs 'Egyeb' kerdes */
/* 'Darab' tablazat, lehet 'Egyeb' kerdes */
function egyeb_off(){
document.getElementById('egyeb').checked = false
document.getElementById('egyeb').disabled = true
}
function egyeb_on(){
document.getElementById('egyeb').disabled = false
}
/* Submit gomb letiltas, helyette animalt GIF */
function submit_once(){
/* hiba kezeles: */
/* alert('Error') */
/* return false */
document.getElementById('elkuld').style.display = 'none'
document.getElementById('karika').style.display = 'block'
return true
}
Konkrétan, ha a "darab" mezőt választom, és kipipálom az "egyeb"-et, akkor megmarad a pipa visszalépés után is, de a mező ezzel együtt disabled is lesz, ami az eredeti forrásban így volt, de a javascript átváltotta menet közben.
Ez még úgy-ahogy védhető. Beszúrtam egy onload eseményre lefutó scriptet. Pótlólag kapcsolgatja a disabled jellemzőket.
onload.js
/* visszalepo gomb eseten */
window.onload=function()
{
var idc = document.getElementById('ertek').checked
if ( idc ){
egyeb_off()
}
var idc = document.getElementById('darab').checked
if ( idc ){
egyeb_on()
}
document.getElementById('elkuld').style.display = 'inline'
document.getElementById('karika').style.display = 'none'
}
Tudom, elavult a javascript használatom. Ha ez okozza a gondokat, nem bánom, csak jól lenne tudni.
2. A submit/working.gif cserén nem segít a függvény. Az böngésző függő dolog. Chrome, IE esetén visszalépéskor nincs animált kép, a submit-gomb látszik, vagyis nincs teendő. FF esetén marad a kép, vissza sem tudom cserélni gombra.
3. Végül, ha valaki elolvasta eddig. A submit_once visszatérési értéke tulajdonképpen mindegy. Ha hibát találok ellenőrzéskor, az alert hívása elegendő. Amúgy return true/false után egyformán meghívódik a feldolgozó.
Nem tudom hogyan tudnék javítani még a kódon, vagy mit csináljak másképp. Várom az ötleteket és tippeket.
Köszönöm
Szerintem azért kavarodhatnak
"Új oldal a jó oldal"
A böngészők és a web rengeteg
Helyes gondolkodás
Átmegyek egy másik oldalra, majd visszalépek. Nem úgy látom az oldalt mint lépkedés előtt. A módosított html ugyanaz maradt? Igen, csak a megjelenített kimenet enyhén eltér attól ami a tartalomból következne. (Az előző nézettől)
Úgy tudom, a böngészés alapvető módja az előre-hátra lépkedés. Elvileg mindegy lenne, a "forrást" piszkáltam-e lépés előtt vagy sem. Gyakorlatban nem mindegy, a böngésző rigolyáit ki kell tapasztalni.
Ha ebben a gondolatmenetben hiba van, kérlek írd meg! (vagy valaki)
A böngésző a szervertől
A másik dolog, ami megkavar téged, hogy a böngészők kényelmi szempontból ideiglenesen elmentik az űrlapelemek értékeit, hogy visszalépéskor, vagy esetleg váratlan leállás után ne kelljen ugyanazokat a dolgokat esetleg hosszadalmasan kitöltened újra. Az űrlapelemek letiltottsága viszont normál esetben nem változtatható meg a felhasználó által, így ez nem is kerül mentésre, hanem a gyorstárban található vagy szervertől kapott kódot jeleníti meg (amiben mint korábban írtam, nyilván nincsenek benne a DOM-on végrehajtott módosítások), majd ezután feltölti az űrlapokat a mentett értékekkel (value, checked, stb). Ha erre a funkcióra akarod alapozni az állapot visszaállítását, akkor ahogy írtad korábban, célszerű minden oldalbetöltésnél inicializálni az űrlapot a mezők értékének függvényében. (De persze mentheted más formában is az adatokat, ha ez nem tetszik.)
Lassan világosodok
Szóval a DOM módosítások elvesznek. Gondolom a JS változói is ugyanígy járnak lépegetéskor.
Még egy dologra vagyok kíváncsi. Ha visszalépéssel jutok el a tárolt oldalra, az a böngésző illetve a JS szempontjából onload típusú esemény, vagy valami más? Annak tűnik, de a különböző böngészők ezt mintha másképp kezelnék.
onClick
Továbbá ha a visszalépsz egy oldalra, akkor a kérdéses radio gomb ki lehet ugyan jelölve, de az onclick esemény nem következik be, így aztán az eseményhez rendelt disabled/enabled függvények sem futnak le. Erről neked kell gondoskodni, ahogyan javasolták is.
Epilógus
A helyes beállításokra van megoldásom. Meghívok egy ONLOAD.JS-t - onload eseményre indul - ami engedélyezi vagy letiltja a függő mezőket, a FORM állapota szerint. A beépített kényelmi funkció miatt lehet rá támaszkodni, a FORM adatai nem vesznek el! Jól dolgozott eddig is csak nem volt világos, mi ez a kavarodás. (és igen, átjött, a süti például egy bevált megoldás)
- Volt még egy érthetetlen jelenség. Feldolgozó hívás előtt eltüntetem a submit gombit (display:none) és megjelenítek egy animált GIF-et (display:none => display:block csere). Nos, elsőre ez működik. Visszalépésnél azonban - igaz csak Firefox esetén - ott karikázott a GIF, gomb pedig sehol. Amennyiben az eredeti forrást használja a böngésző akkor ez nem lehetséges.
Mindenesetre köszönöm a hozzászólásokat.