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() {
  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??


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:

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.

  • Same thing can also be implemented in a theme. – othermachines Aug 11 '15 at 9:03
  • @othermachines yes sure. This is just one way of doing it, there are some other ways. – herci Aug 11 '15 at 9:04
  • I really do appreciate the effort and you laid it out quite nicely. I've tried, but failed. I'm pretty new to modules, and even newer to JQuery. Yet this seems like a very elaborate way to add a javascript file to a webform. I added one by adding a drupal_add_js line to the webform_node_80.tpl.php (I believe it was). The problem I'm facing is that "onload" works without hesitation, but "onsubmit" doesn't. Ever. onload there isn't data to process yet, and onsubmit simply ignores me... – Frank Vermeulen Aug 11 '15 at 21:32
  • 1
    @herci Alright, I get it now. Due to my inexperience it took me a couple of hours to figure it out. But you were right! That is indeed the easiest way to get results. When I commented previously, I didn't understand the ways of the DOM structure; I didn't understand why.... Thanks for your input! – Frank Vermeulen Aug 12 '15 at 1:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.