CODEWITHSUNDEEP
javascriptjqueryhtml
Joe
Joe

Reputation: 675

Loop through javascript improvement

The below code works properly, but it is hard coded. I would like to be able to create an array of field sets, hide those fields, then each time I click on the "#createEventForm-eventInformation-addElement" button it displays the next one. The problem with the below code is that it is hard coded and thus would break easily and be much larger than using loops. Can someone help me make this better.

$("#fieldset-group1").hide();
$("#fieldset-group2").hide();
$("#fieldset-group3").hide();
$("#fieldset-group4").hide();
$("#fieldset-group5").hide();
$("#fieldset-group6").hide();
$("#fieldset-group7").hide();
$("#fieldset-group8").hide();
$("#fieldset-group9").hide();

$("#createEventForm-eventInformation-addElement").click( 
  function() { 
      ajaxAddEventInformation();
      if($("#fieldset-group1").is(":hidden"))
      {
          $("#fieldset-group1").show();
      }
      else
      {
          $("#fieldset-group2").show();
      }


   }
);

Upvotes: 4

Views: 257

Answers (6)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

You should use the ^= notation of the jquery selectors which means starting with ..

// this will hide all of your fieldset groups
$('[id^="fieldset-group"]').hide();

Then

$("#createEventForm-eventInformation-addElement").click( 
  function() { 
      ajaxAddEventInformation();
      // find the visible one (current)
      var current = $('[id^="fieldset-group"]:visible');
      // find its index
      var index = $('[id^="fieldset-group"]').index( current ); 
      // hide the current one
      current.hide(); 
      // show the next one
      $('[id^="fieldset-group"]').eq(index+1).show(); 
   }
);

Upvotes: 3

Felix Kling
Felix Kling

Reputation: 816334

How about to add (or only use) a class for that fields?

$(".fieldset").hide(); // hides every element with class fieldset

$("#createEventForm-eventInformation-addElement").click( function() { 
    ajaxAddEventInformation();
    // I assume that all fieldset elements are in one container #parentdiv
    // gets the first of all remaining hidden fieldsets and shows it
    $('#parentdiv').find('.fieldsset:hidden:first').show(); 

});

Upvotes: 0

ChaosPandion
ChaosPandion

Reputation: 78262

Here is one simple solution.

var index = 0;
var fieldsets = [
        $("#fieldset-group1").show(),
        $("#fieldset-group2"),
        $("#fieldset-group3"),
        $("#fieldset-group4"),
        $("#fieldset-group5"),
        $("#fieldset-group6"),
        $("#fieldset-group7"),
        $("#fieldset-group8"),
        $("#fieldset-group9")   
    ];    

$("#createEventForm-eventInformation-addElement").click(function() { 
    ajaxAddEventInformation();              
    fieldsets[index++].hide();
    if (index < fieldsets.length) {
        fieldsets[index].show();  
    }
    else {
        index = 0;
        fieldsets[index].show(); 
    }
});

Upvotes: 1

Josh Stodola
Josh Stodola

Reputation: 82483

This will show the first hidden fieldset element whose ID attribute starts with "fieldset-group"...

$("fieldset[id^='fieldset-group']:hidden:first").show();

Upvotes: 0

Per H
Per H

Reputation: 1542

Add a class 'fieldset' to all fieldsets, then:

$("#createEventForm-eventInformation-addElement").click( 
  function() { 
      ajaxAddEventInformation();
      $('.fieldset').is(':visible')
          .next().show().end()
          .hide();
   }
);

Upvotes: 0

Vincent Ramdhanie
Vincent Ramdhanie

Reputation: 103135

A quick idea.

Add a class to each fieldset lets say "hiddenfields". Declare a global variable to keep track of which field is shown.

  $(".hiddenfields").hide();//hide all
  var num = 0;//none shown

  $("#createEventForm-eventInformation-addElement").click( 
     function() { 
         ajaxAddEventInformation();
         num++;
         $("#fieldset-group" + num).show();
     }
  );

Upvotes: 3

Related Questions