vapidbabble/index.html

## index.html
<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>

## jquery-101-mini-challenge-3.markdown

      
    Raw
  

              jquery-101-mini-challenge-3.markdown
            
          
    jQuery 101 - Mini Challenge 3

A Pen by John Wise on CodePen.
License.

  
## script.js
$(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);

})
	<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>
	$(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);

	})