vista previa bloqueando formulario antes de enviar

[manuel2788]

Buenas tardes,

Resulta que, tengo un formulario en el cual quiero que el boton de submit antes de enviarlo previsualice una vista previa de los datos que el usuario esté enviando.

Dicha previsualisación, quiero se muestre en la misma página, solamente bloqueando todos los campos y luego de que el usuario verifique y acepte, estos datos procedan a enviarse.

En javascript estoy comenzando y no tengo mucho conocimiento... estaría muy agradecido si alguien me tendiera una mano. A continuación les colocaré un pequeño fragmento de mi form, para que así entiendan un poco mejor lo que quiero y vean como lo estoy trabajando.

Código:

<form id="form" #form action="insert_futbol.php" method="post" target="_top">
    
    <fieldset>
    <label>blabla</label>
    	<input name="nombre1" type="checkbox" class="checkbox" />
        <input name="nombre2" type="checkbox" class="checkbox" />
        <input name="nombre3" type="checkbox" class="checkbox" />
        <input name="nombre4" type="checkbox" class="checkbox" />
    </fieldset>
    
    <fieldset>
    <label>blabla2</label>
    	<input name="segundonombre1" type="checkbox" class="checkbox" />
        <input name="segundonombre2" type="checkbox" class="checkbox" />
        <input name="segundonombre3" type="checkbox" class="checkbox" />
        <input name="segundonombre4" type="checkbox" class="checkbox" />
    </fieldset>
    
    <fieldset>
    <label>blabla3</label>
    	<input name="tercernombre1" type="checkbox" class="checkbox" />
        <input name="tercernombre2" type="checkbox" class="checkbox" />
        <input name="tercernombre3" type="checkbox" class="checkbox" />
        <input name="tercernombre4" type="checkbox" class="checkbox" />
    </fieldset>
    

    <fieldset>
    
    	<input type="reset" class="reset" value="Reset" />
    	<input type="submit" class="submit" value="Enviar" />
        
    </fieldset>
</form>

Gracias de antemano.

[maycolalvarez]

podrías usar un lightbox, y cambiar el botón submit por uno normal que te abra dicho lightbox y mostrar los datos, con el mismo colocas otro botón que por medio de javascript realice el submit del form en caso e confirmar, y otro botón que simplemente cierre el lightbox en caso de cancelar.

[manuel2788]

Buenos días, gracias por responder.

Para hacerlo más sencillo, solo voy a utilizar un mensaje que le recuerde al usuario verificar los datos introducidos antes de proceder a enviar el formulario.

No tengo conocimientos avanzado en js, entonces, agarre un troso de código que estoy utilizando para validar un checkbox en el formulario de registro de mi site, el cual consiste en verificar si dicho checkbox ha sido marcado o no.

<script language="javascript">

function marcado() {
if (document.form.enviar.checked) {
document.form.submit();
}
else{
alert("verifique que los datos introducidos sean los correctos");
document.form.enviar.focus();
return false;
}

}
</script>

Mi pregunta: Hay manera de adaptarlo para que, a la hora de presionar en el boton submit, este script además de darle el mensaje de "verifique que los datos introducidos sean los correctos" le muestre dos botones uno para avanzar y enviar dichos datos a la base de datos y otro para cancelar el envio y volver al formulario?

Gracias de antemano.