Redirection formulaire et ajax

Bonjour tous le monde !


j'ai un formulaire qui se charge dans une balise <div> via Ajax grâce à cette fonction :

<!--
$(document).ready(function () {  

  $("a.load")
  .click(function() {
  $('#content_inner_wrapper').load(this.href);
    return false;
  });

});
// -->

Voici l'apparence de la page

http://img15.hostingpics.net/thumbs/mini_911157help.png

J'aimerai qu'a l'envoi des données du formulaire ( après avoir cliqué sur valider), une autre page se charge dans la div ( en l’occurrence, un second formulaire, on m'a demandé de différencier les formulaires).

j'ai tenté quelque bidouilles avec la fonction header(); en php mais aucun résultat probant : à chaque fois la page ne se charge pas dans la <div id="content_inner_wrapper">

J'ai également essayé de bidouiller la fonction permettant le chargement de mes pages en ajax mais je ne sais pas trop comment la modifier

Voici le code du formulaire si ça peut être utile :

<form method="post"  action="traitement_ent_sal.php" >
   
    <fieldset class="etat_civil">
          <legend>Etat civil</legend> <hr />
         <label for="nom">Nom</label>
         <input id="nom" name="nom" type="text" /><br />
         <label for="prenom">Prénom </label>
		 <input id="nom" name="prenom" type="text" /><br />
         <label for="prenom">Nom de jeune fille </label>
         <input id="nomjf" name="nomjf" type="text" /><br />
         <label for="date-de-naissance">Date de naissance</label>
         <input id="anniversaire" name="anniversaire" type="date"  title="Sélectionner une date depuis le calendrier via la flèche" />
     </fieldset> 
	 
	 <fieldset class="poste">
          <legend>Poste</legend> <hr />
         <label for="service">Service</label>
         <input id="service" name="service" type="list" /><br />
         <label for="Fonction">Fonction </label>
		 <input id="fonction" name="fonction" type="list" /><br />
     </fieldset>
	 
	 <fieldset class="contact">
	 	  <legend>Contact</legend> <hr />
          <label for="num_tel">N° de téléphone</label>
          <input id="num_tel" name="num_tel" type="tel" pattern="^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$"><br />
          <label for="Personnel">Personnel</label>
          <input id="num_perso" name="num_perso" type="tel" pattern="^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$"><br />
          <label for="Portable">Portable</label>
          <input id="num_portable" name="num_portable" type="tel" pattern="^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$"><br/>
		  <label for="Email">E-mail</label>
          <input id="email" name="mail" type="email" />
     </fieldset>
	 <input type="submit" value="Valider" class="load"/>

Merci d'avance, en espérant avoir été clair !
Modifié par Spawx (24 Jun 2013 - 10:49)

Bonjour,

Une piste: en chargeant le deuxième formulaire en même temps que le premier mais avec display:none, puis cacher le premier et faire apparaître le second via la validation...

Bonjour LaurentM, merci beaucoup je n'y avais pas pensé à vrai dire .... Je vais tester tout ça !