Trying to add with jQuery action for a form before submit

Question

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/dxds@ds.commm');
            //$('#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;
}

Please provide a Minimal, Reproducible Example: https://stackoverflow.com/help/minimal-reproducible-example It is best to use the Resulting HTML in your example. — Twisty, Aug 01 '22 at 21:58
I submit the form after adding the attribute. I need to add it before submitting. — Roland Iordache, Aug 01 '22 at 22:03
How to submit and cancel and validate even asynchronously? Read my recent answer it's short https://stackoverflow.com/a/72927267/3807365 — IT goldman, Aug 01 '22 at 22:20

score 1 · Accepted Answer · answered Aug 01 '22 at 22:33

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>

Trying to add with jQuery action for a form before submit

1 Answers1