Forum de discussion
Forum « Programmation Javascript » (archives)
Re: ligne se rajoute automatiquement lorsque l'on écrit valeur dans formulaire
Envoyé: 20 septembre 2006, 9h43 par Oznog
Au plus simple, tu peux simplement les ajouter un en dessous des autres en incrémantant une valeur numérique pour les identifier. Avec innerHTML :
<html>
<head>
<title>Trucsweb - Formulaire dynamique</title>
<style>
.monObjet {
position: absolute;
top: 1;
left: 1
}
</style>
<script type="text/javascript" language="javascript">
<!--
var nbrForm = 0;
var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all
var nForm1 = '<form>Formulaire<br >';
var nForm2 = '</form>';
var nForm3 = nForm1 + nForm2;
function Ajoute_form() {
nbrForm +=1;
nForm1 = nForm1 + '<table cellspacing="0" cellpadding="0" border="0"><tr><td align="center">ADD'+nbrForm+'</td></tr><tr><td>Champ1'+nbrForm+' : <input type="Text" name="champ1'+nbrForm+'+"> Champ2'+nbrForm+' : <input type="Text" name="champ2'+nbrForm+'"></td></tr><tr><td>Area'+nbrForm+' : <textarea name="area'+nbrForm+'"></textarea></td></tr></table>';
nForm3 = nForm1 + nForm2;
}
function twAjoute_form(nObjet,nContenu,nLeft,nTop) {
// Script gratuit des Trucsweb
// http://www.trucsweb.com
// Laisser cette remarque
// nObjet = le nom de l'objet
// nContenu = Le contenu affiché dans l'objet
// nLeft = La position x (de: haut gauche)
// nTop = La position y (de: haut gauche)
if (ns4) {
document.eval(nObjet).document.write(nContenu);
document.eval(nObjet).top =nTop;
document.eval(nObjet).left =nLeft;
document.eval(nObjet).document.close();
}
else if (ns6) {
document.getElementById(nObjet).innerHTML = nContenu;
document.getElementById(nObjet).style.left=nLeft;
document.getElementById(nObjet).style.top =nTop;
}
else if (ie4) {
eval(nObjet).innerHTML = nContenu;
eval(nObjet).style.pixelLeft=nLeft;
eval(nObjet).style.pixelTop=nTop;
}
}
// -->
</script>
</head>
<body>
<div class="monObjet" id="monObjet">Le DIV</div>
<br><br><br>
<a href="#"
onClick="Ajoute_form(); twAjoute_form('monObjet',nForm3,75,1)">Ajouter</a><br><br><br><br>
</body>
</html>
Mais tu peux aussi carrément les créer dans le DOM.
<html>
<head>
<title>DOM: Create Inputs</title>
<script type="text/javascript">
<!--//
function addInputs(theInput){
var table = document.createElement('table');
table.id = 'hMembers';
var hMembers = document.getElementById('hMembers');
if(hMembers)theInput.parentNode.removeChild(hMembers);
if(theInput.value.match(/^\d+$/)){
var tbody = document.createElement('tbody');
for(var i=0; i<theInput.value; i++){
var row = document.createElement('tr');
var cell = document.createElement('td');
var num = document.createTextNode((i+1)+')');
cell.appendChild(num);
row.appendChild(cell);
tbody.appendChild(row);
var cell = document.createElement('td');
var name = document.createTextNode('name:');
var input = document.createElement('input');
input.size = 20;
input.name = 'name'+(i+1);
cell.appendChild(name);
cell.appendChild(input);
row.appendChild(cell);
tbody.appendChild(row);
var cell = document.createElement('td');
var age = document.createTextNode('age:');
var input = document.createElement('input');
input.size = 1;
input.name = 'age'+(i+1);
cell.appendChild(age);
cell.appendChild(input);
row.appendChild(cell);
tbody.appendChild(row);
var cell = document.createElement('td');
var sex = document.createTextNode('sex:');
var input = document.createElement('input');
input.size = 2;
input.name = 'sex'+(i+1);
cell.appendChild(sex);
cell.appendChild(input);
row.appendChild(cell);
tbody.appendChild(row);
} table.appendChild(tbody);
theInput.parentNode.insertBefore(table,theInput.nextSibling);
}
else{ alert('Please enter only numbers in this field!');
theInput.value = '';
theInput.focus();
}
}
//-->
</script>
</head>
<body>
<form method="get" action="">
How many inputs: <input type="text" onchange="addInputs(this)">
</form>
</html>
Ciao
Oznog
Réponses
|
![[Photo]](https://www.trucsweb.com/documents/images/2024/js-bs-formulaire-fetch.png)
Formulaire Bootstrap 5 Ajax avec validation.![[Photo]](https://www.trucsweb.com/documents/images/2023/elephants-Salvador_Dali_1948.jpg)
Sécuriser l’accès « bureau à distance » sous IIS![[Photo]](https://www.trucsweb.com/documents/images/2023/trou_noir_galaxie_M87.jpg)
L’AI au temps du Far-Web![[Photo]](https://www.trucsweb.com/documents/images/2023/gilles-villeneuve-montreal1978.jpg)
Sélecteurs JavaScript querySelector() et querySelectorAll()![[Photo]](http://www.trucsweb.com/documents/images/2023/evolution_de_lhomme.jpg)
CSS - Animations![[Photo]](http://www.trucsweb.com/documents/images/2023/univers-copernic.jpg)
Mode de couleurs (Color modes) Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/2023/les_burgers_de_papa.jpg)
25 ans des Trucsweb - Bouton hamburger animé Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/logos/l_whatwg.svg)
Living Standard pour HTML de Apple, Google, Mozilla, Microsoft ...et la W3C![[Photo]](http://www.trucsweb.com/documents/images/2022/tim-berners-lee-web-b.jpg)
Le nouveau HTML « Living Standard » et le XML![[Photo]](http://www.trucsweb.com/documents/images/2022/v_jacques_dutronc-les_cactus.jpg)
Sécuriser un formulaire de contact au Far-Web!
AbuseIPDB
Connexion