By brauhaus on

Hi

I have created a webform with a few radio buttons, a few text fields and an email field. On the bottom of the form there is one last option: "No thank you,
I will not attend the event
I would like to receive the pressfolder"

It are checkboxes. What I'm looking for is a way to tell the form that when the first checkbox is selected the rest of the form (or even better, parts of it) should be reset. I've been looking all over for an answer but no luck. I'm quite new to php, but learning fast. Any tips?

thank you.

⋅ Categories: Drupal 6.x

Comments

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

Filling out a form happens on the client side (in the visitor's browser) which means that all php scripts have already finished their job (sending a web page to the visitor). In other words, what you want to do, cannot be done with php. Fortunately, there is javascript. Drupal has jQuery (a javascript library) built in, which means that you can code javascript behavior with only a couple of lines.
For more information, start reading http://api.drupal.org/api/file/developer/topics/javascript_startup_guide... and have a look at the jquery documentation at http://docs.jquery.com/, or feel free to ask further questions.

brauhaus’s picture

brauhaus commented

thank you!

brauhaus’s picture

brauhaus commented

ok, I tought I was getting close,

I found this http://drupal.org/node/192280, but it is not working for me, I think everything is installed (jquery update, php input filter), I've checked the id's with firebug... but I'm stuck. 

<?php
drupal_add_js (
  '$(document).ready(function(){
    $("#edit-submitted-neen-dank-u-Ik-zal-niet-deelnemen-aan-Free-The-Future").change(function(){
      if(this.checked) {
    $("#edit-submitted-kruis-aan-wat-voor-u-van-toepassing-is-ik-neem-graag-deel-aan-de-persconferentie").attr("disabled", "disabled");
    $("#edit-submitted-kruis-aan-wat-voor-u-van-toepassing-is-ik-wil-graag-een-interview-met-één-van-de-sprekers/panelleden").attr("disabled", "disabled");
    $("#edit-submitted-kruis-aan-wat-voor-u-van-toepassing-is-ik-zal-aanwezig-zijn-op-het-event-(presentaties-+-paneldiscussie)").attr("disabled", "disabled");
    $("#edit-submitted-kruis-aan-wat-voor-u-van-toepassing-is-ik-zal-aanwezig-zijn-op-de-walking-dinner").attr("disabled", "disabled");
    $("#edit-submitted-ik-ontvang-graag-simultaanvertaling-naar-het-Frans").attr("disabled", "disabled");
    $("#edit-submitted-ik-ontvang-graag-simultaanvertaling-naar-het-Nederlands").attr("disabled", "disabled");
    $("#edit-submitted-ik-ontvang-graag-simultaanvertaling-naar-het-Engels").attr("disabled", "disabled");
    $("#edit-submitted-ik-ontvang-graag-simultaanvertaling-naar-het-niet-nodig").attr("disabled", "disabled");

      }
      else {
    $("#edit-submitted-kruis-aan-wat-voor-u-van-toepassing-is-ik-neem-graag-deel-aan-de-persconferentie").removeAttr("disabled");
    $("#edit-submitted-kruis-aan-wat-voor-u-van-toepassing-is-ik-wil-graag-een-interview-met-één-van-de-sprekers/panelleden").removeAttr("disabled");
    $("#edit-submitted-kruis-aan-wat-voor-u-van-toepassing-is-ik-zal-aanwezig-zijn-op-het-event-(presentaties-+-paneldiscussie)").removeAttr("disabled");
    $("#edit-submitted-kruis-aan-wat-voor-u-van-toepassing-is-ik-zal-aanwezig-zijn-op-de-walking-dinner").removeAttr("disabled");
    $("#edit-submitted-ik-ontvang-graag-simultaanvertaling-naar-het-Frans").removeAttr("disabled");
    $("#edit-submitted-ik-ontvang-graag-simultaanvertaling-naar-het-Nederlands").removeAttr("disabled");
    $("#edit-submitted-ik-ontvang-graag-simultaanvertaling-naar-het-Engels").removeAttr("disabled");
    $("#edit-submitted-ik-ontvang-graag-simultaanvertaling-naar-het-niet-nodig").removeAttr("disabled");



      }
    });
  });'  
  ,'inline'
);
?>

It seems like the slash between the words "spreker/panelleden" and the "(" break the string.
The other lines work just fine.

any suggestions? tnx

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

it's not unlikely that those characters are the problem. Can you post a link? it's easier for me to help you if I see the page itself.

brauhaus’s picture

brauhaus commented

please take a look.

http://www.freethefuture.be/?q=inscriptions

http://www.freethefuture.be/?q=inschrijven

I got my English form working and part of my dutch form. De French one is a mess

when I want to submit I get this message
"An illegal choice has been detected. Please contact the site administrator. "
And it does not react at all to the jquery script.

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

I don't see a problem (in Firefox and Opera on Linux), did you fix it in the mean time, or didn't I look well enough?
Anyway, in the webform module, you can change a field's form key in the advanced settings fieldset at the bottom of the field edit page. By altering the form key, you can make those ID's much shorter and cut out all characters that are a possible problem.

