CODEWITHSUNDEEP
phpjqueryajax
Damian Anthony
Damian Anthony

Reputation: 25

Pages Keeps Refreshing While Using AJAX

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.

<button class="toggleModal">trigger iModal</button>

<div class="modal">

<header>
  <h2>Other Symptoms</h2>
  <i  class="fa fa-times close toggleModal"></i>
</header>

<section>     
   <form class="js-ajax-php-json" method="post" accept-charset="utf-8">
    <textarea name="textareathebeast"  row="4" cols="40" placeholder="some text"></textarea><br>
    <input class="modalSubmit" type="submit" name="submit" value="submit">
  </form>
</section>

</div>

<div class="the-return">
  [HTML is replaced when successful.]
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

> 

$(function(){  

$('.toggleModal').on('click', function (e) {

     $('.modal').toggleClass('active');

});

$(".js-ajax-php-json").submit(function(){
var data = {
  "action": "test"
};
data = $(this).serialize() + "&" + $.param(data);
$.ajax({
  type: "POST",
  dataType: "json",
  url: "response.php",
  data: data,
  success: function(data) {
    $(".the-return").html(
      "Text Message: " + data["textareathebeast"]
    );
  }
});
return true;    
});

});
</script>

<

<?php
  if (is_ajax()) {
    if (isset($_POST["action"]) && !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']) && 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);
}
?>

Upvotes: 0

Views: 1067

Answers (3)

Alberto
Alberto

Reputation: 113

When using a form with a submit button, the browser will perform a postback anyway. So, I suggest that you replace the input type="submit" with input type="button". And then attach your handler to "click" of that button (instead of the form's submit event). You will also need to read the value of the textarea and put that value in the data to be passed.

Upvotes: 0

Raphael Serota
Raphael Serota

Reputation: 2197

Submitting a form implies lots of default behavior, such as reloading the current page with the results of the submission (even if the form has no action, the page will still refresh). Your ajax call in the submit handler is done IN ADDITION to the default behavior, not instead of it. You can prevent the default behavior in your submit handler like this:

$(".js-ajax-php-json").submit(function(event){
    event.preventDefault();

Upvotes: 0

James McClelland
James McClelland

Reputation: 555

It looks like the reason why its refreshing is because you are calling the submit function without preventing the default operation after the line $(".js-ajax-php-json").submit(function(){ you need to prevent it:

e.preventDefault();

If not you can try and prevent the default attached to a clicked event rather than the submit event.

Upvotes: 3

Related Questions