There’s a need to update a form data and in the same function – submit if the data is correct.

a flow in an onClick function:

1. get the data from the server and update input fields’ values (I use $.each( result.post_vals, function( entry, new_val ) {$('#' +entry).val(new_val);}))
2. update an action url (i use $('#form').attr('action', response.result.new_form_action_url) )
3. submit the form, the page should ‘redirect’ – open a payment gateway page using the data I just updated.

And I experience quite a weird behavior – the values, I supposedly just updated via the $('#' +entry).val(new_val) call are not submitted while form URL is updated.

I tried to use several approaches playing with it 3 days, but failed.

Any idea?

The code (a bit simplified) as follows
// HTML

<form name="cart_form" id="cart_form" class="form-inline" method="post">
<input type="hidden" name="pp_biz_id" value="">
     <input type="hidden" name="pp_user_guid" value="">
     <input type="hidden" name="pp_parm1" value="">
     <input type="hidden" name="orderid" value="">
     .....
     <input type="hidden" name="pp_doc_name" value="">
     <input type="submit" name="checkout" value="DO IT">
</form>

// JS

    $(document).on('click','[name="checkout"]',function()   {
    //e.preventDefault();
        console.log('shopping_cart_save_addr')
    var form = $('#cart_form');
    var pageData = form.serialize()
        console.log(pageData); 
        $.ajax({
            type: "POST",
            url: "get_data.php",
            data: pageData,
            dataType: 'json',
            success: function(response) {
                console.log(response);
                if(response.success){
                    if(response.result){
                        if (response.result.form_url) {
                            $('#cart_form').attr('action', response.result.form_url);
                        }
                        if (response.result.post_vals) {
                            console.log(response.result.post_vals)
                            $.each( response.result.post_vals, function( entry, new_val ) {
                                $('#' +entry).val(new_val);
                                console.log(entry + ': ' + new_val);
                            });
                        }
                    }
                    $('#cart_form').submit();
                } else {
                    console.log(response);
                    if (response.result.html) {
                        $('#result').html = response.result.html;
            }}}
        });});});

PROBLEMS:

• When I use onClick(), I’m unable to update input values just before the form submit.
• When I use onSubmit(), I’m unable to update the action url before submit OR my call is performed in the background, what is not my intention

// and yes, it looks I read and tried all the materials here, including Changing name of keys,values and action url of form before submit