Enviar el valor de un input a un Modal

publicado por: Anonymous

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.

_x000D_

_x000D_

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

_x000D_

_x000D_

_x000D_

solución

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:

_x000D_

_x000D_

function recibir(numero)_x000D_
{_x000D_
  var valor = document.getElementById("texto"+numero).value;_x000D_
  document.getElementById("codigo").value=valor;        _x000D_
    _x000D_
} 

_x000D_

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

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *