onChange

For drop down lists, can onChange="xxx();" only be added to the HTML code block? If so, how do you avoid it being cleared when you use the Form Wizard? If it can be added in the Wizard, where?

Hi social_adsinc,

Yes, it can. I think it would be useful to have an extra Attribute box for other attributes. Maybe in a future release Max will add it.

That said, you don't need it to add JavaScript actions. It's better practice to add them from the Load JS box instead:

window.addEvent('domready', function() {
  $('some_input_id').addEvent('change', function() {
    // add your script here
  });
});

Bob

Perfect! Thanx for the quick help!

To take it a step further, what if the same value calls the same Id? I currently cannot get the following code to work. A,B,C, & D_container_div starts with display:none. The "company" value sometimes has to display the same container_div. This works if 1 has A & B and 2 has C & D, but when they both need to display the same value, only 2 displays correctly. How can the code be set up to allow different companies to potentially display the same container_div?

window.addEvent('domready', function() {
document.getElementById("A_container_div").style.display = 'none';
document.getElementById("B_container_div").style.display = 'none';
document.getElementById("C_container_div").style.display = 'none';
document.getElementById("D_container_div").style.display = 'none';	
	
	$('company').addEvent('change', function() {
	if (document.getElementById("company").value == '1') {
		document.getElementById("A_container_div").style.display = 'inline';
		document.getElementById("B_container_div").style.display = 'inline';
		document.getElementById("C_container_div").style.display = 'inline';
		document.getElementById("D_container_div").style.display = 'inline';
      } else {
		document.getElementById("A_container_div").style.display = 'none';
		document.getElementById("B_container_div").style.display = 'none';
		document.getElementById("C_container_div").style.display = 'none';
		document.getElementById("D_container_div").style.display = 'none';
      } 
	  
	if (document.getElementById("company").value == '2') {
                document.getElementById("A_container_div").style.display = 'inline';
		document.getElementById("B_container_div").style.display = 'inline';
		document.getElementById("C_container_div").style.display = 'inline';
		document.getElementById("D_container_div").style.display = 'inline';
      } else {
		document.getElementById("A_container_div").style.display = 'none';
		document.getElementById("B_container_div").style.display = 'none';
		document.getElementById("C_container_div").style.display = 'none';
		document.getElementById("D_container_div").style.display = 'none';
      } 
	  
  	});	
});

Hi social_adsinc,

I think that the code logic is faulty. Please try:

window.addEvent('domready', function() {
  $("A_container_div").setStyle('display', 'none');
  $("B_container_div").setStyle('display', 'none');
  $("C_container_div").setStyle('display', 'none');
  $("D_container_div").setStyle('display', 'none');   
   
  $('company').addEvent('change', function() {
    if ( $("company").value == '1') {
      $("A_container_div").setStyle('display', 'inline');
      $("B_container_div").setStyle('display', 'inline');
      $("C_container_div").setStyle('display', 'inline');
      $("D_container_div").setStyle('display', 'inline');
    } else if ( $("company").value == '2') {
      $("A_container_div").setStyle('display', 'inline');
      $("B_container_div").setStyle('display', 'inline');
      $("C_container_div").setStyle('display', 'inline');
      $("D_container_div").setStyle('display', 'inline');
    } else {
      $("A_container_div").setStyle('display', 'none');
      $("B_container_div").setStyle('display', 'none');
      $("C_container_div").setStyle('display', 'none');
      $("D_container_div").setStyle('display', 'none');
    }
  });   
});

Bob

Bob, i had to set this aside. To get this to work i had to define each as inline or none. This now allows the user to pick various options in the drop down and have to show the appropriate content:

window.addEvent('domready', function() {
  $("A_container_div").setStyle('display', 'none');
  $("B_container_div").setStyle('display', 'none');
  $("C_container_div").setStyle('display', 'none');
  $("D_container_div").setStyle('display', 'none');   
   
  $('company').addEvent('change', function() {
    if ( $("company").value == 'Aqua Lung') {
      $("A_container_div").setStyle('display', 'inline');
      $("B_container_div").setStyle('display', 'inline');
      $("C_container_div").setStyle('display', 'inline');
      $("D_container_div").setStyle('display', 'none');
    } else if ( $("company").value == 'ArmorSource') {
      $("A_container_div").setStyle('display', 'none');
      $("B_container_div").setStyle('display', 'none');
      $("C_container_div").setStyle('display', 'inline');
      $("D_container_div").setStyle('display', 'inline');
    } else if ( $("company").value == 'ASP Inc/ Garrett Electronics') {
      $("A_container_div").setStyle('display', 'inline');
      $("B_container_div").setStyle('display', 'none');
      $("C_container_div").setStyle('display', 'none');
      $("D_container_div").setStyle('display', 'inline');
    } else {
      $("A_container_div").setStyle('display', 'none');
      $("B_container_div").setStyle('display', 'none');
      $("C_container_div").setStyle('display', 'none');
      $("D_2012_container_div").setStyle('display', 'none');
    }
  });   
});