0

Tengo el siguiente código, con 3 inputs y 3 botones. Al apretar cualquiera de los 3 abre un Modal. Lo que yo quiero lograr es que dependiendo de qué botón presiono, me traslade el valor del input de al lado. Actualmente con mi código, siempre me toma el color "rojo". Entiendo porqué pero mi conocimiento en javascript no me permite solucionarlo.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Modal</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script language="javascript">     
function recibir()
{
    var valor = document.getElementById("texto").value;
    document.getElementById("codigo").value=valor;        
    
}        
</script> 


<form id="formulario" method="Post" data-toggle="modal" data-target="#myModal">
  <input type="text" id="texto" value="rojo" />
  <input type="button" name="enviar" value="Enviar" onclick="recibir();"/><br>
</form>

<form id="formulario" method="Post" data-toggle="modal" data-target="#myModal">
  <input type="text" id="texto" value="verde" />
  <input type="button" name="enviar" value="Enviar" onclick="recibir();"/><br>
</form>

<form id="formulario" method="Post" data-toggle="modal" data-target="#myModal">
  <input type="text" id="texto" value="azul" />
  <input type="button" name="enviar" value="Enviar" onclick="recibir();"/><br>
</form>


<!-- Modal -->
  <div class="modal" id="myModal" role="dialog">
<div class="modal-dialog">

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Formulario</h4>
    </div>
    <div class="modal-body">
      <form id="formulario" method="Post">
        <label for="nombre">Nombre</label><input type="text" id="nombre"/><br>
        <label for="apellido">Apellido</label><input type="text" id="apellido"/><br>
        <span>Color:</span><input type="text" id="codigo"/>
    </form>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>
  
</div>
  </div>
  


</body>
</html>

1
  • ¿ Los campos que aparecen me imagino que son los valores de cada input en la modal ? ¿Por qué solo el valor del input de al lado y no todos los inputs a la modal y un solo botón?
    – Dev. Joel
    Commented el 20 feb. 2018 a las 6:02

1 respuesta 1

2

Lo primero de todo, no puedes tener diferentes elementos con el mismo ID, es como tener a mismas personas con el mismo DNI.

Despues, porque no les pasas un identificador a las funciones en cada boton? Ya que lo tienes organizado de esa manera, yo lo que haria es: A la funcion recibir() le paso el 1 por ejemplo, y luego al buscar el id, busco el input con id Texto1.

Ej:

Recibir(1)
function recibir(num){ id="Texto"+num;}

Aquí te dejo tu código funcionando:

function recibir(numero)
{
  var valor = document.getElementById("texto"+numero).value;
  document.getElementById("codigo").value=valor;        
    
} 
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Modal</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
    <form id="formulario" method="Post" data-toggle="modal" data-target="#myModal">
      <input type="text" id="texto1" value="rojo" />
      <input type="button" id="button1" name="enviar" value="Enviar" onclick="recibir(1);"/><br>
    </form>
    <form id="formulario" method="Post" data-toggle="modal" data-target="#myModal">
      <input type="text" id="texto2" value="verde" />
      <input type="button" id="button2" name="enviar" value="Enviar" onclick="recibir(2);"/><br>
    </form>
    <form id="formulario" method="Post" data-toggle="modal" data-target="#myModal">
      <input type="text" id="texto3" value="azul" />
      <input type="button" id="button3" name="enviar" value="Enviar" onclick="recibir(3);"/><br>
    </form>
    <!-- Modal -->
    <div class="modal" id="myModal" role="dialog">
      <div class="modal-dialog">
      <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Formulario</h4>
          </div>
          <div class="modal-body">
            <form id="formulario" method="Post">
              <label for="nombre">Nombre</label>
              <input type="text" id="nombre"/><br>
              <label for="apellido">Apellido</label>
              <input type="text" id="apellido"/><br>
              <span>Color:</span><input type="text" id="codigo"/>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

5
  • Que genio! muchas gracias. Funciona perfecto. Tenes razon, no pueden haber dos ID iguales en el mismo HTML. Pero miraba el codigo, y no entiendo como funciona lo de "+numero". "numero"? asi en español?. No lo entiendo no porque sea imposible, si no porque no conozco mucho de javascript. Si fuera "texto" + num... que se yo. Tiene mas pinta de parametros. Pero bueno, funciona. Muchas gracias GDP! Commented el 20 feb. 2018 a las 12:48
  • Y si lo que quiero es enviar un valor ingresado en el input, y no uno que esté por default en el value como lo han puesto ustedes?
    – Joshua
    Commented el 26 feb. 2019 a las 18:21
  • @Joshua El value cambia según escribes en el input. Fijate en la consola del navegador.
    – GDP
    Commented el 27 feb. 2019 a las 11:09
  • Hola una consulta, y si uno quisiera mandar varios datos de varios input y mostrarlos en el modal como se podría hacer?el ejemplo está hecho para enviar un solo dato por botón, pero si tuviera varios input y un solo botón que enviara esos datos? Commented el 6 jun. 2019 a las 16:45
  • @SimónPereiraVigouroux mucho mas sencillo, solo tienes que recoger el valor de los campos indiferentemente del ID del boton, eso sería lo mas normal. De todas formas, que es lo que quieres hacer, igual podemos abrir otra pregunta ya que puede ser algo interesante. Js o JQuery?
    – GDP
    Commented el 7 jun. 2019 a las 7:28

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.