I got a simple html that has 2 forms, the problem is if one of them is submitted the page reloads or refreshes and this affects the other form which is emptied.
i have used the .prevent method of jquery to prevent them both from submitted but that isn't the one causing problem.
are there techniques or ways to do this? please help
<!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>