Générer des inputs avec un bouton +

[naniccino]

bonjour

Voici mon code

Code

<?php
$filename = 'conf.txt';
  
if (!file_exists($filename)) die('Fichier'.$filename.'inexistant');
    
if (isset($_POST['submit'])) {
    unset($_POST['submit']);
    $filecontent = '';
    foreach($_POST as $k => $v) {
        $filecontent .= $k . ':' . implode(' ', $v) . PHP_EOL;
    }
    file_put_contents($filename, $filecontent);
    echo 'File updated';
}
  
$filetoarray = file($filename);
foreach ($filetoarray as $line) {
    $config[] = explode(':', $line);
}
?>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
    <?php foreach ($config as $value) :?>
        <br>
        <?php $ips = explode(' ', $value[1]); ?>
        <?php foreach ($ips as $ip) :?>
            <?php if (empty($ip)) continue; ?>
            <?php echo $value[0], ' '; ?>
            <input type="text" name="<?php echo $value[0]; ?>[]" value="<?php echo $ip; ?>"><br>
        <?php endforeach; ?>
    <?php endforeach; ?>
  
    <br/><input type="submit" name="submit" value="Valider" align="right" style="margin-left: 80px; width: 60px";>
    <br/><a href=""><input type="button" name="Reset" value="Reset" align="right" style="margin-left: 80px; width: 60px";></a>
</form>

Le code me permet la modification d'un fichier .txt qui est structurer de cette manière

ip: 91.121.58.96 91.121.153.42 91.121.153.42

user :xxxx

password : xxxxx

src_path : /var/www/

dst_path : /tmp/data/

packet_size : 30000

Chaque valeurs de mon fichier .txt est mise dans un input et me permet sa modification.
j'aimerais tous simplement ajouter un bouton Ajouter qui génère des inputs supplémentaire pour le champ IP si l'utilisateur souhaite ajouter des IP supplémentaire et un bouton supprimer afin de supprimer une IP aussi ou un input crée par erreur.
Merci d'avance

[yponomeute]

Pour supprimer une ip il suffit de vider le champ et de ne pas traiter à l'enregistrement les champs vides.

Pour rajouter une ip, il y a deux solutions :
- rajouter systématiquement un champ supplémentaire sur le formulaire qu'on renseignera si on veut rajouter une ip
- manipuler le DOM et rajouter un champ dynamiquement à l'aide de javascript : exemple utilisant jquery ici -> http://jsfiddle.net/qBURS/2/

[naniccino]

Code

<?php
$filename = 'conf.txt';

if (!file_exists($filename)) die('Fichier'.$filename.'inexistant');
  
if (isset($_POST['submit'])) {
    unset($_POST['submit']);
    $filecontent = '';
    foreach($_POST as $k => $v) {
        $filecontent .= $k . ':' . implode(' ', $v) . PHP_EOL;
    }
    file_put_contents($filename, $filecontent);
    echo 'File updated';
}

$filetoarray = file($filename);
foreach ($filetoarray as $line) {
    $config[] = explode(':', $line);
}

for($n=1; $n<= intval($_POST['cmp']); $n++)
    {
        echo $_POST['txt'.$n].'<br />';
    }


?>


<script>
    var i=0;
    function addinput()
    {
        i++;/*
        document.getElementById("frm" ).innerHTML += "<br /><input name='txt"+i+"' type='text' value='' />";*/
        
        var frm = document.getElementById("frm"); //le noeud parent
        
        // creation d'un champ
        var inpt = document.createElement('input');
        inpt.setAttribute('name','txt'+i);
        inpt.setAttribute('type','text');
        frm.appendChild(inpt);
        
        // retour a la ligne aprés l'ajout
        var br = document.createElement('br');
        frm.appendChild(br);
        
        //Incrementation du compteur i (nombre de champ)
        document.getElementById("cmp" ).value=i;
    }
</script>



<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
    <?php foreach ($config as $value) :?>
        <br>
        <?php $ips = explode(' ', $value[1]); ?>
        <?php foreach ($ips as $ip) :?>
            <?php if (empty($ip)) continue; ?>
            <?php echo $value[0], ' '; ?>
            <input type="text" name="<?php echo $value[0]; ?>[]" value="<?php echo $ip; ?>"><br>
        <?php endforeach; ?>
    <?php endforeach; ?>

    <br/><input type="submit" name="submit" value="Valider" align="right" style="margin-left: 80px; width: 60px";>
    <br/><a href=""><input type="button" name="Reset" value="Reset" align="right" style="margin-left: 80px; width: 60px";></a>
    <input type='button' id='ajIn' value=' ajouter ' onClick='addinput()' />
    <input  type="hidden" value="java script:i;" name="cmp" id="cmp" />
    <div id="frm" ></div>
    
</form>

voila j'ai un bouton ajouter qui me permet d'ajouter un champ il fonctionne bien le seul problème, c'est qu'il m'ajoute ce champ dynamique a la fin de mon programme.
Comment je doit faire pour qu'il me l'affiche avec les IP et que quand je modifie la modification soit prise en compte avec les IP c'est a dire la ligne sera ajouter avec le reste des adresse IP ??

