Bs 3 modal form events with jquery

JavaScript
47

Okay, let’s fork this.

With codePen the HTML head and body sections are not used. It is only the content that goes inside the body that you put in the HTML section.

But what to do with CSS links and style scripts from the head? Those go in Settings, where you add them to the external code section.

You had multiple different versions of jQuery loading, so I’ve just gone with the most recent one and removed all the others.

You also have style sheets for main.css and myStyles-1b.css that can’t be found. Am I right to believe that those have been pasted in your contact page already?

External CSS

External JS

The CSS code currently mixed in with the HTML code should go in the CSS code panel.

The JS code currently mixed in with the HTML code should go in the JS panel.

Then we can use the code panel dropdown to format the HTML, CSS, and JS, and analyze each of them for problems.

The HTML has a problem on this line:

<input type="text" class="form-control check inputbgr_contact fst-name-field"
    name="First Name" firstName" placeholder="First Name">

Looking at the other code I can assume that firstName is supposed to be an id attribute instead.

The next problem is: Tag must be paired, missing: [ </div> ], open tag match failed [ <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> ] on line 402.

So another closing </div> tag is needed at the end of the code.

The next problem is: The id value [ row ] must be unique.

<footer id="row" style="z-index:2;">

You have a duplicate identifier? Those are supposed to be unique!
Did you mean to use class="row" instead?
The CSS does nothing with row, and I can’t find row in the JS code either, so I’m going to rename id="row" to class="row" even though I know nothing about what that changes.

The next problem is with break tags: Tag must be paired, no start tag: [ </br> ]

Here’s one of the problem lines:

          <address>Virtual Pizza Restaurant Ltd.</br>

Now good marks for using break tags where they are to be properly used, in addresses and/or poetry. There is no closing break tag though. It should be <br> just by itself.

The next problem is: Tag must be paired, missing: [ </button> ], start tag match failed [ <button type="button" class="btn1 buttonsocial"> ] on line 351.

                  <li><a href="#"></a>
                    <button type="button" class="btn1 buttonsocial">
                      <i class="fa fa-wordpress left" aria-hidden="true"> Wordpress</i>
                  </li>

It’s right. The button tag should be properly closed.

The next problem is: Please use space for indentation.

                      <textarea placeholder="Feedback" class="form-control check textarea_contact feedback-field" id="feedback" name="feedback" rows="12" required></textarea>

That’s getting kind of picky, but okay. The content inside of a textarea element is not modified when cleaning up code, so we can just close up with textarea element.

The next problem is: Duplicate of attribute name [ name ] was found.

                        <input type="text" class="form-control check inputbgr_contact zip-field" name="Zip code" name="Zip Code" id="ZipCode" placeholder="Zip Code">

That one is easy to fix, but is it a lowercase c or an uppercase C that should be used? The Phone Number elsewhere helps to resolve that problem, if things are to remain consistent.

That fixes all of the HTML problems, and leaves us with the fixed HTML code that’s shown at https://codepen.io/pmw57/pen/MWKLKBM

2 Likes