0

Hola quiero hacer un generador de firmas el cual tome los datos de un formulario y los vuelque en otro html.

este es el formulario. ....................................................................................................................................................................................................................................................................

                 <h6 class="text-muted">NOMBRE DE LA EMPRESA</h6>
                <h2>GENERADOR DE FIRMA</h2>
            
                    <div class="form-row">
                        <div class="form-group col-md-6 first">
                             <label for="inputFirstName">NOMBRE <span>*</span></label>
                             <input type="text" class="form-control" id="inputNombre" name="firstname" required>
                             <div id="fname_error" class="val_error"></div>
                           </div>
                           <div class="form-group col-md-6 first">
                              <label for="inputLastName">APELLIDO <span>*</span></label>
                              <input type="text" class="form-control" id="inputApellido" name="lastname">
                              <div id="lname_error" class="val_error"></div>
                        </div>  
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-6">
                             <label for="inputEmail">CORREO <span>*</span></label>
                             <input type="email" class="form-control" id="inputCorreo" name="youremail">
                             <div id="email_error" class="val_error"></div>
                           </div>
                           <div class="form-group col-md-6">
                              <label for="inputPhone">TELEFONO <span>*</span></label>
                              <input type="text" class="form-control" id="inputTelefono" name="yourphoneno">
                              <div id="phone_error" class="val_error"></div>
                        </div>  
                      </div>
                      <div class="form-group mt-0">
                        <label for="exampleFormControlTextarea1">PUESTO <span>*</span></label>
                        <input type="puesto" class="form-control" id="inputPuesto" name="youremail">
                      </div>
                      <div class="form-check form-check-inline">
                          <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
                          <label class="form-check-label" for="inlineCheckbox1">&nbsp;&nbsp;Send me offers & updates</label>
                    </div>
                    <div class="form-button pt-4">
                      <a  class="MiBotonUTNnav"  onclick="capturarYmostrar()">GUARDAR</a>
                      <a  class="MiBotonUTNnav" onclick="location.href='firma.html'">GENERAR</a>
                    </div>
            </div>
        </div>
    </div>

MI idea es crear una función en js que capture los datos y lo vuelque en este otro html pero no se me ocurre la manera, solo puedo capturar los datos en una función pero no se como esos datos mandárselos al otro html.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!--Lógica-Programación-->
    <script type="text/javascript" src="logica.js"></script>
    <!--Final de Lógica-Programación -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- Tabla Principal -->
<table style="border: 1px solid #e2e2e2;" cellpadding="5">
    <tbody>
<!-- Fila principal -->
        <tr>
            <!-- Columna con logotipo -->
            <td style="border-right: 1px solid #e2e2e2;"> <img style="width: 150px;" src='http://subirimagen.me/uploads/20180829154046.png'  /></td>
            <!-- Columna de información de empresa -->
            <td>
                <table style="font-family: Arial, Helevtica, sans-serif; font-size: 14px; color: #111628;" cellpadding="4">
                    <tbody>
                        <input type="text" class="form-control" id="trNombreCompleto" name="firstname" required>
                          <a  class="MiBotonUTNnav" onclick="capturarYmostrar()" >GENERAR</a>
                        <tr><td style="font-weight: bold;">Gerente | Empresa Videoteknicas</td></tr>
                        <tr><td style="padding-top: 10px;"> <img style="float: left; padding-right: 10px;" src="https://png.icons8.com/metro/15/111628/phone.png"> +52-5555-5555</td></tr>
                        <tr><td> <img style="float: left; padding-right: 10px;" src="https://png.icons8.com/material/15/111628/new-post.png"> <a style="text-decoration: none; color: #111628;" href="mailto:[email protected]">[email protected]</a></td></tr>
                        <tr><td> <img style="float: left; padding-right: 10px;" src="https://png.icons8.com/material/15/111628/internet.png"> <a style="text-decoration: none; color: #111628;" href="http://www.youtube.com">www.youtube.com</a></td></tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>

1 respuesta 1

1

Puedes usar URLSearchParams

1.- Colocaré un ejemplo mínimo de un formulario, esto vendría a ser tu primera web. Debes adecuarlo a tus necesidades

function Generar() {
   let parms = new URLSearchParams(new FormData(ElForm)).toString();
  // location.href = 'firma.html?' + parms; //<<descomentar esto
   console.log(parms);
}
<form id="ElForm">
    <input type="text" name="input1" />
    <select name="input2">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <input type="checkbox" name="input3" />
    <button type="button" onclick="Generar()">GENERAR</button>
</form>

Con esto enviamos los valores del form a otra web, mediante la URL

2.- En la web 2 debes recibirlos, para esto puedes ocupar el siguiente script

document.addEventListener("DOMContentLoaded", e => {
  let parms = new URLSearchParams(window.location.search);
  console.log(parms.get("input1"));
  console.log(parms.get("input2"));
  console.log(parms.get("input3"));
});

Con parms.get('nombre') obtienes los valores, de aquí en mas es solo ir agregando esos datos donde tu deseas. ejemplo: document.getElementById("algo").value = parms.get("namealgo"); Pero esto ya escapa al contexto de la pregunta.

No me gusta resaltar lo obvio, pero input1, input2 e input3 son los name que están en formulario de la web1. Tu debes colocar los nombres que tu ocupas, como por ejemplo 'youremail'.

9
  • gracias por tu ayuda. Tengo el siguiente problema en el input del segundo html llegan los valores en null <script> document.addEventListener("DOMContentLoaded", e => { let parms = new URLSearchParams(window.location.search); document.getElementById("firstname").value= parms.get("inputNombre"); console.log(parms.get("inputNombre")); }); </script> estoy cometiendo algun error? Commented el 9 nov. 2022 a las 16:38
  • En let parms = new URLSearchParams(window.location.search); aqui deberia poner la ubicación del primer form? Commented el 9 nov. 2022 a las 16:46
  • @GonzaloTrillo Me parece que tienes al revés el asunto document.getElementById -> ahí pones la ID del elemento y en parms.get() --> lo que está en el name del elemento (de la primera web). Recuerda que si mi respuesta te ha servido puedes marcarla como aceptada si así lo deseas. Cualquier cosa me avisas
    – Yussef
    Commented el 9 nov. 2022 a las 20:41
  • Nono los tengo del lado correcto, osea en el document.getElementById tengo el de la segunda pagina y el get lo recibo de la primera. Commented el 10 nov. 2022 a las 3:25
  • enlace este es el codigo Commented el 10 nov. 2022 a las 3:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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