EDIT #1: <Start>
The problem described here is solvable as:

Code: Select all
$("#add_new_address").click(function(event) {   
    event.preventDefault();
    var addr_type = $("#addr_type").val();
    var user_addr_1 = $("#user_addr_1").val();
    var user_addr_2 = $("#user_addr_2").val();
    var user_city = $("#user_city").val();
    var user_state = $("#user_state").val();
    var user_pincode = $("#user_pincode").val();
    $.ajax({
   type: 'POST',
   dataType: 'json',
   url: "<cms:show k_site_link />ajax/save-address-at-checkout.php?customer_address="+<cms:show user_id_for_address />+"&addr_type="+addr_type+"&user_addr_1="+user_addr_1+"&user_addr_2="+user_addr_2+"&user_city="+user_city+"&user_state="+user_state+"&user_pincode="+user_pincode,
   success: function(response) {
       if(response != 'ERROR') {
        window.history.replaceState( null, null, window.location.href );
       }
        }
    });
});


Where:
1. add_new_address = Button id
2. addr_type, user_addr_1, user_addr_2 , etc = Input text field ids

But I did not use the approach for multi-step form, as there were a lot of scenarios which were demanding nested forms. HTML 4 does not allow this, nor does HTML 5 (atleast directly).
I approached it as:
1. I needed 3 templates so I created them.
2. I created AJAX Post request for a 4th template
3. The 4th template is available on all the 3 templates. in the 1st template as a DFP (create) and in the 2nd, 3rd as DBF (Edit).
So I am sending the page id (got in the AJAX response as k_last_insert_id, which I have production doubts, and will update here if my doubts come to life) to the 2nd and 3rd template for being editable.

If someone has a better solution please do share.
EDIT #1: <End>

Greetings to KK Sir and All,

I am working on a checkout form. This has 3 steps, viz:
1. Review Order
2. Delivery Address
3. Make Payment

I am using the Multi Step Form.

The basis of the Multi Step form is having all steps inside one <form> tag. Now the use case that I am having has the following requirement:
1. In the Review Order Step, the login to apply Coupons is also to be implemented. The Coupons is a form in itself. Hence, the scenario of nested form's comes into play, which is not possible.
2. In Delivery Address Step, I need to show the addresses available for shipping. Now, there are two possibilities. Since during sign-up minimum details are fetched, hence the address is not filled in. Secondly, a returning customer can choose to deliver on another address too. For the addresses I have a related template which is related to the k_user_template. Also, the addresses template is routable. So I have a create_view form for the customer to fill in the address. Again I arrive at the scenario of nested form's.

I have read in the forum where in all details can be submitted at the final step of the Multi Step Form. But in this use case, the coupon discount needs to be shown during when it is applied. Also, the addresses need to be shown for selection for delivery.

