CODEWITHSUNDEEP
javascriptjquery
danny26b
danny26b

Reputation: 463

Implementing a jQuery animated form

I'm new to Java and its modules and believe I have followed the instructions I have found to make this animated form and others run, yet I can't seem to make them work.

For the main sign-up form I'm using an template from https://codepen.io/atakan/pen/gqbIz/ and, after modifying the text a little, copied the elements to three files : /test.php - /index_style.css and javascript.js

The following codes are what I have :

<html>
    <head>
        <title>Flight One | Flying Passion</title>
        <link rel="stylesheet" href="/CSS/index_style.css" style="text/css">
        <link rel="stylesheet/less" type="text/css" href="/CSS/styles.less" />
        <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.0.0/less.min.js" ></script>
        <script src="/US/en/local/Ressources/Java/javascript.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <form id="msform">
                                    <!-- progressbar -->
                                  <ul id="progressbar">
                                    <li class="active">Account Setup</li>
                                    <li>Social Profiles</li>
                                    <li>Personal Details</li>
                                  </ul>
                                  <!-- fieldsets -->
                                  <fieldset>
                                    <h2 class="fs-title">Create your account</h2>
                                    <h3 class="fs-subtitle">This is step 1</h3>
                                    <input type="text" name="email" placeholder="Email" onkeypress="return isNumberKey(event)" />
                                    <input type="password" name="pass" placeholder="Password" />
                                    <input type="password" name="cpass" placeholder="Confirm Password" />
                                    <input type="button" name="next" class="next action-button" value="Next" />
                                  </fieldset>
                                  <fieldset>
                                    <h2 class="fs-title">Social Profiles</h2>
                                    <h3 class="fs-subtitle">Your presence on the social network</h3>
                                    <input type="text" name="twitter" placeholder="Twitter" />
                                    <input type="text" name="facebook" placeholder="Facebook" />
                                    <input type="text" name="gplus" placeholder="Google Plus" />
                                    <input type="button" name="previous" class="previous action-button" value="Previous" />
                                    <input type="button" name="next" class="next action-button" value="Next" />
                                  </fieldset>
                                  <fieldset>
                                    <h2 class="fs-title">Personal Details</h2>
                                    <h3 class="fs-subtitle">We will never sell it</h3>
                                    <input type="text" name="fname" placeholder="First Name" />
                                    <input type="text" name="lname" placeholder="Last Name" />
                                    <input type="text" name="phone" placeholder="Phone" />
                                    <textarea name="address" placeholder="Address"></textarea>
                                    <input type="button" name="previous" class="previous action-button" value="Previous" />
                                    <input type="submit" name="submit" class="submit action-button" value="Submit" />
                                  </fieldset>
                                </form>
    </body>
</html>

the CSS code I copied exactly as it is in the template and inserted the exact same java script into my javascript.js file.

When I use simple java functions like "upperCaseF(this)" it runs from the linked file but non of the other functions..

I have really looked around for a solution and still don't understand why it would run on their emulator but not on my side.

I'm using Sublime Text and MAMP but even when I upload it to my website it doesn't work either...

Thank you for your help!

Upvotes: 0

Views: 61

Answers (1)

KampfFussel
KampfFussel

Reputation: 137

You are loading your jquery code before you loaded the framework.

Your Header should look like this:

    <head>
    <title>Flight One | Flying Passion</title>
    <link rel="stylesheet" href="/CSS/index_style.css" style="text/css">
    <link rel="stylesheet/less" type="text/css" href="/CSS/styles.less" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.0.0/less.min.js" ></script>
    <!-- TODO Verify what version of jquery is needed -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- TODO Verify what version of jquery is needed -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

    <!-- loading custom jquery code here -->
    <script src="/US/en/local/Ressources/Java/javascript.js"></script>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Also, you should add a ready event to your custom code (in this case, because you are loading it in the header tag) like this (if you haven't already done so):

$(document).ready(function() {
    // TODO Add your jQuery code in here.
});

Upvotes: 1

Related Questions