Javascript - Code is running when I hit enter in input form

Question

So I had code written in my page that made it when you hit enter it would fire a function. I then removed the code and when I hit enter it would still fire the function. It made me really confused. I commented out like 90% of my code but it would still fire that function. Obviously if i removed the function it wouldn't fire it, add the function back, and kaboom, it fired again. Not sure why or how to prevent that

This is the link to my code:
https://codepen.io/zepold/pen/yapLkE

Also put the code here:

HTML

<div class="container">
  <div id="home">
    <h1 id="title">Wikipedia Search</h1> <br>
    <form>
      <div class="form-group center-block search">
        <!-- <input type="search" id="searchbar" class="form-control"/> -->

        <input type="search" id="searchbar" class="form-control homebar"/>
        <input type="search" id="searchbar" class="form-control resultsbar hidden"/>

      </div>
      <div class="form-group text-center">
        <button class="home-search">Search</button>
        <button class="results-search hidden">Search</button>
        <button id="luckybtn">I'm feeling lucky</button>
      </div>
    </form>
  </div>

  <div id="results" class="">

  </div>
</div>

CSS

body {
  margin-top: 5vh;
  background-color: #e2e1e0;
  overflow-y: scroll;
}

h1 {
  margin: 0px;
}

#home {
  width: 100%;
  height: 90vh;
  min-height: 300px;
  background-color: white;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

#title {
  text-align: center;
  font-size: 40px;
  padding-top: 25vh;
  padding-left: 25px;
  padding-right: 25px;
}

.search {
  width: 500px;
}

.cards {
  width: 100%;
  background-color: white;
  margin-top: 20px;
  margin-bottom: 20px;
  height: 150px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.cards > h2 {
  padding: 10px 0px 10px 10px;
  margin: 0px;
}

.cards > p {
  padding: 0px 0px 10px 10px;
  margin: 0px;
}

hr {
  margin: 0px;
}

@media screen and (max-width: 767px) {
  body {
    margin-top: 2vh;
    background-color: cyan;
  }

  #home {
    height: 96vh;
  }

  .search {
    width: 70%;
  }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
  body {
    background-color: red;
  }

  .search {
    width: 60%;
  }
}

@media screen and (min-width: 993px) and (max-width: 1200px) {
  body {
    background-color: green;
  }
}

@media screen and (min-width: 1201px) {
  body {
    background-color: orange;
  }
}

JAVASCRIPT

$(function() {
  $(".searchbar").focus();
  var searchTerm = "";
  var template = "<div class='cards'><h2><h2/><p><p/></div>"
  var resultsArray;

  /* Code that is supposed to fire function after hitting enter
  $(".homebar").keypress(function(e) {
    if (e === 13) {
      $(".home-search").click; 
    }
  });

  $(".resultsbar").keypress(function(e) {
    if (e === 13) {
      $(".results-search").click; 
    }
  });
  */

  $(".home-search").click(function(event) {
    event.preventDefault();
    searchTerm = $("#searchbar").val();

    for (var x = 1; x <= 10; x++) {
      $("#results").append("<div class='cards'></div>");
    }    

    postData(searchTerm);
    $("#home").animate({height: "200px"});   
    $("#title").animate({"padding-top": "10vh"})
    $(this).addClass("hidden");
    $(".homebar").addClass("hidden");
    $(".results-search").removeClass("hidden");
    $(".resultsbar").removeClass("hidden");
    console.log("home click success");

  })  

  $(".results-search").click(function(event) {
    event.preventDefault();
    searchTerm = $("#searchbar").val();
    postData(searchTerm);
    console.log("results click success");
  })

  function postData(term) {
    $.ajax({
      type: 'GET',
      url: '//en.wikipedia.org/w/api.php',
      dataType: 'jsonp',
      data: {
        action: 'query',
        list: 'search',
        srsearch: term,
        //srlimit: '15',
        format: 'json'
      },
      success: function(result) {
        console.log(result.query.search);
        $("#results").children().each(function(index) {
          $(this).html(searchTerm);
        }) 
      },
      error: function() {
        console.log("error");
      }
    })
  }
})

My _guess_ would be that the browser is simply interpreting your keypress of enter inside the form element as an attempt to submit the form. In the absence of a proper submit button, it is just guessing that the first button it encounters inside the form is the submit. Just a hunch. — Alexander Nied, Oct 19 '16 at 12:52

score 0 · Answer 1 · edited May 23 '17 at 12:24

0

 $(".home-search").click(function(event) {}

this piece of javascript is what executes when you press enter, this is caused by the fact that the browser thinks that pressing enter is equal to pressing submit.

to prevent this have a look at this question: prevent submit on hitting enter

edited May 23 '17 at 12:24

Community

1
1

answered Oct 19 '16 at 12:55

Kevin Kloet

1,086
1
11
21

score 0 · Answer 2 · answered Oct 19 '16 at 12:56

0

Its because of your form element, just remove your form element.

Or try disabling enter event like following

<form id="search-form">
...
</form

  $('#search-form').on('keyup keypress', function(e) {
  var keyCode = e.keyCode || e.which;
  if (keyCode === 13) { 
    e.preventDefault();
    return false;
  }
});

plunker: https://codepen.io/anon/pen/rrQOEP

answered Oct 19 '16 at 12:56

Pandiyan Cool

6,381
8
51
87

So how does it know to fire that specific function? Why does it not fire the other functions. – Leonidas I Oct 19 '16 at 20:27
look into this http://stackoverflow.com/questions/925334/how-is-the-default-submit-button-on-an-html-form-determined – Pandiyan Cool Oct 20 '16 at 04:50

Javascript - Code is running when I hit enter in input form

2 Answers2