Salut,
Pour ce genre de chose tu peux simplifier le tout via un xhr en js puis afficher le formulaire souhaité via un simple button avec onclick ou lors du changement de catégorie dans le formulaire (onchange) et afficher le tout dans la div souhaité par un innerHTML ou en ajoutant des nodes dans ton script js si tu préfères mais plus long à faire.
Un exemple de bon matin...
La page html de base
<head>
<!-- Appel du script -->
<script src="select.js" type="text/javascript"></script>
</head>
<body>
<div>
<!-- Le select -->
<select id="subSection" name="subSection" onchange="importxhr.loadSection(this.id, 'divSection');">
<option value="-1"> ---- Catégories ---- </option>
<option value="livre">Ouvrage</option>
<option value="article">Article</option>
<option value="diplome">Memoire </option>
</select>
</div>
<!-- la div qui va recevoir le formulaire -->
<div id="divSection"></div>
</body>
Tu peux aussi insérer un btn
<head>
<!-- Appel du script -->
<script src="select.js" type="text/javascript"></script>
</head>
<body>
<div>
<!-- Le select -->
<select id="subSection" name="subSection">
<option value="-1"> ---- Catégories ---- </option>
<option value="livre">Ouvrage</option>
<option value="article">Article</option>
<option value="diplome">Memoire </option>
</select>
<!-- Bouton de validation -->
<button onclick="importxhr.loadSection(this.id, 'divSection');" style="cursor:pointer" title="choix de catégorie">Valider</button>
</div>
<!-- la div qui va recevoir le formulaire -->
<div id="divSection"></div>
</body>
La page select.js
Code : Tout sélectionner
// le xhr standard
function getXHR() {
var xhr = null;
if(window.XMLHttpRequest || window.ActiveXObject) {
if(window.ActiveXObject) {
try {
xhr = new ActiveXObject('Msxml2.XMLHTTP');
}
catch(e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
}
else {
xhr = new XMLHttpRequest();
}
}
else {
var browser = navigator.appName;
if(browser == 'Netscape') {
alert('Votre navigateur ne supporte pas l\'objet XMLHttpRequest.');
}
else {
alert('Votre navigateur ne supporte pas l\'objet ActiveXObject.');
}
return null;
}
return xhr;
}
// le script
var importxhr = {
loadSection : function(val, balz) {
var xhr = getXHR(),
openForm = document.getElementById(balz);
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
openForm.innerHTML = xhr.responseText;
}
else if(xhr.readyState < 4) {
openForm.innerHTML = 'Ouverture du fomulaire...';
}
};
xhr.open('POST', 'section.php', true); // appel de la page section.php
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('valID=' + val);
}
};
<?php
// chargement des classes
function chargClass($class) {
require $class.'.class.php';
}
spl_autoload_register('chargClass');
try {
$section = new FormBase();
if(isset($_POST['valID'])) {
$section->openSection($_POST['valID']);
}
}
catch(Exception $e) { die('Echec de la connexion et blah blah blah...'); }
?>
La class FormBase (FormBase.class.php)
<?php
class FormBase
{
public function openSection($val) {
switch ($val) {
case 'livre':
$this->sectionA();
break;
case 'article':
$this->sectionB();
break;
case 'diplome':
$this->sectionC();
break;
}
}
public function sectionA() {
// le formulaire A
}
public function sectionB() {
// le formulaire B
}
public function sectionC() {
// le formulaire C
}
}
J'ai rien testé donc bon... mais ça peut indiquer un mode de fonctionnement assez simple pour ça sans submit.
Ah oui j'ai oublié une condition dans le js avant d'entrer dans xhr.onreadystate du genre if(val.value != '-1') { le déroulé du script; }
Bonne journée
Salut,
Pour ce genre de chose tu peux simplifier le tout via un xhr en js puis afficher le formulaire souhaité via un simple button avec onclick ou lors du changement de catégorie dans le formulaire (onchange) et afficher le tout dans la div souhaité par un innerHTML ou en ajoutant des nodes dans ton script js si tu préfères mais plus long à faire.
Un exemple de bon matin...
[b]La page html de base[/b]
[html]
<head>
<!-- Appel du script -->
<script src="select.js" type="text/javascript"></script>
</head>
<body>
<div>
<!-- Le select -->
<select id="subSection" name="subSection" onchange="importxhr.loadSection(this.id, 'divSection');">
<option value="-1"> ---- Catégories ---- </option>
<option value="livre">Ouvrage</option>
<option value="article">Article</option>
<option value="diplome">Memoire </option>
</select>
</div>
<!-- la div qui va recevoir le formulaire -->
<div id="divSection"></div>
</body>
[/html]
[b]Tu peux aussi insérer un btn[/b]
[html]
<head>
<!-- Appel du script -->
<script src="select.js" type="text/javascript"></script>
</head>
<body>
<div>
<!-- Le select -->
<select id="subSection" name="subSection">
<option value="-1"> ---- Catégories ---- </option>
<option value="livre">Ouvrage</option>
<option value="article">Article</option>
<option value="diplome">Memoire </option>
</select>
<!-- Bouton de validation -->
<button onclick="importxhr.loadSection(this.id, 'divSection');" style="cursor:pointer" title="choix de catégorie">Valider</button>
</div>
<!-- la div qui va recevoir le formulaire -->
<div id="divSection"></div>
</body>
[/html]
[b]La page select.js[/b]
[code]
// le xhr standard
function getXHR() {
var xhr = null;
if(window.XMLHttpRequest || window.ActiveXObject) {
if(window.ActiveXObject) {
try {
xhr = new ActiveXObject('Msxml2.XMLHTTP');
}
catch(e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
}
else {
xhr = new XMLHttpRequest();
}
}
else {
var browser = navigator.appName;
if(browser == 'Netscape') {
alert('Votre navigateur ne supporte pas l\'objet XMLHttpRequest.');
}
else {
alert('Votre navigateur ne supporte pas l\'objet ActiveXObject.');
}
return null;
}
return xhr;
}
// le script
var importxhr = {
loadSection : function(val, balz) {
var xhr = getXHR(),
openForm = document.getElementById(balz);
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
openForm.innerHTML = xhr.responseText;
}
else if(xhr.readyState < 4) {
openForm.innerHTML = 'Ouverture du fomulaire...';
}
};
xhr.open('POST', 'section.php', true); // appel de la page section.php
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('valID=' + val);
}
};
[/code]
[b]La page section.php[/b]
[php]
<?php
// chargement des classes
function chargClass($class) {
require $class.'.class.php';
}
spl_autoload_register('chargClass');
try {
$section = new FormBase();
if(isset($_POST['valID'])) {
$section->openSection($_POST['valID']);
}
}
catch(Exception $e) { die('Echec de la connexion et blah blah blah...'); }
?>
[/php]
[b]La class FormBase (FormBase.class.php)[/b]
[php]
<?php
class FormBase
{
public function openSection($val) {
switch ($val) {
case 'livre':
$this->sectionA();
break;
case 'article':
$this->sectionB();
break;
case 'diplome':
$this->sectionC();
break;
}
}
public function sectionA() {
// le formulaire A
}
public function sectionB() {
// le formulaire B
}
public function sectionC() {
// le formulaire C
}
}
[/php]
J'ai rien testé donc bon... mais ça peut indiquer un mode de fonctionnement assez simple pour ça sans submit.
Ah oui j'ai oublié une condition dans le js avant d'entrer dans xhr.onreadystate du genre if(val.value != '-1') { le déroulé du script; }
Bonne journée
