Question

I started using jquery and jquery-ui. I am facing a problem trying to submit a form that is inside a tab. Once i hit ‘submit’, the page refresh itself, the tabs are gone, and the url is changed to the tab’s function url. the submit button is working, and i get the desired result. However, it is not on the same page as the tabs.

Does anyone have any idea on how to keep the page from refreshing?

example of my problem:

I have a page called ‘index.php’ with 3 different tabs. one of the tabs is called ‘submit form’ where there I have a form using POST method, it is taking its source from ‘form.php’. once i hit the ‘submit’ button, the page refreshes, the url changes from ‘www.example.com’ to ‘www.example.com/form.php’, i get the result there, but the page is “plain”, means that its not under a tab, just a normal page.

I hope I explained myself correctly.

Thanks!

EDIT:
here is my submission code:

$submit = $_POST['submit'];
$name= $_POST['name'];

if($submit){
echo 'submitted <br><br>';
echo "hello $name";
}

Answer 1

Capture the form submission in jQuery and then stop it with preventDefault();

$(function(){
  $('#formID').on('submit', function(e){
    e.preventDefault();
    var formSrc = $(this).attr('action');
    var formMethod = $(this).attr('method');
    var formData = $(this).serialize();
    $.ajax({
      url: formSrc,
      type: formMethod,
      data: formData,
      success: function(data){
        //work with returned data from requested file
        alert(data);
      }
    });
  });
}); 

EDIT:

i should add that I chose to use on(); as opposed to the default submit(). This is because the form may or may not be available at DOM.ready.