Forums

Hi,

I'm trying to create a multi page form through show/hide multiple div containers based on a drop down. For few containers I've created events and it words fine but as the containers grow, it's harder to manage the events. I've tried adding multiple element ID's to single event but it doesn't work that way. Is there's a better way to hide multiple containers using a single event?

Hi anud06,

There really isn't enough information here to give you a 'best' answer.

Events based on a drop-down are fine if the form is fairly straightforward. They get much harder to manage if the for structure gets complex.

If you want to go to different pages based on the dropdown then you could have a firstpage with the drop-down then use an event switcher to show different pages after that.

Or you could use PHP to show/hide various containers on the later pages.

Or you could use JavaScript to manage the show/hide on a single page. If you need to hide multiple containers on the same page then I'd probably do that.

Bob

Hi Greyhead,

Thank you for your response.

I would like the JavaScript option too. Please let me know how and where to use JavaScript code to achieve that. Thanks again in advance.

Anushka

Hi,

I've added the bellow JS code to the load JavaScript and call it using select_div() function from the a drop down event but it doesn't work. Your guidance is highly appreciated

window.addEvent('domready', function() {
function select_div() {
  if (this.value == "form1")
    document.getElementById("div1").style.display="block";
    document.getElementById("div2").style.display="none";
  if (this.value == "form2")
    document.getElementById("div2").style.display="block";
    document.getElementById("div1").style.display="none";
  else
    document.getElementById("div1").style.display="none";
    document.getElementById("div2").style.display="none";
  }
});

Hi anud06,

You need to add some {} in there - it makes the code clearer and less prone to errors - and it's required if there is more that one line in the if statement (and you are also missing the } at the end of the function.

window.addEvent('domready', function() {
  function select_div() {
    if (this.value == "form1") {
      document.getElementById("div1").style.display="block";
      document.getElementById("div2").style.display="none";
    } else if (this.value == "form2") {
      document.getElementById("div2").style.display="block";
      document.getElementById("div1").style.display="none";
    } else {
      document.getElementById("div1").style.display="none";
      document.getElementById("div2").style.display="none";
    }
  };
});

I'd probably write this using jQuery but your version should be OK. Here's an example using a switch statement (not tested!!)

jQuery(document).ready(function(jQ){
  jQ('#form1').on('change', select_div);

  function select_div() {
    var val;
    val = jQ(this).val();
    switch ( val ) {
      case 'form1':
      jQ('#div1').show();
      jQ('#div2').hide();
      break;
    case 'form1':
      jQ('#div1').hide();
      jQ('#div2').show();
      break;
    default:
      jQ('#div1').hide();
      jQ('#div2').hide();
      break;
    }
  };
});

Bob

Hi GreyHead,

Thanks a lot and highly appreciate your guidance. After many attempts I was able to figure out that adding a JS- client validation is needed on the setup tab to get the JavaScript code to work otherwise the code doesn't execute. Also I had to modify the code as below to get it to work. For some reason, code with the "window.addEvent('domready', function()" did not work and gave an error of the firebug as function not defined. Moreover, on the if statement also, "this.value ==" did not work and had to use a variable to call on with the function. Now everything works and again, Thanks a lot for your support.

function select_div(type) {
    if (type == "form1") {
	  document.getElementById("div1").style.display="block";
	  document.getElementById("div2").style.display="none";
	  document.getElementById("div3").style.display="none";
	  
    } else if (type == "form2") {
	  document.getElementById("div2").style.display="block";
	  document.getElementById("div1").style.display="none";
	  document.getElementById("div3").style.display="none";
	  
    } else {
      document.getElementById("div3").style.display="block";
	  document.getElementById("div1").style.display="none";
	  document.getElementById("div2").style.display="none";
    }
  };