使用AJAX加载带有表单的页面，并从主页提交表单

Question

I have two pages in my folder, main page & secondary page and it contains the following.

main page:

HTML

---

<div id='show'></div>

AJAX

---

$(document).ready(function() {
   $.post('sec_page.php',{form: form}, function(form){
      $('#show').html(form);
   })
})

---

secondary page:

HTML

---

<form action='sec_page.php' method='post'>
    <input type='submit' id='submit' name='submit'>
</form>
<div id='vview'></div>

AJAX

---

$(document).ready(function() {
   $('#submit').submit(function(submit){
      submit.preventDefault();
      var Submission = $(this).serialize();
      var Action = $(this).attr('action');
      $.post('sec_page.php',{Submission : Submission}, function(vview){
            $('#vview').html(vview);
      })
   })
})

PHP

---

if(isset($_POST['submit'])){
   echo "The form has been Submitted!";
}

---

The main page shows me everything inside the secondary page , Which is a form , If i clicked on the submit button from the main page , It redirects me into the secondary page , And i don't want that to happen, Since i want the form to be submitted from the main page and shows the echo in it too;

So i tried to put the AJAX inside the secondary page and didn't solve the problem, Moved it to the main page instead, And didn't still the same problem;

So in brief, How can i submit the form from the main page without refreshing it or redirecting to the secondary page .

If not possible, I would like to know a better way to do that.

Answer 1

.serialize() does not include submit buttons.
Only when you submit the form normally the button you used to submit the form will be sent.
For ajax you can manually put that value in the data or have a hidden input.

<form action='sec_page.php' method='post'>
    <input type='hidden' name='submit_name' value="submit_value">
    <input type='submit' id='submit' name='submit'>
</form>

PHP

if(isset($_POST['submit_name'])){
   echo "The form has been Submitted!";
}

also you pass the serialized data alone as the data parameter

  var Submission = $(this).serialize();
  var Action = $(this).attr('action');
  $.post('sec_page.php', Submission, function(vview){
        $('#vview').html(vview);
  })

Also you have to attach the submit event handler to the form not the submit button

$('form').submit(function(submit){