I have this form, it works perfectly but when submitted/failed it swaps to another page where the message is showed.
HTML
<form action="envio.php" method="post">
<label>Nombre </label>
<input type="text" name="name"><br>
<label>Email</label>
<input type="text" name="email"><br>
<label>Teléfono</label>
<input type="text" name="phone"><br>
<label>Mensaje</label>
<textarea name="message"></textarea><br>
<input id="submit" type="submit" name="submit" value="Enviar">
</form>
envio.php
if(isset($_POST['submit'])){
$to = "email@gmail.com"; // email destinatario
$from = $_POST['email']; // email del cliente
$name = $_POST['name'];
$phone = $_POST['phone'];
$mes = $_POST['message'];
$subject = "Formulario web";
$subject2 = "Copia de su formulario de consulta";
$message = $name . " con número de teléfono: " . $phone . " escribió lo siguiente:" . "
" . $_POST['message'];
$message2 = "Aquí tiene una copia de su mensaje " . $name . "
" . $_POST['message'];
$headers = "From:" . $from;
$headers2 = "From:" . $to;
$success = (preg_match("/^[0-9]{9}$/",$phone) && preg_match("/^[a-zA-Z]*$/",$name) && $mes!='' && filter_var($from, FILTER_VALIDATE_EMAIL));
if ($success){
mail($to,$subject,$message,$headers);
mail($from,$subject2,$message2,$headers2); // copia para el cliente
echo "Formulario enviado. Muchas gracias " . $name . ", en breve contactaremos con usted.";
}
else {
echo "Lo sentimos, se ha producido un error al enviar el formulario, revise su contenido y vuelva a intentarlo.";
}}
I just want to show the messages in the if/else
under the 'send' button after click it, without refresh, I think it can be done with JQuery/Vanilla but I have no clue. How can JS know if the form was submitted successfully? How can I tell JS where to insert the message?