Build it type form

I look after a website and the owner wants a “Build it” type page. I am wondering if it could be done in JavaScript but I have no experience with JavaScript and do not know what to search for.

Does anyone have any ideas how to do it or can point me in the right direction of what to look for?

There are eight models with about sixty parts and ten or so options.

Some parts and options are common to each model and the parts information will be in a MySQL database

                                             Model type

                                   LH Drive OR RH drive

                               Step control OR speed control

              Knobbly tyre OR Standard tyre OR Town and country tyre

                               Fixed axel OR swing arm axel

                                                  etc.

Hey Rubble,

So you want a page where a user can drag and drop parts into a specific order?

Have you seen any similar sites on the web which you could link to?

So you want a page where a user can drag and drop parts into a specific order?

Not quite that complicated Pullo; they just need to be check boxes or dropdowns.

The user would go to the page and there would be a dropdown list or check boxes listing each model - eight options.
The user would select a model and there would then be an option for LHD or RHD
When the user selects RHD or LHD there would be an option for the controller

At the moment I have built a check list in php but if the user picks a step controller they can also pick a speed controller but they do not need both. I have highlighted the line a different colour and put a css hover warning. But the user could still pick both ( the order will be stopped at the next page as I have a check that they do not need both ). There are two options for the speed controller which can not be used for the step controller.

I do not remember the link to my php form at the moment but that would give a bit more explanation.

I have attached a screen capture of my php version.
All the items on the green and white rows are standard; the first red row is an option/replacement for the first green row - do not buy both

The second red row ( remote box ) is an option you can have if you buy the speed control and the third row is an option if you buy the “remote box”.

I hope this explains things.

Hi there,

I think the best way to do this is to have your form render (as you have built the form already anyway), then hide the parts which are dependent on other parts, using JavaScript to display them only when necessary.

I understand that you have your validation taking place in PHP already, which is a good thing, as you then catch anyone who tried to place an order with JS disabled.

To this end, I have made you a small demo with two radio buttons.
Depending on which radio button you have selected then different sets of sub-optins are shown.
Also, anything that is hidden is disabled, so that it won’t get submitted along with the form (but you could just as easily uncheck it).

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <style>
      label{ 
        display: block; 
        padding: 4px;
      }

      #primary{
        margin-bottom: 10px;
      }
    </style>
  </head>

  <body>
    <form>
      <fieldset id="primary">
        <legend>Primary</legend>
        <label><input type="radio" name="primary" data-group="#subOptions1"> Option 1</label>
        <label><input type="radio" name="primary" data-group="#subOptions2"> Option 2</label>
      </fieldset>

      <fieldset id="secondary">
        <legend>Secondary</legend>
        <div id="subOptions1">
          <label><input type="checkbox"> Option 1a</label>
          <label><input type="checkbox"> Option 1b</label>
          <label><input type="checkbox"> Option 1c</label>
        </div>

        <div id="subOptions2">
          <label><input type="checkbox"> Option 2a</label>
          <label><input type="checkbox"> Option 2b</label>
          <label><input type="checkbox"> Option 2c</label>
        </div>
      </fieldset>
    </form>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
      function disable(selector){
        $(selector).hide();
        $(selector).find(":checkbox").each(function(){
          $(this).prop("disabled", true)
        });
      }

      function enable(selector){
        $(selector).show();
        $(selector).find(":checkbox").each(function(){
          $(this).prop("disabled", false)
        });

        if($("#secondary").is(":hidden")){
          $("#secondary").show();
        }
      }

      function handleRadioButtonChange(){
        var numChecked = $("#primary").find(":checked").length;
        
        if(numChecked === 0){
          disable("#secondary");
        } else {
          var showGroup = $(this).data("group"),
              hideGroup = $("#primary").find(":radio:not(:checked)").data("group");
          disable(hideGroup);
          enable(showGroup);
        }
      }

      var $radioButtons = $("#primary :radio");
      $radioButtons.on("change", handleRadioButtonChange);
      $radioButtons.trigger("change");
    </script>
  </body>
</html>

DEMO

I hope that helps.
Let me know if you have any questions.

Thank you Pullo that worked well and the site owner has not dismissed using it!

I will now have to think how to build the database tables to allow for it.

Hi Rubble,

I don’t understand why you would need to alter the database tables.

The way I envisaged this working, is to render the entire form, then hide bits of it, showing them where necessary.
If you are feeling adventurous however, you could also use ajax …

I don’t understand why you would need to alter the database tables.

At the moment I have one big table with an id, price etc. ( this contains every part for all eight models as about 40% are common to one or more models).
I also have an option column which currently is set at 1 or 0.

I then have a table with just the id’s from the above table for building each model.

I then join the two tables.

When the page is displayed if the option is 0 it just renders the info in a row, but if the option is set to 1 it changes the row background colour.
There is nothing to link the ID of the standard part to the option that can replace it.

I am having problems deciding on how to link the two or three options and have not decided on a suitable method yet.

How would you modify the code if you had two or three options on a page?

Well, the above was only a proof of concept so that you could see if it suited your needs.

If we want to add more groups and more options, we would need to make it more modular:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <style>
      label{ 
        display: block; 
        padding: 4px;
      }

      #primary{
        margin-bottom: 10px;
      }
    </style>
  </head>

  <body>
    <form>
      <fieldset id="primary">
        <legend>Primary</legend>
        <label><input type="radio" name="primary" data-group="#subOptions1"> Option 1</label>
        <label><input type="radio" name="primary" data-group="#subOptions2"> Option 2</label>
        <label><input type="radio" name="primary" data-group="#subOptions3"> Option 3</label>
        <label><input type="radio" name="primary" data-group="#subOptions4"> Option 4</label>
      </fieldset>

      <fieldset id="secondary">
        <legend>Secondary</legend>
        <div id="subOptions1">
          <label><input type="checkbox"> Option 1a</label>
          <label><input type="checkbox"> Option 1b</label>
          <label><input type="checkbox"> Option 1c</label>
        </div>

        <div id="subOptions2">
          <label><input type="checkbox"> Option 2a</label>
          <label><input type="checkbox"> Option 2b</label>
          <label><input type="checkbox"> Option 2c</label>
        </div>

        <div id="subOptions3">
          <label><input type="checkbox"> Option 3a</label>
          <label><input type="checkbox"> Option 3b</label>
          <label><input type="checkbox"> Option 3c</label>
        </div>

        <div id="subOptions4">
          <label><input type="checkbox"> Option 4a</label>
          <label><input type="checkbox"> Option 4b</label>
          <label><input type="checkbox"> Option 4c</label>
        </div>
      </fieldset>
    </form>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
      function hideAndDisableAllCheckboxes(){
        $("div[id^=sub]").hide();
        $(":checkbox").prop("disabled", true)
      }

      function showAndEnable(selector){
        $(selector).show();
        $(selector).find(":checkbox").prop("disabled", false)
      }

      function handleRadioButtonChange(){
        hideAndDisableAllCheckboxes();

        var showGroup = $(this).data("group");
        showAndEnable(showGroup);
      }

      var $radioButtons = $("#primary :radio"),
          subOptionsContainer = $("#secondary");

      $radioButtons.on("change", handleRadioButtonChange);

      subOptionsContainer.hide();
      $radioButtons.one("change", function(){
        subOptionsContainer.show();
      });
    </script>
  </body>
</html>

In this version, the options are unlimited, as long as they follow the established pattern.

HTH

Thank you for the example Pullo