Adding other functions between Jquery calls

Question

Below you will find code for the program. Basically, I have jQuery calls that fades in and out divs. However, before Jquery fades out and fades in another div, I'd like to check form validation and user input.

My question is, how do I properly add other functions in between the Jquery, like I have done so for validateForm(); & validatePostalCode(); ?

JQUERY

<script type="text/jquery>
    $(document).ready(function() {
        $("#welcome").fadeIn('fast');

        $('#forward').click(function(e) {
            $('#welcome').fadeOut('fast', function() {
                $('#service').fadeIn('fast');
            });
        });

        $('#previous-service').click(function(e) {
            $('#service').fadeOut('fast', function() {
                $('#welcome').fadeIn('fast');
            });
        });

        $('#next-service').click(function(e) {
            postalCode();
            validatePostalCode(true);
            $('#service').fadeOut('fast', function() {
                $('#match').fadeIn('fast');
            });
        });

        $('#previous-match').click(function(e) {
            $('#match').fadeOut('fast', function() {
                $('#service').fadeIn('fast');
            });
        });

        $('#next-match').click(function(e) {
            $('#match').fadeOut('fast', function() {
                $('#information').fadeIn('fast');
            });
        });

        $('#previous-information').click(function(e) {
            $('#information').fadeOut('fast', function() {
                $('#match').fadeIn('fast');
            });
        });

        $('#next-information').click(function(e) {
            validateForm();
            $('#information').fadeOut('fast', function() {
                $('#confirmation').fadeIn('fast');
            });
        });

JAVASCRIPT

<script type="text/javascript">
    function validateForm() {
        var x = document.forms["#information"]["#first_name"].value;
        if (x == null || x == "") {
            alert("First name must be filled out");
            return false;
        }
    }

    function validatePostalCode() {
        var x = document.forms["#serviceForm"]["#postal"].value;
        if (x == null || x == "") {
            alert("Oops, the postal code must be filled out!");
            return false;
        }
    }
</script>

<script type="text/javascript">
    function postalCode() {
        var text = document.getElementById('postal').value;
    }
</script>

HTML

<form id="informationForm" action="" onsubmit="return validateForm()" method="">
    <div class="form-group">
        <label for="first_name">First Name</label>
        <input type="text" class="form-control" id="first_name" autofocus required>
    </div>

marc_s · Accepted Answer · 2016-06-06 16:40:52Z

1

jQuery is also javascript.

You can add as much javascript as you like between the <script></script> tags.

Example:

<script>
  function normalJavascript(){
     alert("hello i am js");   
  }

  $(function(){
    alert("I am the jQuery on page ready function");
    normalJavascript();
  }
</script>

edited Jun 6, 2016 at 16:40

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered May 9, 2016 at 11:30

locomain

1951 silver badge16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ColeGauthier Over a year ago

I will concatenate all the files together after I fully review the function of everything. Makes it easier for me for development! Thank you :)

Collectives™ on Stack Overflow

Adding other functions between Jquery calls

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related