Clear Placeholder Text

[SvU]

Beste leden,

Ik heb een probleem, en als het goed is valt dat op te lossen met Javascript.

Als je in m'n formulieren een van de verplichte velden niet invult, krijg je vanzelfsprekend een error. Hij onthoudt alle variabelen die geïnput zijn wel, en plaatst ze ook weer netjes in het formulier. Als het vak leeg is gebleven, maakt hij van de variabele automatisch 'Vul in', dus wordt het betreffende formulierveld met de waarde 'Vul in' gevuld.

Het is geen PHP, maar JSP, maar het lijkt me voor de javascriptcode niet van belang.

String voorbeeld = request.getParameter("voorbeeld");

if (voorbeeld.equals("")) {
	voorbeeld = "Vul in";
}


	<tr>
		<td>Voorbeeld*:</td>
		<td><input name="voornaam" value="<%= voorbeeld %>" size="30"><br>
		</td>
	</tr>

Zo werkt het. Ik vraag eerst de variabele op. Als hij leeg is, maak ik van de String in kwestie 'Vul in', en dat komt dan ook in het formulier te staan. Anders gewoon de waarde die al eerder is ingevuld.

Nu komt het probleem; als in het veld 'Vul in' staat, moet hij automatisch dat veld legen als je er met je muis op klikt. Dat is hetzelfde als gebeurt bij Test 2 op de volgende pagina:
http://dotjay.co.uk/experiments/forms/input-placeholder-text/

Maar, als ik dit script zou gebruiken, zou hij dat bij alle velden doen. Dat is niet de bedoeling. Hij moet dus ALLEEN het veld legen als er 'Vul in' staat, met een OnClick-handler, maar NIET als er gewoon een voor- of achternaam instaat.

Iemand enig idee?

 

[Johantrax]

je kan bvb volgende js-functie aanmaken:

function maakLeeg(id)
{
    if (document.getElementById(id).value=="Vul in")
	document.getElementById(id).value = "";
}

en dan bij een input dit gebruiken:

<input type="text" name="voornaam" id="voornaam" value="<%= voorbeeld %>" size="30" onFocus="maakLeeg('voornaam');" />

waarom onFocus? die werkt ook wanneer mensen mbv de TAB-key in het vak terechtkomen

--Johan

 

[SvU]

je kan bvb volgende js-functie aanmaken:

function maakLeeg(id)
{
    if (document.getElementById(id).value=="Vul in")
	document.getElementById(id).value = "";
}

en dan bij een input dit gebruiken:

<input type="text" name="voornaam" id="voornaam" value="<%= voorbeeld %>" size="30" onFocus="maakLeeg('voornaam');" />

waarom onFocus? die werkt ook wanneer mensen mbv de TAB-key in het vak terechtkomen

--Johan

Werkt super!

Nu loop ik alleen tegen het volgende probleem aan. Ik wil, met usability in ogenschouw genomen, de formuliercheck clientside, in plaats van serverside, doen.

Het probleem dat dat oplevert, is als volgt. In m'n verwerkingspagina (oftewel: de locatie waarnaar het POST-gedeelte van m'n formulier verwijst) checkt met if-statements (enzo) of de velden gevuld zijn. Zo niet, wordt het hele zootje teruggestuurd naar de browser, en vraag ik dus op 'wat er gebeurd is', uit de link.
De link wordt als volgt opgebouwd:

		response.sendRedirect("klanterror.jsp?error=numberformatexception&voornaam="+ Voornaam+

Daarna komen alle andere variabelen.

Vervolgens verwerk ik op klanterror.jsp ze op de manier uit de openingspost, dus met een request. Daarna komen dus alle if-statements, waarin de variabelen (indien leeg) op 'Vul in' worden gezet.

Dat moet ik dus allemaal clientside gaan doen. Uiteindelijk wil ik toe naar een formulier zonder errorpagina die erachter hangt, maar het gewoon veel efficiënter op één pagina doen.

Dus even de doelstelling in het kort:

[pseudo]
<form>
<voornaam>
<achternaam>
etc.
<submit>
[ Voornaam is niet ingevuld. Voornaamveld.setText("Vul in"). ]
<script>
<document.bla>
<form>
<voornaam>
<achternaam>
etc.
<submit>
[/pseudo]

Zoiets moet ik dus zien te bereiken, inclusief naar de 'Vul in'-waarde veranderende variabelen. Ik gebruik nu dus 3 formulieren (het originele, een formulier als niet alles is ingevuld en een formulier bij een NumberFormatException).

Dat moet allemaal in één formulier komen, maar de manier om dat te bereiken weet ik niet.

Heb jij een idee?

 

[SvU]

Ik ben inmiddels wat verder, maar één ding lukt nog steeds niet. Het invullen van het leeggelaten veld met 'Vul in', dat is eigenlijk het enige dat nodig is. Verder heb ik wel gewoon een formuliervalidatiescript (galgje).

Iemand?

 

[SvU]

Gelukt, bedankt nog kerel!

[Oplossing:

function checkform ( form )
{

  if (form.email.value == "") {
    form.email.value="Vul in";
    form.email.focus();
    return false ;
  }

  return true ;
}