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.
 
    