checkboxes and one input gives too many if and else statements, how to REDUCE?

Question

I have the following problem.

I have a page built with (html and javascript) that contains 4 checkboxes(lunch, diner, meet, rest), one input field(placename) and a go to next page button. These checkboxes and input field are all optional, they can also be left blank/unselected.

If I click the button and go to the next page there will be, genereted from javascript, a list that comes from a hardcoded json:

var myData = [ {
                 "Name" : "Bla",
                 "Placename" : "Amsterdam",
                 "lunch" : "true"
               },
               {
                 "Name" : "Bla2",
                 "Placename" : "Paris", 
                 "lunch" : "false",
                 "diner" : "true"
               },
               {
                 "Name" : "Bla3",
                 "Placename" : "London",
                 "meet" : "false",
                 "diner" : "true"
               },
               {
                 "Name" : "Bla4",
                 "Placename" : "Berlin"
               }];

The idea now is that I check which checkbox is selected and/or a placename is inserted I do this as follows:

 if(placename == ""){ 
    check json without checking placename..
 }else{
   if( ((lunchCheckbox == checked) && (element.lunch == "true")) && (Placename == element.Place)){ }

But the problem here is that now there will be many if statements, is there a way to do this better(with less statements)..

I thought about a loop but want to know if there are better ways

Answer 1

I write this code for the moment. I limit the statement number to two. If some things are missing, I will add it.

HTML :

<div class="form">
  Lunch : <input type="checkbox" id="lunch" class="detail"/>
  Diner : <input type="checkbox" id="diner" class="detail"/>
  Meet : <input type="checkbox" id="meet" class="detail"/>
  Rest : <input type="checkbox" id="rest" class="detail"/>
  </br>
  Placename : <input type="text" id="placename" class="detail"/>
  </br></br>
  <button id="next">next</button>
  </br></br>
  response
  </br>
  <textarea rows="30" cols="30" id="response"></textarea>
</div>

JS :

$(document).ready(function(){
    $("#next").click(function(){
        var json = {};

        $("input.detail").each(function(index, element){
          var el = $(element);

          if(el.attr("type") == "checkbox")
            json[el.attr("id")] = el.is(":checked");
          else if( el.attr("type") == "text" && el.val() != "")
              json[el.attr("id")] = el.val();
        });

        $("#response").val( JSON.stringify(json, undefined, 2) );
    });
});

Here there is a Jsfiddle example.

Answer 2

Yes, you could use a loop for all those conditions. However, you still need those conditions in an array or like, so if you can't build them programatically it makes no difference to your current code. Please describe a programmatic way so I can show you some example code.

Answer 3

I think this will solve the problem:

If you have forexample four checkboxes called: A,B,C,D. Then a solution would be to make bits of these.. so for example A = 0 or 1 B = 0 or 1 etcetera.. Then combine these bits with eachother and then you get like 0000 which would mean ABCD are all false, or 0001 only D is true. Afterwards you could save this as a string like TotalBits = "0000". Then you do this also with the json parameters lunch="true" = 1 and save the total bits in TotalBits2 for example, at the end you check if the bits are the same and here you go :)

so for example if you code it...

var aBit;
var bBit;
var cBit;
var dBit;

if(a == true){aBit="1"};
if(b == true){bBit="1"};
if(c == true){cBit="1"};
if(d == true){dBit="1"};

var totalBits1 = a+b+c+d; //which results in "1111"

Then the same for the lunch, for example:

 var lunchBit;
 if(element.lunch == "true"){ lunchBit="1";};
 etcetera..

 var totalBits2 = lunchbit+dinerbit+.....; //which results in for example 1000..

in the end check if totalBits1 == totalBits2 then produce result ..