Some Scripts being Ignored? Please Help :(

I am working on a small project and its kicking my butt. Basically I have 2 simple scripts that alone work fine but when together one of them will not work. I am having trouble finding the issue so can't really narrow it down too far but I will do my best.

There is a form that has a specific flow but not working as expected:
1. Select Request type "music" then select Department "premier sales"
2. this will include the music form from an external file and enable a disabled option of "custom" in the "choose a music request type" dropdown.
3. when selecting "custom" as an option it should show related fields that are hidden by default but alas is not.

That final script at the end of the .js file in the project below works fine by itself but not in the project.

You can find the project files at https://github.com/BrandonOrndorff/MoodRequest Please let me know if more details are needed but it's very hard to narrow this down to a specific question.

Any help would be greatly appreciated as I am at a loss.

 

There's like 5 HTML files which one has the problem?
Also it seems like you are using some sort of grid framework (bootstrap?) but it doesn't seem that you are loading the css grid framework.. It's kind of hard to troubleshoot it without functioning html files or knowing which one to look at...

Oh and.... you really don't need jquery to do very very simple show/hide javascript functionality.

 

@NetStar four of those .html files are being ajaxed into the index. Which yes, makes the page inaccessible for some users like all "scripting only" websites and is why for conventional content -- even tabbed interfaces -- it is NOT a great choice when it comes to site building.

That said, whenever people wonder how I can say "The only thing you can learn from frameworks like bootcrap and jquery is how NOT to build a website", I only need point at code like this to explain why. The bloated train wreck "DIV soup" in there is bad enough, likely resulting in ten times or more the markup needed to do the job... but figure in the gibberish/nonsensical use of numbered headings, "PLACEHOLDER is NOT a LABEL", "OPTION is NOT a LABEL", lack of LABELs and FIELDSET, etc, etc, etc, it's painfully apparent that -- much like bootcrap itself -- those who wrote that HTML are unqualified to write HTML.

... and that's just the includes, the index.html is worse, what with it basically being the bleeding edge of HTML 3.2 with the use of CENTER tags and static style in the markup.

I'm not 100% certain what it's trying to accomplish, but if code like this is the 'norm' for it:

  <div class="layout container-fluid">
    <div class="row">
      <div class="grid-layout-col">
        <div class="layout-col col-sm-12 col-xs-12">
          <div id="formElement0" class="elq-field-style form-element-layout row">
            <div class="col-sm-12 col-xs-12">
              <div class="row">
                <div class="">
                  <div style="text-align:left;">
                    <h4 class="elq-heading form-element-form-text">
                      General
                    </h4>
                  </div>
                </div>
              </div>
              <div class="form-element-instruction">
                All fields in this section are required.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

Code (markup):

Pitch the entire mess in the trash and start over. There is NOTHING worth salvaging from that. I mean seriously, if there's only one item per "row" what's all the DIV even for?

If I were to write a similar page, first thing I'd do is clean up the markup and then put it all into one page. I would then fake the appearance of a SELECT using anchors with hash links, then use :target to show/hide the appropriate subsections as a single monolithic page. From what I'm seeing I'm not even certain there's anything to warrant the PRESENCE of JavaScript, much less the train wreck of mental enfeeblement that is jQuery.

Which given the content shouldn't even take more markup for ALL the subpages combined than any single one of your current subpage.html files takes. It may even be smaller.

THIS is why front end frameworks are incompetent trash that only make you work harder, not smarter! In the process likely taking many, MANY more times to create your pages. As I've said hundreds of times on these forums, garbage like bootcrap and jquery are not simpler, faster, or easier for any real website and only sucker you into THINKING they are easier because everyone claims it is. Bandwagon -- one of the ugliest and most powerful methods of propaganda.