Primero modificaría unas cuantas cosa a tu formulario
- Quite el
action="#"
solo para evitar refrescar la pagina al enviar elform
. - Cambie el
input
por unbutton
y quite el tiposubmit
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 submitsubmit
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" );
}
});
});