0

I have a webpage that includes a submit button that I'm using to call a JQuery function to change the html of a

element within the page.

The javascript works fine, but for some reason after the submit button is pressed the page resets back to its initial state before the submit button is pressed. This results in the

element's html being changed for a millisecond before going back to its original text. Why is this happening?

<!doctype html>
<html>



<head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="960styling.css" id="stylesheet">   
    <script src="jquery-3.1.1.js"></script>
</head>

<script type="text/javascript">

    $(document).ready(function(){

            $("#errorMessage").html("start");

            $("#registerSubmit").click(function()
            {
                $("#errorMessage").html("working");

            });


    });

</script>



<div id="wrapper">
<body>



    <div class="headerBar">

        <img id="logo" src="./res/logo.png"/>
        <ul class="menu">
            <li><a href="index.html" accesskey="h">Home</a></li>
            <li><a href="events.html">Events</a></li>
            <li><a href="pastEvents.html" accesskey="o">Past Events</a></li>
            <li><a href="about.html" accesskey="c">About Us</a></li>
            <li><a href="form.html" accesskey="a">Contact Us</a></li>

        </ul>

        <a id="loginLink" href="login.html">Login</a>




    </div> <!-- end headerBar -->


    <div class="promoArea">
        <img id="bigLogo" src="./res/bigLogoBlack50.png"/>
    </div>




        <p id="errorMessage"></p>

        <form id="userCreate" name="userCreate">
            <ul class="createForm" id="createForm"> <!--username email password  forename surname   confPassword terms promo dob-->
                <li>
                    <label>Username <span class="required">*</span></label>
                    <input type="text" name="registerUsername" class="longfield" placeholder="Username"/>&nbsp;
                </li>

                <li>
                    <label>Email <span class="required">*</span></label>
                    <input type="email" name="registerEmail" class="longfield" placeholder="Email"/>
                </li>

                <li>
                    <label>Confirm Email <span class="required">*</span></label>
                    <input type="email" name="registerConfEmail" class="longfield" placeholder="Confirm email"/>
                </li>

                <li>
                    <label>Password <span class="required">*</span></label>
                    <input type="password" name="registerPassword" class="longfield" placeholder="Password"/>
                </li>

                <li>
                    <label>Confirm Password <span class="required">*</span></label>
                    <input type="password" name="registerConfPassword" class="longfield" placeholder="Confirm password"/>
                </li>

                <li>
                    <label>Full Name <span class="required">*</span></label>
                    <input type="text" name="registerForename" class="splitfield" placeholder="First" />&nbsp;
                    <input type="text" name="registerSurname" class="splitfield" placeholder="Last"/>
                </li>

                <li>
                    <label>Date of Birth <span class="required">*</span></label>
                    <input type="date" name="registerDob" placeholder="Date of birth"/>

                <li id="nameFields">
                    <label id="termsLabel">Do you agree to the terms and conditions? <span class="required">*</span></label>
                    <input type="checkbox" name="registerTerms" class="checkbox" placeholder="checkbox"/> 
                </li>

                <li>
                    <label id="promoLabel">Do you wish to recieve promotional material? <span class="required">*</span></label>
                    <input type="checkbox" name="registerPromo" class="checkbox" placeholder="checkbox"/> 
                </li>

                <li>
                    <input id="registerSubmit" type="submit" value="Submit" />
                </li>

                <p id="signinMessage">Already registered? <a href="#" id="createFormLink">Sign In</a></p>
        </ul>
        </form>










</body>
</div>




</html>
  • use e.preventDefault() inside your click handler – Cruiser Mar 02 '17 at 18:43
  • Why do I need to use this exactly? What's causing the reset to happen? Also, why e? Just trying to understand the problem a bit more. –  Mar 02 '17 at 18:44
  • when you have a button of type submit, its default behavior is to submit the form, which will either reload the page, or go to a return url if that's set. if you want to override this, you'll need to use preventDefault() – Cruiser Mar 02 '17 at 18:45
  • What do I need to replace 'e' with in the function call? –  Mar 02 '17 at 18:46

0 Answers0