Q:

jQuery or Javascript to grab submit form data and update ID text

UPDATED: 
-removed the . in front of alertText 
-updated the jQuery now being used, but still not working.

The goal is for the user to type something into the alert text field and have that update the alertText class, the current function is just trying to change the inner html on button click of the submit form because I can't even get that to work at the moment.
Hello I'm trying to make a form that enables someone to update a P ID text line when submitted.  I'm having a little trouble understanding how to grab the submitted text with jQuery in order to change the inner html of an ID tag.
Here is my HTML Doc,  I'm trying to update .alertText with whatever the user submits...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
</head>
<body id="menuStyle">

       <h1 class="title">Alerts</h1>

 <form id="alertForm">
 Alert:<br>
  <input type="text" name="alertInput" id="alertInpit">
  <br>
  Password:<br>
  <input type="text" name="alertPass" id="alertPass">
  <br><br>
  <input type="submit" value="Submit" id="subNow">
  </form>
  <!-- change me -->
       <p class="alertText"> </p>

   <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

       <script src="js/alert.js"></script>
       </body>
       </html>

Here is the jQuery I've started for it.
$(document).ready(function() {

var changeAlert = document.querySelector(".alertText");

/*
$('#alertForm').submit(function(ev) {
    ev.preventDefault(); 
    this.submit(); 
});*/

$( "#subNow" ).click(function(e) {
    e.preventDefault(); 
    changeAlert.innerHTML = "This is now updated";
});

});

A:

trying to update .alertText with whatever the user submits...

Try using event.preventDefault() within click event , .serializeArray() to return name , value of input child elements of form , Array.prototype.map() , Array.prototype.join()

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <title></title>
</head>

<body id="menuStyle">

  <h1 class="title">Alerts</h1>

  <form id="alertForm">
    Alert:
    <br>
    <input type="text" name="alertInput" id="alertInpit">
    <br>Password:
    <br>
    <input type="text" name="alertPass" id="alertPass">
    <br>
    <br>
    <input type="submit" value="Submit" id="subNow">
  </form>
  <!-- change me -->
  <p class="alertText"></p>

  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <script>
    $(document).ready(function() {

      var changeAlert = document.querySelector(".alertText");

      $("#subNow").click(function(e) {
        e.preventDefault();
        var res = $("form").serializeArray().map(function(input) {
          return input.name + ":" + input.value
        }).join(" ");
        changeAlert.innerHTML = res;

      });

    });
  </script>
</body>

</html>

