Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: tecasoft en 11 Octubre 2015, 13:12 pm


Título: [Resuelto] mostrar un numero nuevo de telefono al hacer click
Publicado por: tecasoft en 11 Octubre 2015, 13:12 pm
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
  1. <div class="dialogo-add-right">
  2. 			Cliente telefono 1: <input type="text" name=""><br>
  3. 			Nombre: <input type="text" name=""><br>
  4. 			Apellidos: <input type="text" name=""><br>
  5. 			Cliente telefono 2: <input type="text" name=""><br>
  6. 			Nombre: <input type="text" name=""><br>
  7. 			Apellidos: <input type="text" name=""><br>
  8. 			<div id="añadir_mas_numeros_telefono"><br>
  9.  
  10. 			</div>
  11. 			</form>
  12. 			<button class="add-mod-del_clientes" onclick="añadir_mas_numeros_telefono(this.value)" value="1">Añadir + numeros de telefono</button>
  13. 		</div>
  14.  

Título: Re: mostrar un numero nuevo de telefono al hacer click
Publicado por: patilanz en 11 Octubre 2015, 13:28 pm
Código
  1. function buttonClicked(n){
  2.    var input = document.createElement('input');
  3.    input.type = 'text';
  4.    input.name = 'num' + n;
  5.    document.getElementById('añadir_mas_numeros_telefono').appendChild(input);
  6. }
  7.  

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

Un saludo

Título: Re: mostrar un numero nuevo de telefono al hacer click
Publicado por: tecasoft en 11 Octubre 2015, 13:46 pm
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>?

Título: Re: mostrar un numero nuevo de telefono al hacer click
Publicado por: patilanz en 11 Octubre 2015, 14:31 pm
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
  1. <div num='2'>
  2. <label>Numero: </label>
  3. <input type="text" name="num2" />
  4. </div>

Miras el atributo del ultimo nodo.

También puedes poner el atributo en el button de modo que haces esto:
Código
  1. function clicked(e){
  2.     var n = e.target.getAttribute('n')*1 + 1;
  3.     e.target.setAttribute('n',n);
  4.     ...
  5. }

Título: Re: mostrar un numero nuevo de telefono al hacer click
Publicado por: tecasoft en 11 Octubre 2015, 15:41 pm
me estoy perdiendo un poco, como see implemetaria todo lo anterior entonces, es que me estoy haciendo un lio  :huh:

Código
  1. <div id="añadir_mas_numeros_telefono" n="2"><br>
  2.  
  3. </div>
  4. </form>
  5. <button class="add-mod-del_clientes" onclick="buttonClicked(this.value)" value="num2">Añadir + numeros de telefono</button>
  6.  
  7.  

Código
  1. <script type="text/javascript">
  2.  
  3. 	function buttonClicked(n){
  4.    	var input = document.createElement('input');
  5.    	input.type = 'text';
  6.    	input.name = 'num' + n;
  7.   		document.getElementById('añadir_mas_numeros_telefono').appendChild(input);
  8.   		var br = document.createElement('br');
  9.    	document.getElementById('añadir_mas_numeros_telefono').appendChild(br);
  10.  
  11. 	function clicked(e){
  12.     var n = e.target.getAttribute('n')*1 + 1;
  13.     e.target.setAttribute('n',n);
  14.  
  15. 	}
  16.  
  17. }
  18. </script>
  19.  
no entiendo que pasa ¿?¿?

Título: Re: mostrar un numero nuevo de telefono al hacer click
Publicado por: #!drvy en 11 Octubre 2015, 16:17 pm
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
  1. <div id="numeros_de_telefono"></div>
  2. </form>
  3. <button class="add-mod-del_clientes" onclick="buttonClicked(this.value)">Añadir + numeros de telefono</button>
  4.  
  5. <script type='text/javascript'>
  6. function buttonClicked(){
  7.     var input = document.createElement('input');
  8.     input.type = 'text';
  9.     input.name = 'num[]';
  10.     document.getElementById('numeros_de_telefono').appendChild(input);
  11. };

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
  1. <?php
  2. if(isset($_POST['num'])){
  3. 	foreach($_POST['num'] as $numero){
  4. 		echo $numero,'<br />';
  5. 	}
  6. }
  7. ?>

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

Título: Re: mostrar un numero nuevo de telefono al hacer click
Publicado por: patilanz en 11 Octubre 2015, 16:22 pm
Porque le entregas el value de un botón a la función?
buttonClicked(this.value)

Título: Re: mostrar un numero nuevo de telefono al hacer click
Publicado por: tecasoft en 11 Octubre 2015, 16:40 pm
#!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
  1. if(isset($_POST['num'])){
  2. 	foreach($_POST['num'] as $numero){
  3. 		echo $numero,'<br />';
  4. 	}
  5. }
  6. else
  7. {
  8. echo "no existe";
  9. }
  10.  

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

