[Resuelto] mostrar un numero nuevo de telefono al hacer click

[tecasoft]

buenas gente estamos otra vez por aqui, tengo un problema, estoy intentando hacer que cuando le doy a un boton me muestre automaticamente un campo nuevo para añadir un telefono nuevo y asi hacer de forma que puedan insertar todos los numeros de telefono que quieran.

Es decir, que se agregue un nuevo numero al div de abajo, lo he hecho mediante ajax y me funciona, pero solo puedo añadir 1 numero solo, yo quiero que sea numeros infinitos por cada click. Como lo hariais?

Código (php) [Seleccionar] Expandir


<div class="dialogo-add-right">
Cliente telefono 1: <input type="text" name=""><br>
Nombre: <input type="text" name=""><br>
Apellidos: <input type="text" name=""><br>
Cliente telefono 2: <input type="text" name=""><br>
Nombre: <input type="text" name=""><br>
Apellidos: <input type="text" name=""><br>
<div id="añadir_mas_numeros_telefono"><br>

</div>
</form>
<button class="add-mod-del_clientes" onclick="añadir_mas_numeros_telefono(this.value)" value="1">Añadir + numeros de telefono</button>
</div>


[patilanz]

Código (javascript) [Seleccionar] Expandir


function buttonClicked(n){
   var input = document.createElement('input');
   input.type = 'text';
   input.name = 'num' + n;
   document.getElementById('añadir_mas_numeros_telefono').appendChild(input);
}


Te refieres a algo como esto?
O puedes hacer un div invisible y usar cloneNode.

Un saludo

[tecasoft]

si es lo que buscaba pero, como puedo hacer para que me me muestre n sumandole un 1 cada numero de telefono, es decir cambiar name= n+1 que lo harias con un for() o como ademas tendria que hacer un salto de linea <br>?

[patilanz]

Podrías contar el length de childNodes del div que contiene los inputs si no vas a poner nada, o haces algo como esto:

Código (html4strict) [Seleccionar] Expandir

<div num='2'>
<label>Numero: </label>
<input type="text" name="num2" />
</div>

Miras el atributo del ultimo nodo.

También puedes poner el atributo en el button de modo que haces esto:

Código (javascript) [Seleccionar] Expandir

function clicked(e){
    var n = e.target.getAttribute('n')*1 + 1;
    e.target.setAttribute('n',n);
    ...
}

[tecasoft]

me estoy perdiendo un poco, como see implemetaria todo lo anterior entonces, es que me estoy haciendo un lio  

Código (html4strict) [Seleccionar] Expandir


<div id="añadir_mas_numeros_telefono" n="2"><br>

</div>
</form>
<button class="add-mod-del_clientes" onclick="buttonClicked(this.value)" value="num2">Añadir + numeros de telefono</button>



Código (javascript) [Seleccionar] Expandir


<script type="text/javascript">

function buttonClicked(n){
    var input = document.createElement('input');
    input.type = 'text';
    input.name = 'num' + n;
  document.getElementById('añadir_mas_numeros_telefono').appendChild(input);
  var br = document.createElement('br');
    document.getElementById('añadir_mas_numeros_telefono').appendChild(br);

function clicked(e){
    var n = e.target.getAttribute('n')*1 + 1;
    e.target.setAttribute('n',n);

}

}
</script>

no entiendo que pasa ¿?¿?

[#!drvy]

No entiendo porque quieres darle de "name" el nombre mas el numero. Si lo quieres recoger luego con un lenguaje server side, simplemente dale a TODOS los inputs de teléfono el nombre num[].

Código (html4strict) [Seleccionar] Expandir

<div id="numeros_de_telefono"></div>
</form>
<button class="add-mod-del_clientes" onclick="buttonClicked(this.value)">Añadir + numeros de telefono</button>

<script type='text/javascript'>
function buttonClicked(){
    var input = document.createElement('input');
    input.type = 'text';
    input.name = 'num[]';
    document.getElementById('numeros_de_telefono').appendChild(input);
};
</script>

Luego con un lenguaje server-side, solo tienes que obtener el parametro GET/POST "num" y tratarlo como un array. Ejemplo en PHP.

Código (php) [Seleccionar] Expandir

<?php
if(isset($_POST['num'])){
foreach($_POST['num'] as $numero){
echo $numero,'<br />';
}
}
?>

No te recomiendo añadir el <br> de esa forma. Usa CSS para darle un display:block; a los inputs dentro del div. Tampoco te recomiendo que uses caracteres como la ñ o acentos en los nombres y en el código en general.

Saludos

[patilanz]

Porque le entregas el value de un botón a la función?
buttonClicked(this.value)

[tecasoft]

#!drvy

he seguido el paso que me has mencionado pero en la parte del servidor, no recibe los datos se ve que $_POST['num'] no recibe datos.

Código (php) [Seleccionar] Expandir


if(isset($_POST['num'])){
foreach($_POST['num'] as $numero){
echo $numero,'<br />';
}
}
else
{
echo "no existe";
}


a mi me muestra que "no existe".
algo falla en el javascript al asignarle un numero al input.name = 'num[]';

[tecasoft]

esto es lo que tengo y no funciona, que raro no¿? que pensais al respecto, esto si que es muy muy raro    

Código (javascript) [Seleccionar] Expandir


<div id="numeros_telefono"><br>

</div>
</form>
<button class="add-mod-del_clientes" onclick="buttonClicked()">Añadir + numeros de telefono</button>
</div>

<script type="text/javascript">

function buttonClicked(){
var ixc=1;
   var input = document.createElement('input');
   input.type = 'text';
   input.name = 'num'+ixc;
   input.value = "721";
   document.getElementById('numeros_telefono').appendChild(input);
};

</script>


Código (php) [Seleccionar] Expandir


session_start();
$num1=$_POST['num1'];
echo $num1;


no manda nada al prueba.php es decir el php de arriba, no lo veis muy raro que no coja el var ixc me coje el value en el campo input pero no lo pasa al php, que esta sucediendo con input.name

[WHK]

Algo así?:
http://jsfiddle.net/jaredwilli/tzpg4/4/