Sé que hay numerosas preguntas y respuestas sobre cómo evitar que la página se vuelva a cargar después de enviar un formulario con AJAX, pero no pude hacer que la mía funcionara. Intenté configurar el botón para type: button que simplemente deshabilita el botón por completo. Cuando intento onsubmit: return false en el formulario, esto da como resultado que nada haga clic en el botón. El uso de jQuery para evitar el valor predeterminado tampoco funcionó. Lo que quiero es enviar este correo electrónico con PHP recuperando datos del formulario sin que la página se vuelva a cargar. Cualquier ayuda sería muy apreciada.
<?php include('php/interuni_process.php');?> <form class="form_pro" action="index.php" method="post" role="form"> <input type="text" class="form" name="E-mail" placeholder="E-mail" value="<?= $email ?>"> <div class="error"><?= $email_error ?></div> <button name="submit" type="submit" class="action_button"></button> </form> $email_error = ""; $email = ""; if ($_SERVER["REQUEST_METHOD"] == "POST") { if (empty($_POST["E-mail"])) { $email_error = "E-mail is required"; } else { $email = test_input($_POST["E-mail"]); if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { $email_error = "Invalid email format"; } } if ($email_error == '' ){ unset($_POST['submit']); $to = " Whoever <$email>"; $subject = 'Hello'; $message = "Hello, $firstname!"; if (mail($to, $subject, $message, $headers)){ $email = ''; } } } function test_input($data) { $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); return $data; }yo también he intentado
$( document ).ready(function() { $(".form_pro").submit(function(e) { e.preventDefault(); $.ajax({ type: "POST", url: "php/interuni_process.php", data: $(this).serialize(), success: function(data) { }, error: function() { } }); }); });Creo que tienes que cambiar el flujo lógico para hacerlo. prueba el siguiente código que he probado en mi PC.
<script src="jquery-1.11.1.js"></script> <form id="myData" class="form_pro" method="post" role="form"> <input type="text" class="form" name="E-mail" placeholder="E-mail" value=""> <div class="error"></div> <button name="submit" type="button" class="action_button" onclick="doSubmit();">OK</button> </form> <script> function doSubmit(){ $.ajax({ url:'interuni_process.php', data:$("#myData").serialize(), type:'POST', success: function (data, textStatus, jqXHR) { if(data==="SUCCESS"){ $(".error").text("No error occurred"); }else{ $(".error").text("Error occurred: "+ data); } } }); }; </script>y el código de muestra para "interuni_process.php" es
<?php $eMail=$_POST["E-mail"]; if($eMail===""){ //or whatever process condition you want to do echo "Email cannot be blank"; }else{ echo "SUCCESS"; } ?>modificar la lógica empresarial según sus requisitos
En primer lugar, elimina la acción de la etiqueta HTML <form>
<form class="form_pro" method="post" role="form">después del cambio, agregue return false a su función jquery como se muestra a continuación
$(document).on('submit','.form_pro',function(){ $.ajax({ url:'interuni_process.php', type:'POST' }); return false; });