0

tengo un html el cual en un input me permite ingresar un dato para realizar una búsqueda, debo poder tomar ese datos ingresado en ese input y ponerlo en un popUp (nueva ventana).

Hmtl 1

<Doctype html>
    <head>
        <title>Contacto Coleccions</title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    </head>

<html>
    <body>

    <div id="menu">
        <a class="btn btn-default" href="#" role="button">Archivo</a>
        <a class="btn btn-default" href="#" role="button">Gestion</a>
        <a class="btn btn-default" href="#" role="button">Procesos</a>
        <a class="btn btn-default" href="#" role="button">Ayuda</a>
        <a class="btn btn-default" href="#" role="button">Informes</a>
        <a class="btn btn-default" href="FormGestion.html" target="_blank" onClick="window.open(this.href, this.target, 'width=300,height=500'); return false;" role="button">PopUp</a>
    </div>
        <br>

        <div class="table-responsive">
        <table class="table table-bordered">
            <tr>
              <td class="info">Usuario</td>
              <td class="info">Fecha_gestion</td>
              <td class="info">Telefono</td>
              <td class="info">Gestion</td>
              <td class="info">Concuencia</td>
              <td class="info">Motivo_de_No_Pago</td>
              <td class="info">Contacto</td>
              <td class="info">Proxima_Gestion</td>
              <td class="info">Observacion</td>
            </tr>
        </table>
        </div>
        <br>
        <br>
        <br>

        <h1 class="text-center">MOVISTAR<small>_PYMES</small></h1>

        <div id="buscar">
        <form class="form-inline">
        <div class="form-group">
        **<input class="form-control" id="inputPassword" placeholder="Identifiacion"> <!--Este es el input que captura la informacion -->**
        </div>

         <button type="submit" class="btn btn-default">Buscar</button>
        </form>
        </div>
    </body>
</html>

html 2 (popUp)

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Form Gestion</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body>
    <h3>Ejemplo de formulario para diligenciar la gestion</h3>
    <label class="" for="">Identificacion</label>
    <input class="form-control" type="text" name="" value=""> **<!--Este input es el que debe recibir el valor del otro input-->**
    <select class="form-control" name="">
      <option>Seleccione la consecuencia</option>
      <option value="">Tipificacion #1 </option>
      <option value="">Tipificacion #2 </option>
      <option value="">Tipificacion #3 </option>
      <option value="">Tipificacion #4 </option>
      <option value="">Tipificacion #5 </option>
    </select>
    <textarea class="form-control" name="name" rows="8" cols="80" placeholder="Observaciones"></textarea>
    <a class="btn btn-default" href="#" role="button" onclick='window.close();'>Guardar y cerrar</a>
  </body>
</html>
2
  • 1
    Tienes 2 posibilidades, utilizar javascript o algun lenguaje del lado del servidor (php, jsp, asp) para recibir el parametro por POST o GET e imprimirlo en el input del segundo html. Pero no especificas con que lenguaje lo vas a realizar
    – Spank
    el 26 abr. 2018 a las 21:00
  • Spank lo desearía hacer con javascript el 26 abr. 2018 a las 21:02

3 respuestas 3

0

Para enviar lo que tienes en el input debes seguir este ejemplo que te dejo: en la primera parte del código viene la forma en la que debes enviar la información que se ingresa en el input:

<form action="segundo.html" method="get">
  <input name="filtro">
  <input type="submit" value="presiona aqui para enviar los datos">
</form>

en el otro html debes ingresar el siguiente codigo para recibir la informacion y ponerla en el nuevo input

<input type="text" id="aqui">
<script type="text/javascript">
var url_string = window.location.href; //
var url = new URL(url_string);
var c = url.searchParams.get("filtro");
document.getElementById("aqui").value = c;
</script>
1
  • Spank la solución es muy buena para abrir un nuevo html y grabar la información del input allí, peor cuando intento implementarlo en un popUp no funciona. el 26 abr. 2018 a las 22:26
0

Te explico como solucionarlo, solo debes cambiar la funcion de tu enlace

<a class="btn btn-default" href="FormGestion.html" target="_blank" onClick="abrir_popup(this.href,this.target)" role="button">PopUp</a>

y despues de

</head>

debes colocar este codigo

<script type="text/javascript">
        function abrir_popup(url,ubicacion){
            window.open(url+'?filtro='+document.getElementById('inputPassword').value, ubicacion, 'width=300,height=500'); return false;
        }
    </script>

y para recibirlo en FormGestion.html

debes cambiar reemplazar esta linea donde tienes el comentario

<input class="form-control" type="text" name="" value="" id="aqui">

y para terminar, despues de

</body>

agregas esto

<script type="text/javascript">
  var url_string = window.location.href; //
  var url = new URL(url_string);
  var c = url.searchParams.get("filtro");
  document.getElementById("aqui").value = c;
  </script>

y con esto deberia de funcionar

2
  • No funciono, este es el html1 el 26 abr. 2018 a las 23:13
  • <div id="buscar"> <form class="form-inline" action="FormGestion.html" method="get"> <div class="form-group"> <input class="form-control" placeholder="Identifiacion" name="filtro"> <!--Este es el input que captura la informacion --> <a class="btn btn-default" href="FormGestion.html" target="_blank" onClick="abrir_popup(this.href,this.target,)" role="button">PopUp</a> <!--<input class="form-control" type="submit" value="Gestionar">--> </div> </form> </div> el 26 abr. 2018 a las 23:13
0

Si funciona, te dejo el enlace con el codigo completo

html1

https://jsfiddle.net/c2ex1knb/

html2

https://jsfiddle.net/whb6fx0k/

1
  • Si efectivamente tienes razon, funciono; muchas gracias por tu ayuda. el 27 abr. 2018 a las 13:47

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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