Skip to content

Instantly share code, notes, and snippets.

@vapidbabble

vapidbabble/index.html

Created January 19, 2018 02:55
Download ZIP

Revisions

  1. vapidbabble created this gist Jan 19, 2018.
    38 changes: 38 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,38 @@
    <html>
    <head>
    <title>jQuery Mini Challenge 3</title>
    </head>
    <body>
    <header>
    <h1>jQuery Click Events</h1>
    </header>
    <section>
    <article>
    <h3>.val()</h3>
    <p>The .val() method is primarily used to get the values of form elements such as input, select and textarea. When called on an empty collection, it returns undefined.</p>
    </article>
    <article>
    <h3>.click()</h3>
    <p>The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released. Any HTML element can receive this event.</p>
    </article>
    </section>
    <section>
    <h3>Login Form</h3>
    <form action="">
    <label for="email">Email</label>
    <input type="email" id="emailField">
    <br>
    <label for="password">Password</label>
    <input type="password" id="passwordField">
    <br>
    <button type="button" id="submit-button">Submit</button>
    </form>
    <br>

    </section>
    <footer>
    <p>Source: <a href="https://jquery.com/">www.jquery.com</a></p>
    </footer>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </body>
    </html>
    7 changes: 7 additions & 0 deletions jquery-101-mini-challenge-3.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    jQuery 101 - Mini Challenge 3
    -----------------------------


    A [Pen](https://codepen.io/johnmwise/pen/JMwXaq) by [John Wise](https://codepen.io/johnmwise) on [CodePen](https://codepen.io).

    [License](https://codepen.io/johnmwise/pen/JMwXaq/license).
    19 changes: 19 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    $(document).ready(function() {

    //1. Add a .click() event handler to the submit button using its id "submit-button" so that when the button is clicked, log to the console "Submit button was clicked"


    //2. In the event handler function, get the values the user enters in the email and password fields in the form so that when the submit button is clicked, log to console, the values from the input fields in the form.
    var btnClicked = function(){
    console.log("Submit button was clicked");
    var emailField = $("#emailField").val();
    console.log("User email is: " + emailField);
    var passwordField = $("#passwordField").val();
    console.log("User password is: " + passwordField);
    }


    $("#submit-button").click(btnClicked);

    })