BeginFormSitefinity form disappears after submiting

When I use the BeginFormSitefinity Helper the form disappears after submiting, and then the postback is done.

The expected behavior would be only the postback to be done. I went to the browser and invertigated and I found out that when you use BeginFormSitefinity an extra script is added to your html.

That script basically creates a new form with display = none. And appends your form to the “invisible” form, and thus your form disappears after submiting.

I’m using Sitefinity 8.1, and I would like to know if is there any way to avoid this?

This is the script added (I’ve no control over it)

<script type="text/javascript">
            (function () {
                var container = document.getElementById("myForm2");
                if (container === null)
                    return;

                var inputs = container.querySelectorAll("input");
                var allInputs = document.forms["aspnetForm"].querySelectorAll('input');
                for (var i = 0; i < allInputs.length; i++) {
                    allInputs[i].addEventListener("invalid", function(event) {
                        if (Array.indexOf(inputs, document.activeElement) >= 0 && Array.indexOf(inputs, event.target) < 0)
                            event.preventDefault();
                    }, true);
                }

                var submitClick = function () {
                    var isValid = true;
                    for (var i = 0; i < inputs.length; i++) {
                        if (typeof inputs[i].willValidate !== "undefined" && inputs[i].willValidate)
                            isValid = inputs[i].validity.valid && isValid;

                        if (typeof jQuery !== "undefined" && typeof jQuery.validator !== "undefined")
                            isValid = jQuery(inputs[i]).valid() && isValid;
                    }

                    if (isValid) {
                        var form = document.createElement("form");

                        form.style.display = "none";
                        form.setAttribute("action", "/order-calendar/Search");
                        form.setAttribute("method", "POST");
                        form.setAttribute("enctype", document.forms["aspnetForm"].getAttribute("enctype"));
                        form.setAttribute("encoding", document.forms["aspnetForm"].getAttribute("encoding"));                            

                        form.appendChild(container);

                        document.body.appendChild(form);

                        // We prevent kendo upload widget from submitting empty inputs.
                        var kInputs = container.querySelectorAll(".k-upload input[type='file']");
                        for(var i = 0; i < kInputs.length; i++) {
                            var kInput = kInputs[i];
                            if (!kInput.value) {
                                // Prevent submitting an empty input
                                kInput.setAttribute("disabled", "disabled");

                                window.setTimeout(function() {
                                    kInput.removeAttribute("disabled");
                                }, 0);
                            }
                        }

                        form.submit();

                        return false;
                    }
                };

                var handleFormSubmitElements = function (elementName) {
                    var allSubmitElements = container.getElementsByTagName(elementName);
                    var elementCount = allSubmitElements.length;
                    while(elementCount) {
                        typeAttr = allSubmitElements[elementCount - 1].getAttribute("type");
                        if(typeAttr == "submit") {
                            allSubmitElements[elementCount - 1].onclick = submitClick;
                        }
                        elementCount--;
                    }
                };

                handleFormSubmitElements("input");
                handleFormSubmitElements("button");
            })();
        </script>

This is my Form (its values are read automatically, thats why onkeydown returns false):

@using (Html.BeginFormSitefinity("Search", "myForm2"))
    {
     <div id="main_content" style="max-width: 600px; max-height:700px;float:left;overflow: hidden;">

     <table>
                <tr><td colspan="2" style="text-align:center;">@Html.Label("City")</td></tr>

                <tr>
                    <td>@Html.Label("Code") </td>
                    <td>

                        @Html.Kendo().TextBoxFor(x => x.Code).HtmlAttributes(new { onkeydown = "return false", style = "color: green; width:100%;", id = "Code" })
                    </td>
                </tr>
                <tr>
                    <td>@Html.Label("City Code") </td>
                    <td>

                        @Html.Kendo().TextBoxFor(x => x.CityCode).HtmlAttributes(new { onkeydown = "return false", style = "color: green; width:100%;", id = "CityCode" })
                    </td>
                </tr>

      </table>

    <input type="submit" class="btn btn-success" value="submit">

    }

This is what happens visually

enter image description here


Source: forms

1 Comment

  1. Edwin

    if you are using Hybrid MVC (that is the webforms version of MVC widgets) then i believe there is no way to avoid this.

    Previous to v8.1 the javascript you posted above was different, and would modify the actual form tag of the webforms page to post to your custom action…

    now it appears they submit to a FORM tag built on the fly for MVC widgets…

    One thing I’ve noticed they still have is the id of the FORM tag hard-coded to be “aspnetForm”, so if your Master Page doesn’t use that explicit, specific ID then that might be a probably cause…

    if you set a breakpoint in the action to which your form posts, do you get a hit?

    Reply

Leave a Reply