this is one of what I have tried.
<script>
document.getElementById("button").addEventListener("click", redirectFunction);
function redirectFunction(){
window.location.href = "paymentsuccess.php";
}
</script>
<form action="payment3.php" method="post">
<div class ="transaction">
<label style="font-size:20px">Paying for:</label>
<select name="Namelist">
<?php
while ($namelist = mysqli_fetch_array(
$all_name,MYSQLI_ASSOC)):
?>
<option value="<?php echo $namelist["UserID"];
// The value usually set as the primary key
?>">
<?php echo $namelist["Name"];
// To show the name list to the user
?>
</option>
<?php
endwhile;
// While loop must be terminated
?>
</select>
<br>
<div class = "transaction1">
<label style="font-size:20px">Enter amount to pay:</label>
<input style="color: darkgray" type ="text" size = "15" maxlength="7" name="amount" id="amount" pattern="(\d{3})[\.])(\d{2})" ondrop="return false;" onpaste="return false;"
onkeypress="return event.charCode>=48 && event.charCode<=57" **required**>
</div>
</div>
<div>
<input type="submit" value="Pay" name="submit" id="button" onclick="redirectFunction()"/>
<input type="hidden" name="submitted" value="" />
</div>
</form>
after I click the submit button after input, it will save to the database but not redirect to the next page. but after I click the submit button for the second time, only then it will redirect to the next page. required validation form also does not work.