Why is my Javascript restarting every time I press enter in the Input area? codepen attached

Question

I'm working on an exercise on codepen.io and I don't know why, every time that I press the enter key in the input area, the program restarts itself, although I've added some ifs statements to avoid it.

I've tried the same code here in stackoverflow and the Javascript It doesn't restart itself, I attach the link to codepen for you to see the problem in action:

http://codepen.io/rafahuelin/pen/qRdWBy?editors=0010

I suppose that the reason is something I'm not aware of. Could you please, tell me what's causing this to happen and what's the way to manage this program behavior?

Thanks!

$(document).ready(function() {

  // Appears the magnifier icon
  var initializeSearch = false;
  if (initializeSearch === false) {
    initializeSearch = true;
    $("#search").html("<div id='magnifier' class='search-init animated fadeIn'> <div id='magnifier-stick' class='stick-appears'></div> </div>");
    console.log("after #search");


    // When clicking on the icon appears the input form
    var magnifierClicked = false;
    $("#search").on("click", function() {
      if (magnifierClicked === false) {
        magnifierClicked = true;
        $("#magnifier-stick").addClass("animated fadeOut stick-disappears").removeClass("stick-appears");
        console.log("after magnifier-stick");
        $(".search-init").addClass("search-input").removeClass("search-init");
        console.log("after search-init");
        setTimeout(function() { //waits for 1.2s
          $("#search").html("<div id='search-input'><form><input id='input-form' class='animated fadeIn' type='text' name='searchContent' placeholder='Type Your Search Here...'></form></div>");
          console.log("after search-input");
          $("#input-form").focus();
        }, 1200);
      } // if(magnifierClicked === false) 
    });
  } // avoid for looping if (initializeSearch === false)
  //After pressing Enter, 
  // $("#input-form").keypress("pressedKey", function(pressedKey){
  //  if(pressedKey === 13){
  //   //Disable textbox to prevent multiple submit
  //     $("#input-form").attr("disabled", "disabled");
  //   console.log("key pressed");
  //  }
  // });

  //send request to API


  //search-input moves up 
  // function moveItUp() {
  //  $("#input-form").addClass("test");   //.addClass("animated fadeOut stick-disappears").removeClass("stick-appears");
  // } 


  //and the results appear down


}); // $(document).ready

html {
  height: 100%;
}
body {
  position: relative;
  width: 100%;
  height: 100%;
}
.search-init {
  height: 70px;
  width: 70px;
  border: 4px solid green;
  border-radius: 35px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  -webkit-animation-duration: 3s;
  -ms-animation-duration: 3s;
  -moz-animation-duration: 3s;
}
#magnifier-stick.stick-appears {
  height: 20px;
  width: 0;
  border: 2px solid green;
  transform: rotate(-45deg);
  top: 54px;
  left: 54px;
  position: absolute;
  transition: all 0.2s ease;
}
.search-input,
#search-input {
  height: 70px;
  width: 570px;
  border: 4px solid green;
  border-radius: 35px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  transition: all 400ms 400ms ease;
}
#magnifier-stick.stick-disappears {
  height: 0;
  width: 0;
  border: 2px solid green;
  transform: rotate(-95deg);
  top: 54px;
  left: 54px;
  position: absolute;
  transition: all 200ms ease;
  -webkit-animation-duration: 0.2s;
  -ms-animation-duration: 0.2s;
  -moz-animation-duration: 0.2s;
}
.search-input,
#search-input {
  line-height: 56px;
}
#input-form,
#input-form:focus {
  width: 100%;
  border-radius: 35px;
  outline: none;
  border: none;
  padding-left: 20px;
  padding-right: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search">
</div>

Answer 1

New answer based on the discussion in comments:

The OP asked:

i don't know why, every time that I press the enter key in the input area, the program restarts itself, although I've added some ifs statements to avoid it.

So I assumed that he is asking about disabling the form submission when pressing enter key. Since OP found this behavior different in Stackoverflow than Codepen. He wanted to imitate the same concept on Codepen.

OP commented out this code because it was not working:

 //After pressing Enter, 
  // $("#input-form").keypress("pressedKey", function(pressedKey){
  //    if(pressedKey === 13){
  //        //Disable textbox to prevent multiple submit
  //     $("#input-form").attr("disabled", "disabled");
  //        console.log("key pressed");
  //    }
  // });

The reason is that is not working is because OP used keypress instead of keyup (or keydown). keypress event handles printable characters (which does not include Enter key). Therefore I suggested the below answer.

Old answer:

You can handle form submission like so:

$("#search").on("submit", function() {
    // You can return false to stop it or handle anyway you like
    return false;
});

A codepen snippet: http://codepen.io/anon/pen/RKPQaO

Answer 2

It is because you are using forms. The Stack Snippets will not submit forms. When you submit the form, you will see this in the console, the browser console:

Blocked form submission to '' because the form's frame is sandboxed and the 'allow-forms' permission is not set.

This is a sandboxed security feature implemented in Stack Snippets to avoid submission of user credentials and data from Stack Snippets to personal websites.

Try submitting the form here, and it will throw an error:

<form action="">
  <input type="text" />
  <input type="submit" />
</form>

In the Chrome Console:

In the source of Stack Overflow page:

<iframe name="35ff969b-5580-7f20-bd3f-8c9fa41b341a" sandbox="allow-modals allow-scripts" class="snippet-box-edit" frameborder="0"></iframe>