Yardley, Saturday 12 January 2002
How does one put multiple buttons, with different functions, in one HTML form?

Most forms have only one button. This button submits the form and that's it, simple enough. But how does one code the screen below?

Screen for project planning with many buttons.
Every button offers distinctive functionality, plans a day in hours for a unique combination of project, employee and day.

Of course, I could embed every button in a separate form. However that would generate extraneous HTML code, resulting in a slower download.

After listening to the much appreciated advice of a javascript guru the solution is very simple:

  1. Create one form with one set of hidden input fields, with empty values: <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. Generate buttons calling a javascript function using a bunch of parameters. ... <button type="submit" onclick="setPlanning( '20020111', 'planning demo bouwen', 'Henk Jan', '4');">4</button> ... </form>
  3. A click on a button will post the form. But only after the javascript function has assigned the right values to the hidden input fields: <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>
Till next week, back in Holland,
Special thanks to Pangaeainc's (pangaeainc.com) javascript guru Terry Schmidt for his advice.