Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Watch Video

Posted February 17, 2020 4:06pm by

My flash message won't appear at all after I hit my submit button

This is my code for jQuery and I know the function works because I checked with console.log and the click event handler works. Except when I try to display the flashMessage, the data from my form is submitted and disappears but there is no flash message. Someone please help me out, or give me an alternative. Anything is appreciated thank you.

$('#flashMessage').hide()

$('#submit').click(function() {
  $("#flashMessage")
    .slideDown(1000)
    .delay(3000)
    .slideUp();
});

February 19, 2020 2:39pm

Ryan Groom Steven Parker

I appreciate both of you guys trying to help me figure this out. I just tried Steven's most recent suggestion and it is still doing the same thing. When I hit submit, the data submits and gets sent to the spreadsheet and disappears from the form (as it should). But I am still not receiving the flashMessage when I submit. Could it possibly be due to the hide() method? I'm not sure anymore, Stevens code looked pretty solid to me.

February 19, 2020 4:34pm

Can you make a fresh snapshot of your workspace and post the link to it here?

February 20, 2020 12:00am

Steven Parker I'm using Atom for this project. I have a GitHub repo with all of the files. If you'd like, I can add you as a collaborator and you can check it out. Let me know :) Thanks again

February 20, 2020 12:55am

Did my last suggestion not do the trick?

And you could make the Github project publicly runnable and readable and post the link(s) here.

February 21, 2020 2:40pm

Steven Parker Here is a link to the repo I just made so that I can share this with you, let me know if you figure out why it's still not displaying! :)

https://github.com/lukasarich/Public-Web-Files

4 Answers

February 17, 2020 4:19pm

Luka Sarich There is not necessarily enough code here to determine the problem. I tested it and it worked for me, however, without seeing your code I can only make some potential suggestions based off of commonly made mistakes: First of all make sure that the submit button in your index.html file has an id="submit". I noticed you decided to use "#submit" rather than "#previewButton" which was the original id of the button. If it is logging to the console still, then this should not be your issue. My other suggestion is to make sure all your ids match in terms of letter casing (upper and lower) because ids and references to ids are case-sensitive. My last suggestion would just be to try and refresh your page and try again. If you are on a Mac use "cmd shift R" and on Windows "ctrl R". If none of these solutions work, add another comment with your index.html code so that I can compare that to your JavaScript code. I'll keep an eye out for your reply!

February 18, 2020 2:45pm

Hi Ryan, thanks for taking the time to look at my question and give me such a detailed response. All of the id's matchup and refreshing doesn't change anything. Here is my full HTML code for my entire form block, let me know if you find anything!! :)

<!-- Contact Footer -->
  <div class="" id="contactfoot">
    <a name="form"></a>

    <div id="flashMessage">
      Your information has been sent! Thank you!
    </div>

    <h1 class="ml-4 text-center">Connect</h1>
    <p class="ml-4 text-center">Submit the form below, and we will contact you. </p>
    <br>

    <form class="gform" method="POST" id="contactForm" action="https://script.google.com/macros/s/AKfycbz3bMAWQy5L0VMKznau2rwVj1KmbYab5XBkQ7jntsRJUSwInroh/exec">

      <div class="form-row ml-5 mr-5">

        <div class="col-md-4 mb-3">
          <label for="validationDefault01">Full name</label>
          <input type="text" name="name" class="form-control" id="validationDefault01" required>
        </div>

        <div class="col-md-4 mb-3">
          <label for="validationDefault02">Position</label>
          <input type="text" name="position" class="form-control" id="validationDefault02" required>
        </div>

        <div class="col-md-4 mb-3">
          <label for="validationDefaultUsername">School Name</label>
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text" id="inputGroupPrepend2">@</span>
            </div>
            <input type="text" name="school-name" class="form-control" id="validationDefaultUsername" aria-describedby="inputGroupPrepend2"
              required>
          </div>
        </div>
      </div>
      <div class="form-row ml-5 mr-5">
        <div class="col-md-6 mb-3">
          <label for="validationDefault03">City</label>
          <input type="text" name="city" class="form-control" id="validationDefault03" required>
        </div>
        <div class="col-md-3 mb-3">
          <label for="validationDefault04">State</label>
          <select class="custom-select" id="validationDefault04" required>
            <option value=""> </option>
            <option value="AL">Alabama</option>
            <option value="AK">Alaska</option>
            <option value="AZ">Arizona</option>
            <option value="AR">Arkansas</option>
            <option value="CA">California</option>
            <option value="CO">Colorado</option>
            <option value="CT">Connecticut</option>
            <option value="DE">Delaware</option>
            <option value="DC">District Of Columbia</option>
            <option value="FL">Florida</option>
            <option value="GA">Georgia</option>
            <option value="HI">Hawaii</option>
            <option value="ID">Idaho</option>
            <option value="IL">Illinois</option>
            <option value="IN">Indiana</option>
            <option value="IA">Iowa</option>
            <option value="KS">Kansas</option>
            <option value="KY">Kentucky</option>
            <option value="LA">Louisiana</option>
            <option value="ME">Maine</option>
            <option value="MD">Maryland</option>
            <option value="MA">Massachusetts</option>
            <option value="MI">Michigan</option>
            <option value="MN">Minnesota</option>
            <option value="MS">Mississippi</option>
            <option value="MO">Missouri</option>
            <option value="MT">Montana</option>
            <option value="NE">Nebraska</option>
            <option value="NV">Nevada</option>
            <option value="NH">New Hampshire</option>
            <option value="NJ">New Jersey</option>
            <option value="NM">New Mexico</option>
            <option value="NY">New York</option>
            <option value="NC">North Carolina</option>
            <option value="ND">North Dakota</option>
            <option value="OH">Ohio</option>
            <option value="OK">Oklahoma</option>
            <option value="OR">Oregon</option>
            <option value="PA">Pennsylvania</option>
            <option value="RI">Rhode Island</option>
            <option value="SC">South Carolina</option>
            <option value="SD">South Dakota</option>
            <option value="TN">Tennessee</option>
            <option value="TX">Texas</option>
            <option value="UT">Utah</option>
            <option value="VT">Vermont</option>
            <option value="VA">Virginia</option>
            <option value="WA">Washington</option>
            <option value="WV">West Virginia</option>
            <option value="WI">Wisconsin</option>
            <option value="WY">Wyoming</option>
          </select>
        </div>
        <div class="col-md-3 mb-3">
          <label for="validationDefault05">E-Mail</label>
          <input type="text" name="email" class="form-control" id="validationDefault05" required>
        </div>
      </div>
      <div class="form-group ml-5">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
          <label class="form-check-label mb-5" for="invalidCheck2">
            By Submitting this form you are agreeing to Wiz-Ed's terms and conditions
          </label>
        </div>
      </div>
      <button class="btn btn-primary center" type="submit" id="submit">Submit form</button>
      </form>

  </div>

  <!-- End Contact -->

