Dispongo de un formulario de registro en HTML, que adjunto a continuación.
<form id="registerForm"> <input type="text" pattern="[A-Za-z]{1,20}" placeholder="First Name" name="guestFName" title="Up to 20 alphabetical characters" required> <input type="text" pattern="[A-Za-z]{1,20}" placeholder="Last Name" name="guestLName" title="Up to 20 alphabetical characters" required> <input type="email" placeholder="Email" name="guestEmail" title="Must be a valid email address" required> <input type="text" pattern="08[36579]-\d{7}" placeholder="Phone Number" name="guestPhone" title="Must be an irish mobile number of format 08?-7 digits" required> <input type="password" pattern="(?=.*\d)(?=.*[az])(?=.*[AZ]).{8,20}" placeholder="Password" name="guestPassword" title="Must be 8 or more characters long and contain at least one number and one uppercase letter" required> <br> <button id="myButton">Register</button> </form>Estoy tratando de publicar la información del formulario cuando alguien lo completa en una API de Python que luego insertará la información en una base de datos MySQL.
Quiero la funcionalidad de los patrones requeridos en el HTML.
Estoy usando jQuery 3.1.1 y Ajax para publicar los datos del formulario en la API.
Mi JQuery/Ajax se adjunta a continuación:
$("#registerForm").submit(function() { $.ajax( { url: "URL_GOES_HERE", data: $('#registerForm').serialize(), type: 'POST', async: false }) .done(function(response) { console.log(response); var result = JSON.parse(response); }) });Sin embargo, creo que esto debería funcionar si completo el formulario y hago clic en el botón Registrar, vuelve a cargar la página y solo agrega la información del formulario a la URL.
Un ejemplo de esto es:
URL_GOES_HERE/register.html?guestFName=Joe&guestLName=Bloggs&guestEmail=bloggs%40gmail.com&guestPhone=087-1111111&guestPassword=TestPassword1¿Por qué se comporta así?
Toda ayuda es muy apreciada
EDITAR: e.preventDefault(); no soluciona el problema.
Creo que debería usar <input type='button'> en lugar de <button> y simplemente usar el evento .click() de ese <input type='button'> como se muestra a continuación.
Cambio
<button id="myButton">Register</button>A
<input type='button' id='btnRegeister' value='Register'/>y en js
Cambio
$("#registerForm").submit(function()A
$("#btnRegeister").click(function()Entonces todo su código se convierte en el siguiente ahora ...
<form id="registerForm"> <input type="text" pattern="[A-Za-z]{1,20}" placeholder="First Name" name="guestFName" title="Up to 20 alphabetical characters" required> <input type="text" pattern="[A-Za-z]{1,20}" placeholder="Last Name" name="guestLName" title="Up to 20 alphabetical characters" required> <input type="email" placeholder="Email" name="guestEmail" title="Must be a valid email address" required> <input type="text" pattern="08[36579]-\d{7}" placeholder="Phone Number" name="guestPhone" title="Must be an irish mobile number of format 08?-7 digits" required> <input type="password" pattern="(?=.*\d)(?=.*[az])(?=.*[AZ]).{8,20}" placeholder="Password" name="guestPassword" title="Must be 8 or more characters long and contain at least one number and one uppercase letter" required> <br> <input type='button' id='btnRegeister' value='Register'/> </form> $(document).ready(function(){ $("#btnRegeister").click(function() { $.ajax( { url: "URL_GOES_HERE", data: $('#registerForm').serialize(), type: 'POST', async: false }) .done(function(response) { console.log(response); var result = JSON.parse(response); }) }); });Pruebe el código anterior , está funcionando para mí
EDITAR : debe incluir el atributo ' tipo ' en su HTML:
<button type="submit" name="submit"></button>El uso de la función 'preventDefault' evitará el envío/redireccionamiento del formulario predeterminado. Esto detendrá el comportamiento no deseado.
$("#registerForm").submit(function(e) { e.preventDefault(); // Add this $.ajax( { url: "URL_GOES_HERE", data: $(this).serialize(), type: 'POST', async: false }) .done(function(response) { console.log(response); var result = JSON.parse(response); }) });necesita un preventDefault () para evitar el comportamiento predeterminado del formulario
$("#registerForm").submit(function(e) { e.preventDefault(); $.ajax( { url: "URL_GOES_HERE", data: $('#registerForm').serialize(), type: 'POST', async: false }) .done(function(response) { console.log(response); var result = JSON.parse(response); }) });