Post WFFM form if submit button is hidden

Once you hide WFFM form Submit button, then how to call its Submit action on click of MVC form Submit button.

Below java script done the magic for this

if ($(".form-submit-border").length > 0) {

   $(".form-submit-border > .btn").trigger('click');

}

Here is the complete code for scenario

HTML in View

<button class="submit" id="product-create-button" onclick="return CreateProduct();" type="submit">Submit</button>

Javascript

function CreateProduct() {

        var param = {

            productItemId: $("#product-select").val(),

            quality: $("#quality-select").val(),

        };

        $.ajax({

            dataType: 'json',

            type: 'POST',

            async: false,

            url: _rootUrl + '/product/create',

            data: param,

            success: function (result) {

                if ($(".form-submit-border").length > 0) {

                    $(".form-submit-border > .btn").trigger('click');

                }

            },

            error: function (response, ajaxOptions, thrownError) {

                alert('Error');

            }

        });

    return false;

}

I am calling Javascript method on click of MVC form Submit button. Its send the required data to Controller action method via AJAX call. On success of AJAX operation, I am triggering click event of WFFM form Submit button which eventually call WFFM Execute action.

I hope you like this Sitecore tip. Stay tuned for more Sitecore related articles.

Till that happy Sitecoring :)

Please leave your comments or share this tip if it’s useful for you.

How to hide WFFM Form Submit Button

In one of our project requirement, there is already a MVC Product form with its own fields and Submit button and we must dynamically show different WFFM forms based on product selection. So that finally user feels that it’s only a one form. 

We were able to show WFFM forms dynamically as I covered in my earlier article.

But there was one issue here. WFFM form also rendering its own Submit button. So, there are two Submit button rendering on screen which confuse the visitors.

We have to hide WFFM button anyway.

You will get below HTML when you inspect your web page for WFFM form button on browser

<div class="form-submit-border">

    <input class="btn  btn-default" type="submit" value="Submit">

</div>

So below JQuery done the magic to hide to hide the WFFM Submit button

if ($(".form-submit-border").length > 0) {

    $('.form-submit-border').hide();

}

I am finding DIV with class “form-submit-border” on page load. If this DIV is available on page then just hide it.

I hope you like this Sitecore tip. Stay tuned for more Sitecore related articles.

Till that happy Sitecoring :)

Please leave your comments or share this tip if it’s useful for you.