Send the value of an input to a Modal

Question

Send the value of an input to a Modal

Navigation

#1 by (1 votes)

0

I have the following code, with 3 inputs and 3 buttons. Pressing any of the 3 opens a Modal. What I want to achieve is that depending on which button I press, I transfer the value of the input to the side. Currently with my code, I always take the color "red". I understand why but my knowledge in javascript does not allow me to solve it.

<!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>

javascript modal

asked by Lisandro Lorenzini 20.02.2018 в 06:50

source

1 answer

Problem NavigationDrawer + Tabbed Activity API19 (Not seen, in API 21 if) How to calculate arrears in mysql

score 1 · Accepted Answer

First of all, you can not have different elements with the same ID, it's like having the same people with the same DNI.

Afterwards, why do not you pass an identifier to the functions in each button? Since you have it organized that way, what I would do is: To the function recibir() I pass the 1 for example, and then when looking for the id, I look for the input with id Texto1 .

Ex:

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

Here I leave your code working:

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>