Obtuve un html simple que tiene 2 formularios, el problema es que si uno de ellos se envía, la página se recarga o actualiza y esto afecta al otro formulario que se vacía.
He usado el método .prevent de jquery para evitar que ambos se envíen, pero ese no es el que causa el problema.
¿Hay técnicas o formas de hacer esto? por favor ayuda
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> </head> <body> <form id="letters" method="post"> <select id="letter_select" name="letter_select"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> </select> <button id="btn-letter" type="button">Submit</button> </form> <form id="name" method="post"> <select id="name_select" name="name_select"> <option value="Aaron">Aaron</option> <option value="Brandy">Brandy</option> <option value="Calley">Calley</option> <option value="Dough">Dough</option> </select> <button id="btn-name" type="submit" name="name_submit">Submit</button> </form> <script> $('#letters').submit(function(){ event.preventDefault(); }); $('#name').submit(function(){ event.preventDefault(); }); $('#btn-name').one("click", function(){ $('#letters').submit(); }); </script> <!-- <?php $name_sub = $_POST['name_submit']??''; $name_select = $_POST['name_select']??''; if (isset($name_sub)) { echo $name_select; } ?> --> </body> </html>