Estoy usando Ajax con un formulario en Ajax. He usado una condición if para la validación. Si mi formulario está vacío, debería mostrar un mensaje de que todos los campos son obligatorios y si los campos están llenos, debería agregar datos en dB y mostrar un mensaje de éxito aunque todo está funciona perfectamente, excepto una cosa: mi salida solo se muestra durante un segundo y luego desaparece automáticamente. ¿Alguien puede ayudarme en este sentido?
`
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <script src="jquery.js"></script> <link rel="stylesheet" type="text/css" href="stylesheet.css"> </head> <body> <h1>PHP & Ajax Seralize Form</h1> <form id="form-data" method="post"> Name<br><input type="text" name="name" id="name" value=""><br><br> Age<br><input type="number" name="number" id="age" value=""><br><br> Gender<br> <input type="radio" name="gender" value="Male">Male <input type="radio" name="gender" value="Female">Fe-male<br><br> <select name="country"> <option value="Kashmir">Kashmir</option> <option value="Egypt">Egypt</option> <option value="Norway">Norway</option> <option value="Iceland">Iceland</option> </select><br> <br><input type="submit" id="submit" value="Save"> </form> <div id="response"> </div> <script> $(document).ready(function(){ $('#submit').click(function(){ var name = $('#name').val(); var age = $('#age').val(); if( name== "" || age== ""){ $('#response').fadeIn(); $('#response').removeClass('success-msg').addClass('error-msg').html("All fields are required"); }else{ $.ajax({ url: 'save-form.php', type: 'POST', data: $('#form-data').serialize(), success: function(result){ $('#response').fadeIn(); $('#response').removeClass('error-msg').addClass('success-msg').html(result); } }); } }); }); </script> </body> </html>`
probablemente su página esté actualizada, intente usar preventDefault para evitar la actualización
$('#submit').click(function(event){ //your code here event.preventDefault(); }Tienes un botón con el tipo "submit" .
<input type="submit" id="submit" value="Save">A medida que se produce el evento de clic en este botón, su formulario se enviará al servidor. No tiene un atributo de acción definido en su formulario, por lo que se redirige después de enviarlo a la misma URL.
Como dijo Sterko , podría usar un controlador de eventos para evitar el envío de su formulario debido al botón de envío.