title: Pages Keeps Refreshing While Using AJAX
body: <p>Im creating a modal box that includes a form. The form will then return the input once submitted using ajax and php and the modal box should then disappear. The problem is though the result shows for a few seconds before the box disappears and the page refreshes.</p>
  
  <pre><code>&lt;button class="toggleModal"&gt;trigger iModal&lt;/button&gt;
  
  &lt;div class="modal"&gt;
  
  &lt;header&gt;
    &lt;h2&gt;Other Symptoms&lt;/h2&gt;
    &lt;i  class="fa fa-times close toggleModal"&gt;&lt;/i&gt;
  &lt;/header&gt;
  
  &lt;section&gt;     
     &lt;form class="js-ajax-php-json" method="post" accept-charset="utf-8"&gt;
      &lt;textarea name="textareathebeast"  row="4" cols="40" placeholder="some text"&gt;&lt;/textarea&gt;&lt;br&gt;
      &lt;input class="modalSubmit" type="submit" name="submit" value="submit"&gt;
    &lt;/form&gt;
  &lt;/section&gt;
  
  &lt;/div&gt;
  
  &lt;div class="the-return"&gt;
    [HTML is replaced when successful.]
  &lt;/div&gt;
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>>
      </p>
  
  <pre><code>$(function(){  
  
  $('.toggleModal').on('click', function (e) {
  
       $('.modal').toggleClass('active');
  
  });
  
  $(".js-ajax-php-json").submit(function(){
  var data = {
    "action": "test"
  };
  data = $(this).serialize() + "&amp;" + $.param(data);
  $.ajax({
    type: "POST",
    dataType: "json",
    url: "response.php",
    data: data,
    success: function(data) {
      $(".the-return").html(
        "Text Message: " + data["textareathebeast"]
      );
    }
  });
  return true;    
  });
  
  });
  &lt;/script&gt;    
  </code></pre>
  
  <p>&lt;</p>
  
  <pre><code>&lt;?php
    if (is_ajax()) {
      if (isset($_POST["action"]) &amp;&amp; !empty($_POST["action"])) { //Checks if action value exists
        $action = $_POST["action"];
        switch($action) { //Switch case for value of action
          case "test": test(); break;
       }
    }
  }
  
  //Function to check if the request is an AJAX request
  function is_ajax() {
     return isset($_SERVER['HTTP_X_REQUESTED_WITH']) &amp;&amp; strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
  }
  
  function test(){
    $return = $_POST;
  
  //Do what you need to do with the info. The following are some examples.
  //if ($return["favorite_beverage"] == ""){
  //  $return["favorite_beverage"] = "Coke";
  //}
  //$return["favorite_restaurant"] = "McDonald's";
  
  $return["json"] = json_encode($return);
  echo json_encode($return);
  }
  ?&gt;
  </code></pre>