onChange

social_adsinc 15 Dec, 2011
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?
GreyHead 15 Dec, 2011
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
social_adsinc 27 Dec, 2011
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';
      } 
	  
  	});	
});
GreyHead 29 Dec, 2011
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
ist_04 16 Feb, 2012
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');
    }
  });   
});
This topic is locked and no more replies can be posted.