Título: Re: mostrar un numero nuevo de telefono al hacer click
Publicado por: tecasoft en 11 Octubre 2015, 17:07 pm
esto es lo que tengo y no funciona, que raro no¿? que pensais al respecto, esto si que es muy muy raro  :huh:  :silbar:

Código
  1. <div id="numeros_telefono"><br>
  2.  
  3. 			</div>
  4. 			</form>
  5. 			<button class="add-mod-del_clientes" onclick="buttonClicked()">Añadir + numeros de telefono</button>
  6. 		</div>
  7.  
  8. <script type="text/javascript">
  9.  
  10. function buttonClicked(){
  11. 	 var ixc=1;
  12.     var input = document.createElement('input');
  13.     input.type = 'text';
  14.     input.name = 'num'+ixc;
  15.     input.value = "721";
  16.     document.getElementById('numeros_telefono').appendChild(input);
  17. };
  18.  
  19. </script>
  20.  

Código
  2. $num1=$_POST['num1'];
  3. echo $num1;
  4.  

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

Título: Re: mostrar un numero nuevo de telefono al hacer click
Publicado por: WHK en 11 Octubre 2015, 17:46 pm
Algo así?:
http://jsfiddle.net/jaredwilli/tzpg4/4/

Título: Re: mostrar un numero nuevo de telefono al hacer click
Publicado por: tecasoft en 11 Octubre 2015, 18:19 pm
Código
  1. var i = $('#numeros_telefono').size() + 1;
  2.  
esto que haria, es decir el size(es tamaño) que valor tendria, etc, para pasarle por 'name'? ademas se incrementaria en 1 cada campo 'name', es decir como quedaria el campo name, gracias, siempre he pensado que con jquery se hace mejor, mas intuitivo jejejej

Título: Re: mostrar un numero nuevo de telefono al hacer click
Publicado por: #!drvy en 11 Octubre 2015, 18:37 pm
El código que te he puesto funciona.. comprueba que envíes bien tus datos y los tengas bien nombrados ademas de que los envias por POST.

HTML:
Código
  1. <form action='' method='POST'>
  2.     <input type='text' name='nombre' value='' placeholder='Nombre'>
  3.     <div id='numeros_de_telefono'>
  4.         <input type='button' id='add_num' value='Añadir otro telefono'>
  5.         <input type='text' name='num[]' placeholder='Telefono' value=''>
  6.     </div>
  7.     <input type='submit' value='Enviar'>
  8. </form>

JS:
Código
  1. document.getElementById('add_num').onclick = function(){
  2.     var input = document.createElement('input');
  3.     input.type = 'text';
  4.     input.name = 'num[]';
  5.     input.placeholder = 'Otro telefono';
  6.     input.value = '';
  7.     document.getElementById('numeros_de_telefono').appendChild(input);
  8. }

PHP:
Código
  1. <?php
  2. if(!empty($_POST)){
  3.  
  4.     echo 'Nombre: ',$_POST['nombre'];
  5.     echo '<br> Telefonos: ';
  6.  
  7.     foreach($_POST['num'] as $numero){
  8.         echo $numero,', ';
  9.     }
  10. }
  11. ?>

Resultado:
(http://i.imgur.com/JXCMeQU.png)

Al enviar:
Código:
Nombre: Juan
Telefonos: 123, 456, 789,

DEMO:
http://phpfiddle.org/lite/code/tij4-9kr4 (Dale al botón Run)

Saludos

Título: Re: mostrar un numero nuevo de telefono al hacer click
Publicado por: MinusFour en 11 Octubre 2015, 18:50 pm
No te funciona porque tienes:

Código
  1.     input.name = 'num'+ixc;

Cuando debería ser:

Código
  1.     input.name = 'num[]';

Título: Re: [Resuelto] mostrar un numero nuevo de telefono al hacer click
Publicado por: tecasoft en 17 Octubre 2015, 23:52 pm
pero como podria hacer para eliminarlo asi con el anterior codigo, es decir como podria agregarle un remove(eliminar) linea que sale:

Código
  1. $(function() {
  2.         var scntDiv = $('#p_scents');
  3.         var i = $('#p_scents p').size() + 1;
  4.  
  5.         $('#addScnt').live('click', function() {
  6.                 $('<p><label for="p_scnts">Telefono:<input type="text" id="p_scnt" size="20" name="pscnt'+ i +'" value="" placeholder="Input Value" />Nombre:<input type="text" id="p_scnt" size="20" name="pscnt_nombre'+ i +'" value="" placeholder="Input Value" /></label>Apellidos:<input type="text" id="p_scnt" size="20" name="pscnt_apellidos'+ i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Eliminar</a></p>').appendTo(scntDiv);
  7.                 i++;
  8.                 return false;
  9.         });
  10.  
  11.         $('#remScnt').live('click', function() {
  12.                 if( i > 2 ) {
  13.                         $(this).parents('p').remove();
  14.                         i--;
  15.                 }
  16.                 return false;
  17.         });
  18. });
  19.  


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines