CODEWITHSUNDEEP
ajaxvalidationjquery
devdarsh
devdarsh

Reputation: 95

Ajax request returns every html element of the page

i am a new bie to Ajax and currently making a form submission using php and ajax(for a wordpress plugin). My js code is 

$("#submit").click(function(){   
var form_data = $('.myform').serialize();
$.ajax({
  type: "POST",
  url:  "main_form.php",
  data: form_data,
  success: function(html){
  $('div#ajax_output').html(html);
   }                       
}); 
return false;
  });

and my entire page structure looks like

<div class="header"> ....</div>
<div class="navigation"> ....</div>
< ?php
if($_post) {
   //form validation codes
   if(condition true) echo "Success message";
   else echo "Error";
}
?>
<div id="ajax_output"></div>
<form class="myform">
  //form elements
</form>
 //And the above javascript here(that click fn)

Now my problem is, as i am submitting the form data to the same page(it is unavoidable and cannot make it separate), the ajax returns inside <div id="ajax_output"></div> all the page contents header, navigation, etc including echo "Success message". Can any one tell me how to output only php validation result?

Upvotes: 0

Views: 511

Answers (3)

Gutzofter
Gutzofter

Reputation: 2023

The code example is not complete, but you can get the gist of it hopefully! Add a variable to post data.

Javascript:

$("#submit").click(function(){   
   var form_data = $('.myform').serialize();

   form_data.isAjax = true;

   $.ajax({
      type: "POST",
      url:  "main_form.php",
      data: form_data,
      success: function(html){
         $('div#ajax_output').html(html);
      }                       
   }); 
   return false;
});

PHP:

<?php

if(array_key_exists("isAjax", $_POST) {
   if($_post) {
      //form validation codes
      if(condition true) {
         echo "Success message";
      }
      else {
         echo "Error";
      }
   }
}
else {
   $mainPage = '<div class="header"/>>';
   $mainPage += '<div class="navigation"/>';
   $mainPage += '<div id="ajax_output"/>';
   $mainPage += '<form class="myform"/>';
   $mainPage += '<javascript />';

   echo $mainPage;
}

Upvotes: 0

husseincoder
husseincoder

Reputation: 1

You may return after checking the form data, or do the form validation in another action.

Upvotes: 0

kirilloid
kirilloid

Reputation: 14304

output buffering may help you

<?php // insert that at the beginning of the page
    ob_start();
?>
<div class="header"> ....</div>
<div class="navigation"> ....</div>
<?php
if($_post) {
   //form validation codes
   if(condition true) echo "Success message";
   else echo "Error";
   ob_end_clean();
   exit(1);
} else {
   echo ob_get_clean();
}
?>
<div id="ajax_output"></div>
<form class="myform">
  //form elements
</form>
 //And the above javascript here(that click fn)

You'd better restructure code, though. I.e. move processing of post data to the beginning of the page and then just exit if it should be processed.

Usually, such problems are solved on server side, not in javascript. I mean, server should return correct html part w/o heading, navigation, etc., client should not parse all that stuff to get what it needs.

Upvotes: 1

Related Questions