5

Necesito que al presionar el botón "Generar" me cargue un enlace en el div "Certificado".

DIV COLOREADO EN NEGRO DONDE QUIERO VISUALIZAR EL OTRO ENLACE

    <div class="container-fluid">
    <div class="side-body">
    <h1 class="titleh">Generar Certificado</h1>
    <div style="width: 40%;">
    <form action="#">
        <div class="form-group">
          <label for="dirigido">Dirigido a:</label>
          <input type="text" class="form-control" name="dirigido" id="dirigido" placeholder="Ingrese un valor">
        </div>
        <div class="form-group">
          <label for="cc">Cedula:</label>
          <input type="password" class="form-control" name="cc" id="cc" placeholder="Ingrese Cedula">
        </div>
        <input type="submit" value="Generar" name="Generar" class="btn btn-sm" style="color: white; background: #006050;">
    </form>
    </div>
    <br><br><br>
    <div class="container" style="width: 100%; height: 490px; background-color: #A7A7A7"></div>

    </div>
</div>
5
  • ¿Específicamente qué necesitas que se cargue en dicho div? ¿Qué haz intentado en tu javascript y/o jquery?
    – Jorius
    Commented el 2 mar. 2017 a las 19:02
  • al hacer clic en generar cargue por ejemplo este link ejemplo.php?cc=23456 pero quiero que lo cargue dentro de ese div.container
    – ByGroxD
    Commented el 2 mar. 2017 a las 19:05
  • 1
    Edita tu respuesta, añadiendo este comentario y corrigiendo el HTML porque veo que le faltan tags al principio
    – Jorius
    Commented el 2 mar. 2017 a las 19:07
  • @ByGroxD una pregunta vas a enviar el formulario y recuperar la informacion que devuelve el servidor y mostrarlo en el div?
    – JuankGlezz
    Commented el 2 mar. 2017 a las 19:17
  • @JuankGlezz si amigo asi es, lo que el input CC Y el input dirigido, no importa si se envian por post o por get lo que necesito es que cargue los valores en ese div container
    – ByGroxD
    Commented el 2 mar. 2017 a las 19:21

4 respuestas 4

7

Por lo que dices en la pregunta y en los comentarios, la URL a la cual consultar se genera por medio de la cédula (cc) tomando como base una URL cualquiera que, supongo por motivos de seguridad, no puede ser mostrada aquí.

Se asume que el contenido a obtener está en el mismo dominio. En caso contrario, se debe verificar las reglas CORS en el servidor destino.

Sabiendo esto, lo único que debes hacer es hacer una petición AJAX a dicha URL para descargar el HTML:

$('form').on('submit', function (e) {
  e.preventDefault();

  let cc = $(this).find('#cc').val();
  $('.container').load(BASE_URL + '?cc=' + cc); 
});

Si dicha petición te devuelce contenido dinámico, es mejor usar un object o iframe para cargar dicha URL directamente en el documento. Por ejemplo:

HTML

<obejct data="" type="text/html" id="certificado"></object>

JavaScript

$('form').on('submit', function (e) {
  e.preventDefault();

  let cc = $(this).find('#cc').val();
  $('certfificado').attr('data', BASE_URL + '?cc=' + cc);
});

La URL es externa y no puedo consumirla desde el cliente. ¿Qué puedo hacer?

En ese caso, te basta descargar el HTML en el servidor en lugar del cliente:

// archivo get_external_html.php
<?php echo file_get_contents($_GET['url']); ?>

Y la petición AJAX debe hacerse a este archivo.

$('.container').load('//get_external_html.php?url=http://externo.com?cc=' + cc);

O embebido:

<object data="'//get_external_html.php?url=http://externo.com?cc=af7s5f5w" type="text/html"></object>
5

Primero modificaría unas cuantas cosa a tu formulario

  • Quite el action="#" solo para evitar refrescar la pagina al enviar el form.
  • Cambie el input por un button y quite el tipo submit ya que no vamos a actualizar la pagina ni refrescarla.

 

<form name="Certificado">
  <div class="form-group">
    <label for="dirigido">Dirigido a:</label>
    <input type="text" class="form-control" name="dirigido" id="dirigido" placeholder="Ingrese un valor">
  </div>
  <div class="form-group">
    <label for="cc">Cedula:</label>
    <input type="password" class="form-control" name="cc" id="cc" placeholder="Ingrese Cedula">
  </div>
  <button name="Generar" class="btn btn-sm" style="color: white; background: #006050;">Generar</button>
</form>

<br><br><br>
<div class="container" style="width: 100%; height: 490px; background-color: #A7A7A7"></div>

yo haria el submit com la función click con jQuery

$('button[name="Generar"]').on('click', function(){
  //serializamos el formulario el cual el formato a serializar seria
  //dirigido=embajada&cc=123456
  var datos = $('form[name="Certificado"]').serialize();
  //hacemos la peticion ajax para enviar la informacion del formulario y mostrar los datos en el div
  $.ajax({
    type: 'POST',
    url: 'url/destino',
    data: datos,
    success: function (data) {
      //mostrando que recibe data
      console.log(data)
      //mostrando los datos en el div si recibe un html
      $('.container').html(data);
    },
    error: function(objXMLHttpRequest){
      //mostrando el error
      alert("error" );
    }
  });
});
2

Crea una funcion 'Onclick' y llena el registro que necesitas o crea una función en JQuery que verifique cuando sea un evento de submit en ese momento realiza la función que necesitas

2

Utilizando la función .load() vas a poder cargar lo que este en otra página y ponerla donde desees

function cargaContenido() {
  $('#container').load('documento.php');
}

<input type="submit" value="Generar" name="Generar" ... onclick='cargaContenido()'>
3
  • haber supongo que el enlace hace referencia a una pagina y esa pagina es la que el quiere cargar, ademas fijate en el tamaño que el le da al div si fuera para mostrar un enlace no seria tan grande Commented el 2 mar. 2017 a las 19:15
  • Hola, pero quiero ir a una url que genera el formulario el cual se envia por get por ejemplo " certificado.php?dirigido=embajada&cc=1234567 "
    – ByGroxD
    Commented el 2 mar. 2017 a las 19:24
  • pero de donde obtienes url que quieres cargar? Commented el 2 mar. 2017 a las 19:44

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.