This is my (unfinished) code for the attempt described above.
Code: Select all
<cms:form anchor='0' method="post">
    <cms:set total_pages = '3' />
    <cms:embed 'multi_form_handler.html' />
    <cms:if k_current_step gt total_pages >
        <h2>Thank you for contacting us</h2>
        <h4>Current Values:</h4>
        <p>
            Element 1: <cms:show frm_element_1 /><br>
            Element 2: <cms:show frm_element_2 /><br>
            Element 3: <cms:show frm_element_3 /><br>
            Element 4: <cms:show frm_element_4 /><br>
            Element 5: <cms:show frm_element_5 /><br>
            Element 6: <cms:show frm_element_6 />
        </p>     
    <cms:else /> 
        <div class="row">
            <div class="col-md-4">
                <div class="gxcpl-sequence <cms:if k_current_step eq '1' || k_current_step eq '2' || k_current_step eq '3'>active</cms:if>">
                    1. Review Order
                </div>
                <div class="gxcpl-ptop-20"></div>
            </div>
            <div class="col-md-4">
                <div class="gxcpl-sequence <cms:if k_current_step eq '2' || k_current_step eq '3'>active</cms:if>">
                    2. Delivery Address
                </div>
                <div class="gxcpl-ptop-20"></div>
            </div>
            <div class="col-md-4">
                <div class="gxcpl-sequence <cms:if k_current_step eq '3'>active</cms:if>">
                    3. Make Payment
                </div>
                <div class="gxcpl-ptop-20"></div>
            </div>
        </div>
        <cms:if k_current_step='1' >

            <div class="row">
                <div class="col-md-12">
                    <h3 class="gxcpl-no-margin text-uppercase gxcpl-block-title">
                        REVIEW ORDER
                    </h3>
                    <div class="gxcpl-ptop-20"></div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-4"></div>
                <div class="col-md-4 text-center">
                    <!-- <cms:ignore>
                    <button class="btn gxcpl-btn-orange gxcpl-shadow-card-1" onclick="window.location.href='<cms:pp_cart_link />';">
                        <i class="fa fa-edit"></i> EDIT CART
                    </button>
                    <div class="gxcpl-ptop-20"></div>
                    </cms:ignore> -->
                </div>
                <div class="col-md-4">
                    <!-- Coupon -->
                   
                        <cms:if k_success >
                            <cms:pages masterpage="<cms:pp_config 'tpl_coupons' />" custom_field="code==<cms:show frm_coupon_code /> | end_date>=<cms:date format='Y-m-d' />" limit='1'>
                                <cms:no_results>
                                    <cms:delete_session 'coupon_found' /> 
                                    <cms:delete_session 'coupon_code' />
                                    <cms:delete_session 'coupon_discount' />
                                    <cms:delete_session 'coupon_type' />
                                    <cms:delete_session 'coupon_min_amount' />
                                    <cms:delete_session 'coupon_free_shipping' />
                                   
                                    <cms:set_flash name='coupon_flash_msg' value="<p class='error'>Coupon is invalid or expired!</p>" />
                                    <cms:pp_refresh_cart />
                                </cms:no_results>
                               
                                <cms:set_session name='coupon_found' value='1' /> 
                                <cms:set_session name='coupon_code' value=code />
                                <cms:set_session name='coupon_discount' value=discount />
                                <cms:set_session name='coupon_type' value=type />
                                <cms:set_session name='coupon_min_amount' value=min_amount />
                                <cms:set_session name='coupon_free_shipping' value=free_shipping />
                               
                                <cms:if min_amount ge "<cms:pp_sub_total />" >
                                    <cms:set_flash name='coupon_flash_msg' value="<p class='notice'>Coupon discount will be applied when cart total is more than <cms:pp_config 'currency_symbol' /><cms:show min_amount />!</p>" />
                                <cms:else />
                                    <cms:set_flash name='coupon_flash_msg' value="<p class='success'>Your coupon discount has been applied!</p>" />                   
                                </cms:if>
                                <cms:pp_refresh_cart />
                            </cms:pages>
                           
                            <cms:redirect k_page_link />
                        </cms:if>
                       
                        <div class="input-group text-center">
                            <cms:input type="text" class="form-control" placeholder="Enter Coupon Code" name="coupon_code" value="<cms:get_session 'coupon_code' />" />
                            <span class="input-group-btn">
                                <button class="btn gxcpl-btn-blue" type="submit">
                                    <i class="fa fa-gift"></i> APPLY
                                </button>
                            </span>
                        </div>
                       
                   
                    <!-- Coupon -->
                    <div class="gxcpl-ptop-20"></div>
                </div>
            </div>

            <cms:if "<cms:pp_count_items />" >
                <div class="row">
                    <div class="col-md-12">
                        <div class="table-responsive-vertical shadow-z-1">
                            <!-- Table starts here -->
                            <table id="table" class="table">
                                <thead>
                                    <tr>
                                        <th width="5%"></th>
                                        <th width="60%">ITEM</th>
                                        <th width="10%">QTY</th>
                                        <th width="10%">PRICE</th>
                                        <th width="15%">TOTAL</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <cms:pp_cart_items>
                                        <cms:set page_id="<cms:show id />" scope="global" />
                                        <tr>
                                            <td data-title="REMOVE">
                                                <div class="row">
                                                    <div class="col-md-12 text-right">
                                                        <a href="<cms:pp_remove_item_link />" class="cart-remove btn gxcpl-btn-orange btn-xs">
                                                            <i class="fa fa-times"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                            </td>
                                            <td data-title="">
                                                <div class="row">
                                                    <div class="col-md-3 col-sm-3 col-xs-3">
                                                        <a href="<cms:show link />" class="gxcpl-cart-thumb">
                                                            <cms:get_field 'prod_images' masterpage='product.php' page=name >
                                                                <cms:show_mosaic "prod_images" limit="1">
                                                                    <img src='<cms:thumbnail pp_product_thumb />' alt='<cms:show k_page_title />' class="img-responsive gxcpl-shadow-card-1" width='70' height='64' style="padding: 5px;border: 1px solid #ddd;" />
                                                                </cms:show_mosaic>
                                                            </cms:get_field>
                                                        </a>
                                                        <div class="gxcpl-ptop-5"></div>
                                                    </div>
                                                    <div class="col-md-9 col-sm-9 col-xs-9">
                                                        <strong class="text-uppercase">
                                                            <a href="<cms:show link />" class="gxcpl-fc-21">
                                                                <cms:show title />
                                                            </a>
                                                        </strong>
                                                        <p><cms:pp_selected_options separator='<br>' /></p>
                                                        <div class="gxcpl-ptop-5"></div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td data-title="">
                                                <div class="row">
                                                    <div class="col-md-12 text-center">
                                                        <cms:show quantity />
                                                    </div>
                                                </div>
                                            </td>
                                            <td data-title="PRICE">
                                                <div class="row">
                                                    <div class="col-md-12 text-center">
                                                        <i class="fa fa-inr"></i> <cms:number_format price />
                                                        <br>
                                                        <cms:if line_discount>
                                                            <small class="gxcpl-fc-orange">
                                                                <del>
                                                                    <i class="fa fa-inr"></i> <cms:number_format orig_price />
                                                                </del>
                                                            </small>
                                                        </cms:if>
                                                    </div>
                                                </div>
                                            </td>
                                            <td data-title="TOTAL">
                                                <div class="row">
                                                    <div class="col-md-12 text-center">
                                                        <em>
                                                            <i class="fa fa-inr"></i> <cms:number_format line_total />
                                                        </em>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    </cms:pp_cart_items>
                                    <cms:if "<cms:pp_discount />" || "<cms:pp_shipping />" || "<cms:pp_taxes />" >
                                        <tr class="row-extras">
                                            <td data-title="SUB-TOTAL" colspan="5">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <!-- Desktop -->
                                                        <div class="hidden-sm hidden-xs text-center">
                                                            SUB-TOTAL :
                                                            <i class="fa fa-inr"></i> <cms:number_format "<cms:pp_sub_total />" />
                                                        </div>
                                                        <!-- Desktop -->

                                                        <!-- Mobile -->
                                                        <div class="hidden-lg hidden-md text-right">
                                                            <i class="fa fa-inr"></i> <cms:number_format "<cms:pp_sub_total />" />
                                                        </div>
                                                        <!-- Mobile -->
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    </cms:if>
                                    <cms:if "<cms:pp_discount />">
                                        <tr class="row-extras">
                                            <td data-title="DISCOUNT" colspan="5">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <!-- Desktop -->
                                                        <div class="hidden-sm hidden-xs text-center">
                                                            DISCOUNT :
                                                            <span class="subtract">(-)</span> <i class="fa fa-inr"></i> <cms:number_format "<cms:pp_discount />" />
                                                        </div>
                                                        <!-- Desktop -->

                                                        <!-- Mobile -->
                                                        <div class="hidden-lg hidden-md text-right">
                                                            <span class="subtract">(-)</span> <i class="fa fa-inr"></i> <cms:number_format "<cms:pp_discount />" />
                                                        </div>
                                                        <!-- Mobile -->
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    </cms:if>
                                   
                                    <cms:if "<cms:pp_shipping />">
                                        <tr class="row-extras">
                                            <td data-title="SHIPPING" colspan="5">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <!-- Desktop -->
                                                        <div class="hidden-sm hidden-xs text-center">
                                                            SHIPPING :
                                                            <i class="fa fa-inr"></i> <cms:number_format "<cms:pp_shipping />" />
                                                        </div>
                                                        <!-- Desktop -->

                                                        <!-- Mobile -->
                                                        <div class="hidden-lg hidden-md text-right">
                                                            <i class="fa fa-inr"></i> <cms:number_format "<cms:pp_shipping />" />
                                                        </div>
                                                        <!-- Mobile -->
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    </cms:if>
                                   
                                    <cms:if "<cms:pp_taxes />">
                                        <tr class="row-extras">
                                            <td data-title="TAXES" colspan="5">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <!-- Desktop -->
                                                        <div class="hidden-sm hidden-xs text-center">
                                                            TAXES :
                                                            <i class="fa fa-inr"></i> <cms:number_format "<cms:pp_taxes />" />
                                                        </div>
                                                        <!-- Desktop -->

                                                        <!-- Mobile -->
                                                        <div class="hidden-lg hidden-md text-right">
                                                            <i class="fa fa-inr"></i> <cms:number_format "<cms:pp_taxes />" />
                                                        </div>
                                                        <!-- Mobile -->
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    </cms:if>
                                   
                                    <tr class="row-total">
                                        <td data-title="CART TOTAL" colspan="5">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <!-- Desktop -->
                                                    <div class="hidden-sm hidden-xs text-center">
                                                        CART TOTAL :
                                                        <strong>
                                                            <i class="fa fa-inr"></i> <cms:number_format "<cms:pp_total />" />
                                                        </strong>
                                                    </div>
                                                    <!-- Desktop -->

                                                    <!-- Mobile -->
                                                    <div class="hidden-lg hidden-md text-right">
                                                        <strong>
                                                            <i class="fa fa-inr"></i> <cms:number_format "<cms:pp_total />" />
                                                        </strong>
                                                    </div>
                                                    <!-- Mobile -->
                                                </div>
                                            </div>                                         
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            <cms:else />
                <div class="row">
                    <div class="col-md-12">
                        <div class="alert alert-info gxcpl-shadow-card-1">
                            Your cart is empty! Lets head back and purchase. <a href="<cms:show k_site_link />" class="alert-link">Click Here</a>
                        </div>
                    </div>
                </div>
            </cms:if>
            <cms:input name="dummy_input" type="text" hidden="hidden" />
        </cms:if>

        <cms:if k_current_step='2' >
            <div class="row">
                <div class="col-md-12">
                    <h3 class="gxcpl-no-margin text-uppercase gxcpl-block-title">
                        Delivery Address
                    </h3>
                    <div class="gxcpl-ptop-20"></div>
                </div>
                <div class="col-md-3">
                    <cms:embed "customer-address/create_view.html" />
                    <div class="gxcpl-ptop-20"></div>
                </div>
                <div class="col-md-9">
                    <cms:embed "customer-address/list_view.html" />
                    <div class="gxcpl-ptop-20"></div>
                </div>
            </div>
        </cms:if>   

        <cms:if k_current_step='3' >
            <fieldset>
                <legend>Page Three (3 of 3)</legend>
                <p><label for='element_5'>Element 5:</label><cms:input type='text' name='element_5' /></p>
                <p><label for='element_6'>Element 6:</label><cms:input type='text' name='element_6'/></p>
            </fieldset>
        </cms:if>

        <div class="row">
            <div class="col-md-12 text-center">
                <cms:if k_current_step gt '1'>
                    <input name="back" type="submit" class="btn gxcpl-btn-orange gxcpl-shadow-card-1" value="PREVIOUS">
                </cms:if>
                <input class="btn gxcpl-btn-cyan gxcpl-shadow-card-1" type="submit" name="next" value="<cms:if k_current_step=total_pages>MAKE PAYMENT<cms:else_if k_current_step eq '1' />DELIVERY ADDRESS<cms:else_if k_current_step eq '2' />MAKE PAYMENT</cms:if>">
            </div>
        </div>

    </cms:if>
</cms:form>


Any guidance or help would be appreciated. Thanks in advance.

Regards,
GenXCoders