How to validate webform with JavaScript?

Question

I've got a Webform for which I need additional calculations to hidden fields.

I've added a JavaScript file to the page by using drupal_add_js. And let that be the only part that works...

My calculate.js file looks like this:

document.getElementById("webform-client-form-80").onsubmit = function() {
  window.alert("Test!");
  document.getElementsByName("submitted[aantal18plus]")[0].value = 5;
};

Why don't I get an alert? And why doesn't the value of "submitted[aantal18plus]" get altered?
If I change "document.getElementById("webform-client-form-80").onsubmit" to "document.onload", everything works. But unfortunately, there isn't any data yet (tried with windows.alert("");)

A bit more context:
The form is a subcription form for a BBQ. I Have 16 fieldsets (for 16 persons at once) with 4 dropdown menus (for choice of meat). A LOT of fields, and a lot of different prices. I want to calculate things like 'total' and 'number of steaks'. I want to send those in the submission e-mail, so I created 12 hidden fields, and I do need to calculate those values on submit.
I don't (necessary) need JQuery. At submit will do fine, 'cause the fields I'm altering are hidden.

Simply put: onsubmit, how on earth do I get it to work with javascript in drupal??

Answer 1

You can create a custom module for that:

1. webfv.info
2. webfv.module
3. webfv.js

Put all these files into a folder called webfv.

This is the webfv.module file:

<?php
function webfv_form_comment_form_alter(&$form, &$form_state, $form_id) {
  if ($form['#id'] == 'webform-client-form-80') {
    $form['#attached']['js'][] = array(
    'data' => drupal_get_path('module', 'webfv') . 'webfv.js', 
    'type' => 'file',
  );
}
}

And this is the webfv.js file:

    (function($) {
      $(document).ready(function() {
      // Put your code here. //
      });
    }) (jQuery);

And of course, you should have a webfv.info file:

name = webfv
description = JavaScript Webform Validation
core = 7.x
files[] = webfv.module

Note: this is just one way of doing it, there are some other ways.