[macpacher]

Tableau dynamique en javascript.
Le bouton (-) ne me semble pas très ergonomique à l'usage, mieux vaut prévoir un contrôle des valeurs saisies (onchange par ex)

[Edit] pour les champs ip prévoir un tableau séparé des autres input

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Tableau dynamique</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
</head>
<script type="text/javascript">
function AddRow(){
var idElementTableau=document.getElementById('table');
var newRow = document.getElementById('table').insertRow(-1);
var newCell = newRow.insertCell(0);
indiceligne = document.getElementById('table').rows.length-1;
newCell.innerHTML = 'ip';
newCell = newRow.insertCell(1);
newCell.innerHTML = '<input type="text" name="ip[]" value="">';
}

function RemoveRow() {
var idElementTableau=document.getElementById('table');
var arrayLignes = document.getElementById('table').rows;
var indiceligne = document.getElementById('table').rows.length-1;
if (indiceligne > 0)
idElementTableau.deleteRow(indiceligne);
}
</script>

<body>
<form id="formulaire" name="formulaire" action="" method="POST" enctype="application/x-www-form-urlencoded">
<table id="table">
<tr>
<td>ip</td>
<td><input type="text" name="ip[]" value=""></td>
</tr>
</table>
<input type="button" value="+" onclick="AddRow()" >
<input type="button" value="-" onclick="RemoveRow()" >
</form>
</body>
</html>

Ce message a été modifié par macpacher - 29 Jan 2015, 11:35.

[naniccino]

macpacher ton scripte est génial avec le petit bouton - et + c'est vraiment ce que je cherche mais comme je suis novice dans le domaine j'aurais un peu de mal a l'adapter a mon code tu peux m'orienter stp?

[macpacher]

Voilà pour insérer les input dans deux tables, la première pour les ips, la seconde pour les autres infos.
Les boutons + - fonctionnent, par contre je n'ai pas réussi à faire fonctionner la partie écriture du fichier (pas trop le temps...)

Désolé pour le style classique avec des accolades, mais je ne maitrise vraiment pas l'imbrication entre les balises php à chaque ligne.

Attention : le test if (empty($ip)) s'applique à tous les champs !

CODE

<?php
$filename = 'conf.txt';

if (!file_exists($filename)) die('Fichier'.$filename.'inexistant');

if (isset($_POST['submit'])) {
unset($_POST['submit']);
$filecontent = '';
foreach($_POST as $k => $v) {
$filecontent .= $k . ':' . implode(' ', $v) . PHP_EOL;
}
file_put_contents($filename, $filecontent);
echo 'File updated';
}

$filetoarray = file($filename);
foreach ($filetoarray as $line) {
$config[] = explode(':', $line);
}
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Tableau dynamique</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
</head>
<script type="text/javascript">
function AddRow(){
var idElementTableau=document.getElementById('tabledesips');
var newRow = document.getElementById('tabledesips').insertRow(-1);
var newCell = newRow.insertCell(0);
indiceligne = document.getElementById('tabledesips').rows.length-1;
newCell.innerHTML = 'ip';
newCell = newRow.insertCell(1);
newCell.innerHTML = '<input type="text" name="ip[]" value="">';
}

function RemoveRow() {
var idElementTableau=document.getElementById('tabledesips');
var arrayLignes = document.getElementById('tabledesips').rows;
var indiceligne = document.getElementById('tabledesips').rows.length-1;
if (indiceligne > 0)
idElementTableau.deleteRow(indiceligne);
}
</script>

<?php
//indicateur de fin de la table contenant les ip
$finTableIp = 0;
?>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<table id="tabledesips">
<?php
foreach ($config as $value) {
if ($finTableIp == 0) {
if ($value[0] != 'ip') {
$finTableIp = 1;
print('</table>
<input type="button" value="+" onclick="AddRow()" >
<input type="button" value="-" onclick="RemoveRow()" >
<br>
<table id="tableautresparams">
<br>');
}
}
$ips = explode(' ', $value[1]);
foreach ($ips as $ip) {
if (empty($ip))
continue;
print('<tr><td>'.$value[0].'</td><td><input type="text" name="'.$value[0].'[]" value="'.$ip.'"></td></tr>');
}
}
print('</table>');
?>


<br/><input type="submit" name="submit" value="Valider" align="right" style="margin-left: 80px; width: 60px";>
<br/><a href=""><input type="button" name="Reset" value="Reset" align="right" style="margin-left: 80px; width: 60px";></a>
</form>

Ce message a été modifié par macpacher - 29 Jan 2015, 23:54.

[naniccino]

Macpacher je te remercie vraiment le scripte tourne très bien, l'enregistrement marche pour les IP et le reste enfin tous marche très bien je viens de le tester.
Quand tu dit la partie écriture du fichier tu parle de l'enregistrement une fois les MODIF effectuées ?