IN jquery UI tabs nous un formulaire et en utilisant ajax soumettre

Question

J'ai utilisé un plugin jquery UI tabs dans ma page et dans l'un des onglet que j'ai mis un formulaire. SO par exemple, l'onglet appelle une page form.php qui a la balise de forme de html. Maintenant form.php utilise ajax et jquery pour soumettre le formulaire. Est-ce que cela semble faisable?

$(document).ready(function(){ 

    $("form#formdata").submit(function() { 

      var str = $("#formdata").serialize(); 
      $.ajax({ 
      type: "POST", 
      url: "submit.php", 
      data: $("#formdata").serialize(), 
      success: function(msg){ 
        alert(msg); 
        } 
    }); 

return false; });

}); 

SO le code ci-dessus est dans mon form.php

Le formulaire est soumis, mais pas par ajax, et je suis dirigé vers submit.php Je veux refléter le résultat dans mes onglets de l'interface utilisateur lui-même .

suggest..thanks Please

EDIT: i mis preventDefault() et retour faux, mais il n'a pas aidé ..

Answer 1

Enfin je l'ai eu de travail.

C'est ce que j'ai fait.

dans mon code onglets de l'interface utilisateur

<div id="tabs"> 
      <ul> 
       <li><a href="link.html">Link1</a></li> 
       <li><a href="form.html">Data</a></li> 
      </ul> 
</div> 

Le form.html contenait les détails du formulaire et à partir de là que j'utilisais ajax.

SO pour la corriger je l'ai utilisé les détails du formulaire sur la même page sous un div comme celui-ci

<div id="tabs"> 
       <ul> 
        <li><a href="link.html">Link1</a></li> 
        <li><a href="#form">Data</a></li> 
       </ul> 

<div id = "form"> 
//form details here 
</div> 

    </div> 

Et utilisé le code ajax jquery sur cette page.

Merci à tous ceux qui ont répondu à ma question et remerciements spéciaux à @cheekysoft

Hope this est pratique et utile ..

Answer 2

mis return false sous la forme fonction d'envoi après l'appel ajax.

Answer 3

event.preventDefault() est la meilleure façon de gérer cette

$(document).ready(function() { 
    $('form#formdata').submit(function(event) { 
    event.preventDefault(); 
    var str = $('#formdata').serialize(); 
    $.ajax({ 
     type: 'POST', 
     url: 'submit.php', 
     data: $('#editmachine').serialize(), 
     success: function(msg) { alert(msg); } 
    }); 
    }); 
}); 

Answer 4

vous devez éviter ce comportement avec fausse déclaration en présenter l'événement:

$(document).ready(function(){ 

    $("form#formdata").submit(function() { 

      var str = $("#formdata").serialize(); 
      $.ajax({ 
      type: "POST", 
      url: "submit.php", 
      data: $("#editmachine").serialize(), 
      success: function(msg){ 
        alert(msg); 
        } 
    }); 
return false; 
    }); 

});