brauhaus’s picture

brauhaus commented

If you visit
http://www.freethefuture.be/?q=inscriptions
and select one of the checkboxes under "no merci", the fields above should be disabled.
I'm using firefox and safari on a mac and it doesn't react.

If I'm right I can only alter the form field ID and not the form field component ID that is called in the javascript. And it seems that calling the Form field id does not work.

here is the adjusted code. 

<?php
drupal_add_js (
  '$(document).ready(function(){
    $("#edit-submitted-non-merci-Je-ne-participerai-pas-à-l\'événement-Free-the-Future").change(function(){
      if(this.checked) {
    $("#edit-submitted-keuzefr-je-souhaite-participer-à-la-conférence").attr("disabled", "disabled");
    $("#edit-submitted-keuzefr-je-souhaite-obtenir-une-interview-avec-l\'un-des-orateurs/invités").attr("disabled", "disabled");
    $("#edit-submitted-keuzefr-je-serai-présent(e)-à-l\'événement-(présentation-et-discussion)").attr("disabled", "disabled");
    $("#edit-submitted-keuzefr-je-serai-présent(e)-au-walking-dinner").attr("disabled", "disabled");
    $("#edit-submitted-vertalingfr-français").attr("disabled", "disabled");
    $("#edit-submitted-vertalingfr-neérlandais").attr("disabled", "disabled");
    $("#edit-submitted-vertalingfr-anglais").attr("disabled", "disabled");
    $("#edit-submitted-vertalingfr-pas-nécessaire").attr("disabled", "disabled");

      }
      else {
    $("#edit-submitted-keuzefr-je-souhaite-participer-à-la-conférence").removeAttr("disabled");
    $("#edit-submitted-keuzefr-je-souhaite-obtenir-une-interview-avec-l\'un-des-orateurs/invités").removeAttr("disabled");
    $("#edit-submitted-keuzefr-je-serai-présent(e)-à-l\'événement-(présentation-et-discussion)").removeAttr("disabled");
    $("#edit-submitted-keuzefr-je-serai-présent(e)-au-walking-dinner").removeAttr("disabled");
    $("#edit-submitted-vertalingfr-français").removeAttr("disabled");
    $("#edit-submitted-vertalingfr-neérlandais").removeAttr("disabled");
    $("#edit-submitted-vertalingfr-anglais").removeAttr("disabled");
    $("#edit-submitted-vertalingfr-pas-nécessaire").removeAttr("disabled");



      }
    });
  });' 
  ,'inline'
);
?>
marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

Those special characters, like the é, are indeed the problem. I did a quick test in Firefox+Firebug which showed that $("#edit-submitted-keuzefr-je-souhaite-obtenir-une-interview-avec-lun-des-orateurs-ou-invités"); did not return the object with that id, but after changing the id of that input to "edit-submitted-keuzefr-je-souhaite-obtenir-une-interview-avec-lun-des-orateurs-ou-invites", $("#edit-submitted-keuzefr-je-souhaite-obtenir-une-interview-avec-lun-des-orateurs-ou-invites"); seemed to work fine.

Have you already tried to edit the form keys as I suggested in my previous message? I think that simplifying those ID's is an important step in solving this. Another way to simplify your code would be to select a couple of inputs at once, for instance: $("#webform-component-keuzefr input") would select all input tags inside div#webform-component-keuzefr.

Using smarter selectors, your script could be as compact as this:

drupal_add_js (
  '$(document).ready(function(){
    $("#edit-submitted-non-merci-Je-ne-participerai-pas-à-l\'événement-Free-the-Future").change(function(){ // the selector on this line is still a problem!
      if(this.checked) {
        $("#webform-component-keuzefr input, #webform-component-vertalingfr input").attr("disabled", "disabled");
      } else {
        $("#webform-component-keuzefr input, #webform-component-vertalingfr input").removeAttr("disabled");
      }
    });
  });' 
  ,'inline'
);

However, I think you would still have to change the form keys to get rid of the special characters in "#edit-submitted-non-merci-Je-ne-participerai-pas-à-l\'événement-Free-the-Future".

brauhaus’s picture

brauhaus commented

thank you for your help,

I've solved it with a work around and created custom pages, where it is a lot easier to rename the componements.

elizas’s picture

elizas commented

STEP 1:

Disabling all elements including text, hidden, radio, checkbox, submit, textarea, select of form

$('form :input').attr('disabled','disabled');

Here i am selecting form by tag '
' without using any id or class of form.

STEP 2:

Disabling only input fields including text, hidden, radio, checkbox, submit of form

$('form input').attr('disabled','disabled');

STEP 3:

Disabling some particular inputs like only text fields or check boxes etc.

$('form input[type=text]').attr('disabled','disabled');
$('form input[type=text], input[type=checkbox]').attr('disabled','disabled');