Trying to add with jQuery action for a form before submit-CodePudding

I have a login system and only logged in users can access this form. I use php as back end (Wordpress API). I am trying to add the email from the logged in user to an endpoint as you can see. Now it's hardcoded. The problem is that after submitting the form, the page is simply reloading and it don't submit the form with the action attribute.

I tried to hardcode the string (without appending it) and it's working. Also the action attribute is added if I do not submit the form (I can see it inspecting the element). What is the problem and why the form is not being submited with the action attribute added before?

jQuery code:

 $('#firebase-checkout4').submit(function(event){
            event.preventDefault();
            $('#firebase-checkout4').attr('action', '/wp-json/api/checkout4/[email protected]');
            //$('#firebase-checkout4').submit();
            return true;
        });

PHP code:

public static function firebase_checkout4_func() {
    $html = "";
    $html .= "<form id='firebase-checkout4' method='POST'>
                <button type='submit' id='checkout-button'>Începe acum</button>
            </form>";
    return $html;
}

CodePudding user response：

Instead of submit, you can run the function on clicking of the checkout button.

The URL in my answer is a test URL for form post testing from (https://ptsv2.com/).

$('#checkout-button').on("click",function(event) {
  event.preventDefault();
  $('#firebase-checkout4').attr('action', 'https://ptsv2.com/t/7t3ju-1659392884/post');
  $('#firebase-checkout4').submit();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id='firebase-checkout4' method='POST'>
  <button type='submit' id='checkout-button'>Începe acum</button>
</form>