How to re-load a form into the same html div after clicking the submit button?

Question

I am a beginner in programming. I learned php earlier, but I only started learning js / ajax a couple of weeks ago. I am trying to put together a frame for a website. I'm using html/php for my pages, with some js / ajax only for handling form data.

I have the index page, with the menu. After clicking a menu link, the content of the chosen page (eg sample.php) is loaded in a div (id="content") in the index page using js, without refreshing the index page. I have no problems with pages where I don't have a form/submit button.

My problem is that if the sample.php contains a form and I click the submit button, the data checking and saving (or any other action) either does not happen or the sample.php loads instead of the index page (not in the "content" div). So the page content (form) is not reloaded in the div (in the index page).

I can handle my forms on separate pages (that is, if I don't load sample.php in the "content" div, but as a completely separate page). However, I cannot load the page content back in the "content" div (after checking data and displaying a message).

---

A link from my menu: (index.php)

<li><a href='sample'>Sample page</a></li>

The script that loads the page content in the index page ("content" div): (js/general.js)

$(document).ready(function() {
  $('nav ul li ul li ul li a').click(function() {
    var page = $(this).attr('href');
    $('#content').load('content/' + page + '.php');
    return false;
  })
});

The content of the sample.php: (content/sample.php)

<?php
  if (isset($_POST['my_data']) && $_POST['my_data']=="") {
    echo "Please fill in the required data.";
  }
  else if (isset($_POST['my_data']) && $_POST['my_data']!="") {
    echo "Data can be saved.";
  }
?>
<form action="content/sample.php" method="post" class="ajax">
  <div class="field">
    <label for="my_data">sample data</label>
    <input type="text" name="my_data" value="">
    <input class="btn_save" type="submit" value="Submit">
  </div>
</form>

And this is the code I have to get the data from the form: (js/general.js)

$('form.ajax').on('submit', function() {
  console.log();
    var that = $(this),
        url = that.attr('action'),
        type = that.attr('method'),
        data = {};
    
    that.find('[name]').each(function(index, value) {
      var that = $(this),
          name = that.attr('name'),
          value = that.val();
          data[name] = value;
    });

    $.ajax({
      url: url,
      type: type,
      data: data,
      success: function(response) {
        console.log(response);
      }
    });

  return false;
});

I would appreciate any help, or even any link to training videos/pages or anything I could use to solve this problem.

Answer 1

@MohammedKhurram: Sorry it took so long, it seems I needed to learn a lot more about ajax/javascript to solve this problem. Finally I have a working version.

How I solved the problem:

• I separated the menu loading js script and the ajax calling js script into two separate files. (The ajax calling also had to be rewritten, as it hadn't worked for some reason.)
• I took out the error checking part from the sample page into a new document.
• I included the ajax script reference directly under the form and left the menu loading script reference in the index file.

If anyone is interested, here is how I finally managed it. Thanks for all your help, I really appreciated it! php and js codes