My website refreshes everytime I run my code

Question

$(document).ready(function() {
  $("#btn").click(function() {
    $("#form").toggle();
  });
  $("#submit").click(function() {
    if ($(".product").checked = true) {
      alert("Thank You!")
    } else {
      alert('Please Choose A Product');
    }
  var name = $("input:text").val();
  var nLi = $("<li>").appendTo("ul");
  nLi.text(name);
  });
});

Everytime I put text in the text input, the <li> will display for only a moment, but the page will refresh and it will disappear. Sorry if this is obvious, I'm still learning.

Answer 1

Don't allow the page to refresh. Return false at the end.

$(document).ready(function() {

  $("#btn").click(function() {
    $("#form").toggle();
  });
  $("#submit").click(function() {
        if ($(".product").checked) {
          alert("Thank You!")
        } else {
          alert('Please Choose A Product');
        }
      var name = $("input:text").val();

      var nLi = $("<li>").appendTo("ul");
      nLi.text(name);

      return false;

  });
});

And please change if ($(".product").checked = true) {

to if ($(".product").checked == true) {

Answer 2

Try to use event.preventDefault() in your click event, for example:

$("#submit").click(function(e) {
    e.preventDefault();
}

for more info about this jquery method event.preventDefault()