February 17, 2020 4:29pm

Depending on what's in the HTML code (not shown here), the normal form behavior is likely overriding this handler.

You might need to prevent or delay the form behavior to allow the message to be displayed.

For more specific help, show all the code, preferably by making a snapshot of your workspace and posting the link to it here.

February 18, 2020 2:49pm

Hi Steven, I'm glad you commented on my post. I was kind of getting worried that you wouldn't be able to get to it. I shared the full HTML code above, how do you suggest that I delay the default form behavior? Thanks :)

February 18, 2020 5:50pm

You already have the delay, but you're attaching your handler directly to the button instead of the form. If you change it to respond to the submit event for the form, ~~the handler code (including the delay) will be performed before the actual submit occurs~~ (UPDATE: turns out that the entire effects chain is synchronous!):

$('#contactForm').submit(e => {
  $("#flashMessage")
    .slideDown(1000)
    .delay(3000)
    .slideUp();
});

Because the animation effects are synchronous, they may not finish before the page changes. So to guarantee they are seen, the real submit may need to be delayed.

Another tip: If you make your message hidden to start with by CSS instead of JavaScript, it will prevent the user from getting a quick peek at it as the page is loading.

    <div id="flashMessage" style="display:none">
      Your information has been sent! Thank you!
    </div>

February 21, 2020 7:22pm

In the latest code, I'm guessing it does work, but since it's synchronous with the default submit behavior, it doesn't have time to be seen. So perhaps the answer is to have the handler skip the default processing, but disable itself and then set a timer to click the button again after the animations have had time to run:

$('#contactForm').submit(e => {
  $("#flashMessage")
    .slideDown(1000)
    .delay(3000)
    .slideUp();
  $('#contactForm').off("submit");
  setTimeout(_=>{$('#submit').click();}, 5000);
  return false;
});

February 18, 2020 2:56pm

Luka Sarich Steven was right in this instance. The difference between your code and the code in the video is that your button is type="submit". When you set this type attribute, it provides the form submit button with its default behavior which is to send the form data. to prevent this behavior try setting up your function like this:

$('#submit').click(function(e) {
  e.preventDefault();
  $("#flashMessage")
    .slideDown(1000)
    .delay(3000)
    .slideUp();
});

Be sure to add the "e" in both spots in your function. It's representative of the event that occurs during click.

If this doesn't work, the only final solution I could think of would be that if this is your own code that you wrote in reference to this video, is it possible that you forgot to add the css file and its content from the video into your code?

February 18, 2020 3:19pm

Ryan, thanks again for the speedy reply. I've implemented your code into mine, and now the data inside the form elements don't disappear once submitted. I wrote this code before I tried to do the flashMessage jQuery. So the css isn't the problem. I set up the form to send data to a Google Spreadsheet once upon submission. After inserting your code, the data isn't being submitted to the spreadsheet, so I'm assuming the preventDefault method is preventing the submit type attribute from submitting the information. I have a git repo with all the source files to this website, I really can't figure out why it won't display, if the function works. Thanks again for your time

February 18, 2020 3:26pm

Luka Sarich Yes using preventDefault() will prevent your data from actually being submitted. The issue is that when you send form data, the page is going to refresh, that's just the behavior of it. The workaround for this issue would be for you to look into AJAX. So if you want your data to submit and you want to be able to see the submit message animation you'll need AJAX, because if the data submits without AJAX then the page will refresh and you'll never see the submit message animation because that means the JavaScript will reload. If adding the prevent default into your code still didn't make the submit message animation appear, then there is still something off with your code, and I will gladly look at it later when I'm not at work!

February 18, 2020 3:31pm

Awesome! I'm a work right now too, I'm definitely going to message you later when I get home. Thanks again, Ryan. Here is just a screenshot of the flash message when I remove the hide() method. https://imgur.com/a/9oSADQh

February 18, 2020 11:42pm

Luka Sarich Did Steven's most recent reply fix your issue? If not I'll take another look.

February 27, 2020 2:40pm

Steven Parker Ryan Groom

I hired a freelancer to take a look at the js file, to no avail, he is also having problems with it. He is asking me questions that I can't answer. Do you guys have any suggestions for what I should do or any references to somebody who can possibly help me take care of this stupid minor bug? I need to have this website done by the beginning of next week, so I'm kind of stressed. If you guys have anything that could help me out, let me know! Thanks :)

February 27, 2020 7:10pm

Did last Friday's suggestion not work? Make sure both the preview and source links are updated and I'll take another look.

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.