CODEWITHSUNDEEP
javascripthtmljquery
Kaitlin Kelley
Kaitlin Kelley

Reputation: 3

Alert Message Does Not Display After User Clicks Submit

So I'm brand new to coding and I was trying to complete my first project on CodePen. I cannot get my js code to respond to my html. I believe I linked the js page to the html page correctly, I inserted Bootstrap with jquery, and I can't see where I'm writing the actual code wrong so I have no idea why it's not doing anything

$("#submit").click(function () ) {
  alert("Thank you for your message! I will respond as soon as I find somewhere with free wifi!");
  var userName = $("#userName").val();
  var userEmail = $("#userEmail").val();
  var userMessage = $("#userMessage").val();
}

$(".contact-header").hover(function () ) {
  $(".contact-header").css("color", "black");                          
}
body{
  background-color: burlywood;
  margin-left: 30px;
  margin-right: 30px;
}
h1, h6 {
  font-family: 'Lemon', cursive; 
  color: saddlebrown;
  text-align: center;
  }
  
  form {
  text-align: center;
  margin-top: 50px;
}

.input {
  background-color: silver;
  width: 300px;
  margin-bottom: 15px;
}

.message {
  height: 100px;
}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
   <link href="../styles/main.css" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Lemon&display=swap" rel="stylesheet">
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-info bg-secondary">
  <a class="navbar-brand" href="#"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="../index.html">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="resume.html">Resume</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="contact.html">Contact Me</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>
    <h1>Contact Me</h1>
    <p>Please feel free to send any questions or offers on my potential works! Make sure you include which piece you would be interested in purchasing. Serious inquiries only!</p>
    
    <form>
      <label for="userName"></label>
      <input type="text" id="userName" name="name" class="input" placeholder="Full Name"><br>
      <label for="userEmail" class="label"></label>
      <input type="email" id="userEmail" name="email" class="input" placeholder="Email Address"><br>
      <label for="userMessage" class="label"></label>
      <textarea type="text" id="userMessage" name="message" class="input message" placeholder="Message"></textarea><br>
      <input type="submit"></input>
    </form>
     
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="../scripts/main.js"></script>
  </body>
</html>

Upvotes: 0

Views: 1350

Answers (2)

JJ173
JJ173

Reputation: 281

Your event looks okay minus a couple of syntax errors.

Cleaned it up a bit:

$("#submit").click(function () {
  alert("Thank you for your message! I will respond as soon as I find somewhere with free wifi!");
  var userName = $("#userName").val();
  var userEmail = $("#userEmail").val();
  var userMessage = $("#userMessage").val();
})

$(".contact-header").hover(function () {
  $(".contact-header").css("color", "black");                          
})

As for your question about the alert. The $("#submit").click is perfectly fine with how you have written it. However, the button you are waiting for does not have the ID to match "submit".

In your form, you have this:

<input type="submit"></input>

However, to get the event to work correctly, you need to add an id attribute to it, so the JQuery can find the button correctly. Like so:

<input id="submit" type="submit"></input>

The logic behind that is your JQuery is looking for a HTML element with the id of "submit": $("#submit"). The # means it will search for an ID. Now if you did something like this: $(".submit") it would search for an element with the submit class. E:G:

<input class="submit" type="submit"></input>

Take a look at how to get your elements via JQuery if you need to here: https://learn.jquery.com/using-jquery-core/selecting-elements/

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337550

When debugging JS always open the console output of devtools, generally done by pressing F12, and check for errors.

In this case you have a few syntax issues:

  • The ) after the function definition is in the wrong place and should be removed.
  • There needs to be a ) after the event handler function body to close the submit() method call
  • There's no submit id on the button, so the event will not be bound. You need to add that id for this code to work
  • A better approach would be to use the submit event of the form element instead of the click of the submit button
  • Use CSS to change style when an element is hovered instead of JS, as the former performs much better.

With all that said, try this:

$("form").submit(function(e) {
  e.prebentDefault(); // stop the form submission while testing. Remove this line afterwards

  alert("Thank you for your message! I will respond as soon as I find somewhere with free wifi!");
  var userName = $("#userName").val();
  var userEmail = $("#userEmail").val();
  var userMessage = $("#userMessage").val();
})

.contact-header:hover {
  color: #000;
}

Upvotes: 1

Related Questions