[HTML/SMARTY] Focus restoren na een onChange - Softwareontwikkeling

woensdag 9 augustus 2006 10:31

Acties:

Topicstarter

Ik heb een dynamisch formulier waar bij sommige dropdowns een onChange zit die het form submit (niet in de database zet) en zo optionele velden zichtbaar maakt. Bijv bij het selecteren van "koophuis" komt er onderaan een tabel bij met hypotheekgegevens. Nu wil ik dat de tabindex/focus gewoon verder gaat, dus dat de gebruiker niet de muis hoeft de pakken en klikken op het volgende veld zodat deze gewoon met TAB het formulier verder kan invullen. De focus moet moet dus bij het volgende veld komen, dus ook dat het beeld naar beneden scrollt nadat de pagina vervest is.

Na wat zoekwerk kwam ik AJAX uit maar daar heb ik totaal geen kennis van, en de htmltag anchor is een optie maar dan heeft het betreffende veld nog geen focus.

Ik maak gebruik van een Smarty template icm Quickform.

woensdag 9 augustus 2006 10:47

Acties:

André

Analytics dude

Je kunt na de onchange natuurlijk een focus laten uitvoeren op het gewenste element. Dit kan je doen met de element.focus() constructie in javascript.

[ Voor 9% gewijzigd door André op 09-08-2006 10:48 ]

woensdag 9 augustus 2006 11:00

Acties:

sMb.Blade

Topicstarter

Dus bijv:

input doet een onchange -> die set een variabele in bijv 1 -> dan bij een onload set focus element 1?

of bedoel jij het anders?

woensdag 9 augustus 2006 11:06

Acties:

reddevil

aan het eind van je onchange functie gewoon het element (wat je de focus wilt geven) met ".focus()" aanroepen.

woensdag 9 augustus 2006 12:02

Acties:

sMb.Blade

Topicstarter

jah dat zou kunnen, maar dan moet ik er tig aanmaken. Zitten meer dan 10 onBlur, onChange, etc dingen in. Maar is idd ook een optie

woensdag 9 augustus 2006 12:32

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

sMb.Blade schreef op woensdag 09 augustus 2006 @ 10:31:
Ik heb een dynamisch formulier waar bij sommige dropdowns een onChange zit die het form submit (niet in de database zet) en zo optionele velden zichtbaar maakt.

Wat je wil is waarschijnlijk dat bij een onchange niet zomaar het hele formulier gesubmit wordt, maar een script asynchroon op basis van dat ene veld een request doet aan je server en de daarbij behorende elementen terugkrijgt ...

Die kunnen dan dynmaisch in je formulier toegevoegd worden...

Standaard Ajax is een crossbrowser XmlHttpRequest-Object dat zulke asynchrone requests kan afhandelen, verstuurd naar de server en zodra de data terugkomt en geen error geeft, een vervolg script aanroept:
dat in jouw geval de extra formulier-elementen toevoegd aan je bestaande formulier ...

Doordat niet je hele formulier gesubmit wordt en je pagina zelf niet ververst, verlies je ook geen 'gegevens' zoals de positie van een gebruiker, en bv tabindex en focus

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

woensdag 9 augustus 2006 12:47

Acties:

sMb.Blade

Topicstarter

Ja dat zou echt perfect zijn, en daar willen wij in de toekomst ook naar toe, echter de deadline is deze week en wij hebben nog onvoldoende kennis van AJAX om dit te bewerkstellen

Enig idee hoe dit eenvoudig te doen is?

woensdag 9 augustus 2006 13:34

Acties:

DexterDee

I doubt, therefore I might be

Ik heb in het verleden wel eens een construcie gemaakt door in mijn header template in de <body> tag een smarty variabele te introduceren die ik dan kan vullen:

HTML:

1	<body onload="{$onload_actie}">

Bij het submitten van het formulier kun je met javascript het id van het actieve veld submitten:

HTML:

<script> var actiefveld_id='' </script>

<form name="formulier" onsubmit="this.actiefveld_id.value=actiefveld_id">

<input name="actiefveld_id" type="hidden" value="">
<input name="huis" id="huis" onfocus="var actiefveld_id='huis'">

</form>

Nu je het id hebt van het actieve veld, kun je in PHP zorgen dat er naar het actieve veld gesprongen wordt:

PHP:

1	$smarty->assign('onload_actie', "document.getElementById('{$_POST['actiefveld_id']}').focus()");

Als je de waarde manipuleert van de onfocus actie van het veld 'huis' kun je na een reload ook naar een ander veld gaan, gewoon het id invullen van het veld waar je na je reload heen wilt.

Het is niet de meest nette manier, maar "it does the job". Tegenwoordig doe ik dit ook uitsluitend met Ajax dus ik sluit me van harte aan bij de andere mensen die dit aanbevelen.

DISCLAIMER: dit is ongeteste code uit de losse pols ingetikt

Klik hier om mij een DM te sturen • 3245 WP op ZW