Buttons

Yardley, zaterdag 12 januari 2002
Hoe kan een HTML form meerdere buttons hebben, met verschillende functies?

De meeste forms hebben maar 1 button. Deze button submit het form en klaar, simpel zat. Maar wat te doen voor het scherm hieronder?

Scherm voor project planning met vele buttons.
Elke button heeft z'n eigen functionaliteit, maakt een dag planning in uren voor een unieke combinatie van project, medewerker en dag.

Ik kan natuurlijk elke button in een afzonderlijk form stoppen. Dat genereert echter nogal wat ballast aan HTML code, met een tragere download als gevolg.

Na wat welkome adviezen van een javascript goeroe is de oplossing simpel:

  1. Maak één form met één set van verborgen input velden met lege waardes: <form method="post" action="someUrl.php" name="form1"> <input type="hidden" name="date" value=""></input> <input type="hidden" name="project" value=""></input> <input type="hidden" name="employee" value=""></input> <input type="hidden" name="hours" value=""></input> ...
  2. Genereer buttons die een javascript functie aanroepen met een stel parameters. ... <button type="submit" onclick="setPlanning( '20020111', 'planning demo bouwen', 'Henk Jan', '4');">4</button> ... </form>
  3. Een klik op een button resulteert in een post van het form. Maar eerst zet de javascript functie de juiste waarde in de verborgen input velden: <SCRIPT LANGUAGE="JavaScript"> function setPlanning(date, project, employee, hours) { window.document.form1.date.value = date;   window.document.form1.project.value = project;   window.document.form1.employee.value = employee;   window.document.form1.hours.value = hours; } </SCRIPT>
Tot de volgende week, dan weer vanuit Nederland,
Henk Jan Nootenboom
Dank aan javascript goeroe Terry Schmidt van Pangaeainc (pangaeainc.com) voor z'n adviezen.