Create a Submit input type dynamically

Question

I am trying to create a submit button dynamically in javascript,but nothing is happening. I use MVC and VS2019.

I have -

    window.addEventListener('load', function () {
        var firstInvalidElement = document.getElementsByClassName("input-validation-error")[0];
        if (firstInvalidElement != undefined) {

            var submitBtn = document.createElement("input");
            submitBtn.type = "submit"
            submitBtn.className = "btn btn - success float - right";
            submitBtn.name = "Submit";
            submitBtn.value = "Submit";
            submitBtn.style.visibility = "visible";

            var parent = document.getElementById("Container");
            parent.appendChild(submitBtn);

            firstInvalidElement.focus();
        }
    });
</script>

 <div class="form-row">
                <div class="col-md-4 mb-3">
                    @Html.LabelFor(model => model.Demographic.Forename, htmlAttributes: new { @class = "control-label" })
                    @Html.EditorFor(model => model.Demographic.Forename, new { htmlAttributes = new { @class = "form-control", maxLength = "100" } })
                    @Html.ValidationMessageFor(model => model.Demographic.Forename, "", new { @class = "text-danger" })
                </div>
                <div class="col-md-4 mb-3">
                    @Html.LabelFor(model => model.Demographic.Surname, htmlAttributes: new { @class = "control-label" })
                    @Html.EditorFor(model => model.Demographic.Surname, new { htmlAttributes = new { @class = "form-control", maxLength = "100" } })
                    @Html.ValidationMessageFor(model => model.Demographic.Surname, "", new { @class = "text-danger" })
                </div>
                <div id="Container"></div>
            </div>

but nothing is shown.

Can anyone help please!

Thanks

Answer 1

I think it's complicated, try something like this:

       @Html.EditorFor(model => model.Demographic.Surname, new { htmlAttributes = new { @class = " surnameBtn form-control", maxLength = "100" } })


       <button class="btn ToEdit">Edit</button>


<script>
 $("#document").on("click", ".ToEdit", function () {
            var date = new Object();
            date.tDate = $(this).closest('tr').find(".surnameBtn ").val();
</script>

        

Answer 2

I got it working (sort of) -

I moved code from the Window.addEventListener('load', function () { to -

 $(function () {
            $('form').submit(function () {
                //debugger;
                if ($(this).find('.input-validation-error').length == 0) {
                    $(this).find(':submit').attr('disabled', 'disabled');
                }
                else {
                    var firstInvalidElement = document.getElementsByClassName("input-validation-error")[0];
                    if (firstInvalidElement != undefined) {

                        var submitBtn = document.createElement("input");
                        submitBtn.type = "submit"
                        submitBtn.className = "btn btn-success float-right";
                        submitBtn.name = "Submit";
                        submitBtn.value = "Submit";
                        submitBtn.style.visibility = "visible";
                        submitBtn.id = "SubmitForm";

                        var parent = document.getElementById("Container");
                        parent.appendChild(submitBtn);

                        firstInvalidElement.focus();
                    }
                }
            });
        });

Thanks guys for your help!