Re saluté ...
Je suis encore sur la génération d'un formulaire avec autoincrémentation des lignes...
j'ai trouvé un bon script qui me permet de générer des lignes à partir d'une ligne de références. ça marche impec.
J''ai donc un formulaire avec trois input texte par ligne générée.
J'aimerai maintenant arriver à récupérer les values de ces trois input sur une actions onChange placée sur un des trois champs.
voici un html qui devrai marcher ...
Mon souci se trouve dans la fonction verrifRef.
Le système d'ajout de lignes marche bien ..mais j'ai du mal à comprendre comment naviger dans les divers éléments du formulaire...
merci à vous !!!
<script>
// Tableau
/*
* Utilisation :
* 1. Créer un tableau avec la proprieté class="dTable" (Dynamic TABLE)
* 2. Le tableau doit être standard : il contenir un <thead>, un <tbody> et un <tfoot>
* et utiliser à bon escient les <td> et <th>.
* 3. La première ligne du tbody sera utilisée comme ligne de réference.
* Elle sera clonée pour en ajouter de nouvelle. Elle ne sera pas affichée.
*/
window.onload = dtableInit;
/* initialise le script */
function dtableInit() {
var table = document.getElementsByTagName('TABLE');
for ( var i = 0; i < table.length; i++ ) {
// on récupère tous les tableaux dynamiques
if ( table[i].className = 'dTable' ) {
var tbody = table[i].tBodies[0];
var newTr = tbody.rows[0].cloneNode(true);
// on masque la première ligne du tbody (la ligne de reference)
tbody.rows[0].style.display = 'none';
// on en ajoute une
tbody.appendChild(newTr);
}
}
}
/* trouve le tag "parentTagName" parent de "element" */
function getParent(element, parentTagName) {
if ( ! element )
return null;
else if ( element.nodeType == 1 && element.tagName.toLowerCase() == parentTagName.toLowerCase() )
return element;
else
return getParent(element.parentNode, parentTagName);
}
/* ajoute une ligne */
function addLigne(link) {
// 1. récuperer le node "TABLE" à manipuler
var td = link.parentNode;
var table = getParent(td,'TABLE');
// 2. on va manipuler le TBODY
var tbody = table.tBodies[0];
// 3. on clone la ligne de reference
var newTr = tbody.rows[0].cloneNode(true);
tbody.appendChild(newTr);
if ( document.all ) // pour IE
newTr.style.display = "block";
else
newTr.style.display = "table-row"; // pour Gecko
}
/* supprimer une ligne */
function delLigne(link) {
// 1. récuperer le node "TABLE" à manipuler
var td = link.parentNode;
var table = getParent(td, 'TABLE');
// 2. récuperer le TBODY
var tbody = table.tBodies[0];
// 3. Supprimer le TR
tbody.removeChild(getParent(td, 'TR'));
}
/**** fonction ajax ****///
function verrifRef(strFiltre, url, link){
// alert ('filtre:'+strFiltre);
//alert ('link='+link);
var td = link.parentNode;
var tr = getParent(td,'tr');
// alert (td +' --- '+tr);
var td = tr.getElementsByTagName('td');
alert (link.tabIndex);
/*ici j'aimerai récupérer les trois values des champs input de la ligne en cours ...
mais impossible d'accéder à ces éléments ....
j'ai testé td.('nom_du_input').value
td[0]['nom_iput'].value
etc etc ...
mais pas trouve :(
*/
getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
// alert(xhr.responseText);
//on place la réponse
//document.getElementById('divlistcorres').innerHTML = xhr.responseText;
// xhr.responseText renvoie 1 ou 0 si le résultat des trouvé ou pas
//si on trouve pas on affiche la troisieme case du tableau
if (xhr.responseText == 0) { //la ref n'existe pas
td[3].style.visibility='visible';
tr.style.background='#EB8A8A';
} else {
td[3].style.visibility='hidden';
tr.style.background='none';
}
}
}
// xhr.open("GET","ajax_onglet.php",true);
xhr.open("POST",url,true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// xhr.send(null);
xhr.send("filtre="+strFiltre+"&ajax=1");
}
/*************/
var xhr = null;
function getXhr(){
if(window.XMLHttpRequest) {// Firefox et autres
xhr = new XMLHttpRequest();
// alert ('XMLHttpRequest()');
} else if(window.ActiveXObject){ // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
// alert ('Msxml2.XMLHTTP');
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
// alert ('Microsoft.XMLHTTP');
}
}
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
}
</script>
<div id="contenu">
<form action="" method="post">
<table class="dTable">
<thead>
<tr>
<th align="left" background="images/bg_header_tab.jpg">Référence</th>
<th align="left" background="images/bg_header_tab.jpg">Code </th>
<th align="left" background="images/bg_header_tab.jpg">Indice</th>
<th align="left" background="images/bg_header_tab.jpg">Créer le document</th>
<th align="left" background="images/bg_header_tab.jpg">Ajouter une ligne</th>
<th align="left" background="images/bg_header_tab.jpg">Suppr</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="6"><a href="#" onClick="addLigne(this); return false;">Ajouter une ligne</a></th>
</tr>
</tfoot>
<tbody>
<tr style="display: none;">
<td><input name="doc_ref[]" id="doc_ref" type="text" onChange="verrifRef((this).value, 'ajax_verrif_ref.php', this);"></td>
<td><input name="doc_code[]" id="doc_code" type="text"></td>
<td><input name="doc_indice[]" id="doc_indice" type="text" style="width:40px;"></td>
<td class="checkbox" style="visibility:hidden;"><img src="images/icon/alert.gif" alt="!!!">
<select name="doc_create[]" id="doc_create" style="width:40px;">
<option value="0">Non</option>
<option value="1">Oui</option>
</select>
</td>
<td><a href="#" onClick="addLigne(this); return false;"><img src="images/icon/plus.gif" alt="Ajouter une ligne" border="0" ></a></td>
<td><a href="#" onClick="delLigne(this); return false;"><img src="images/icon/suppr16.gif" alt="Suppr." border="0" ></a></td>
</tr>
<tr>
<td><input name="doc_ref[]2" id="doc_ref" type="text" onChange="verrifRef((this).value, 'ajax_verrif_ref.php', this);"></td>
<td><input name="doc_code[]" id="doc_code" type="text"></td>
<td><input name="doc_indice[]" id="doc_indice" type="text" style="width:40px;"></td>
<td class="checkbox" style="visibility:hidden;"><img src="images/icon/alert.gif" alt="!!!">
<select name="doc_create[]" id="doc_create" style="width:40px;">
<option value="0">Non</option>
<option value="1">Oui</option>
</select>
</td>
<td><a href="#" onClick="addLigne(this); return false;"><img src="images/icon/plus.gif" alt="Ajouter une ligne" border="0" ></a></td>
<td><a href="#" onClick="delLigne(this); return false;"><img src="images/icon/suppr16.gif" alt="Suppr." border="0" ></a></td>
</tr>
</tbody>
</table>
<p>
<input value="Envoyer" name="ok" type="submit">
</p>
</form>
</div>