CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Jae Kim
Jae Kim

Reputation: 665

Form submission prevention not working

So I read here: https://api.jquery.com/submit/ that I can do this

$("#validationForm").submit(function(event) {
    event.preventDefault(); 
    alert('test');
});

in order to prevent the form to be submitted when the submit button is clicked. However, for whatever reason it is not working and I have no idea why. I tried to delete everything except for two inputs and tried pressing the submit button but it still didn't alert me. Anybody know how to fix this? Here is the rest of my code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="jQuery.min.js"></script>
<script type="text/javascript">

$("#validationForm").submit(function(event) {
    event.preventDefault(); 
    alert('test');
});

</script>

<body>   
    <div>
        <h1 id="header" align="center">    </h1>
    </div>
    <div id="wrapper1">
        <div>
            <a class="info" id="hvr-float" p style="font-size:30px" href="javascript:void(0);">About Website</a>
            <h1 class="infoText" style="display:none">Text</h1>
        </div>
        <div>
            <a class="info" id="hvr-float" href="javascript:void(0);">Dear Friends</a>
            <h1 class="infoText" style="display:none">Text</h1>
        </div>
        <div>
            <a class="info" id="hvr-float" href="javascript:void(0);">Dear Reader</a>
            <h1 class="infoText" style="display:none">Text</h1>
        </div>
        <div>
            <a class="info" id="hvr-float" p style="font-size:30px" href="javascript:void(0);">The People</a>
            <h1 class="infoText" style="display:none"></h1>
        </div>
        <div>
            <a class="info" id="hvr-float" p style="font-size:30px" href="javascript:void(0);">Sign Up</a>
            <div id="wrapper2" style="display:none">
                <form id="validationForm">
                    <input class="infoPlaceholder" name="firstName" placeholder="First Name"/>
                    <input class="infoPlaceholder" name="lastName" id="addRightMargin" placeholder="Last Name"/>
                    <input class="infoPlaceholder" name="email" placeholder="Email"/>
                    <input class="infoPlaceholder" name="city" placeholder="City"/>
                    <input class="infoPlaceholder" name="state" placeholder="State"/>

                    <p></p>
                    <div id="wrapper3">
                         <div style="float:left" id="hvr-float">
                            <a class="supportWhoText" id="elderlyButton" href="javascript:void(0);">Elderly</a>
                            <div class="eacQuestion" id="elderlyText" style="display:none">How many elderly?</div>
                            <div>
                                <input class="countBoxes" id="elderlyBox" style="display:none" name="elderlyCount" placeholder="#"/>
                            </div>
                        </div>
                        <div style="float:left" id="hvr-float">
                            <a class="supportWhoText" id="adultButton" href="javascript:void(0);">Adults</a>
                            <div class="eacQuestion"id="adultText" style="display:none">How many adults?</div>
                            <div>
                                <input class="countBoxes" id="adultBox" style="display:none" name="adultsCount" placeholder="#"/>
                            </div>
                        </div>
                        <div style="float:left" id="hvr-float">
                            <a class="supportWhoText" id="childrenButton" href="javascript:void(0);">Children</a> 
                            <div class="eacQuestion" id="childrenText" style="display:none">How many children?</div>
                            <div>
                                <input class="countBoxes" id="childrenBox" style="display:none" name="childrenCount" placeholder="#"/>
                            </div>
                        </div>
                    </div>
                    <div style="float:left">
                        <textarea class="comments" name='comment' id='comment' placeholder="Comments"></textarea>
                    </div>
                    <div style="float:right" id="hvr-float">
                        <input type="submit" id="submitButton"  value="Submit" />
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>

I know my code is like super nasty... This is my first website that I am building. Please help! I am so lost!

Upvotes: 0

Views: 50

Answers (2)

Pranav C Balan
Pranav C Balan

Reputation: 115222

Put your code within $( document ).ready() handler

$(document).ready(function(){
    $("#validationForm").submit(function(event) {
        event.preventDefault(); 
        alert('test');
    });
});

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).load(function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready. ( Taken from : https://learn.jquery.com/using-jquery-core/document-ready/ )

Upvotes: 4

Tushar
Tushar

Reputation: 87203

This can be seen from your code that the code is in head element. So, when the page is loaded the script is executed when the form is not yet available in the DOM. To wait for the DOM to finish loading, you can use ready.

So, you need to use ready

$(document).ready(function () {
    $("#validationForm").submit(function (event) {
        event.preventDefault();
        alert('test');
    });
});

Or, you can also move the script at the end of body.

Upvotes: 2

Related Questions