locked
Reset textbox on view and partial view. RRS feed

  • Question

  • User-501297529 posted

     I'm trying to reset two textboxes in a partial when I click 'Add and Create Another' button and can't get them to reset.

    View

    <div class="row">
        <div class="col-md-7 order-md-8">
            <div class="row">
                <div class="col-md-12">
                    <h2 class="text-info">@ViewData["Title"]</h2>
                    <hr />
                    <div class="row">
                        <div class="col-md-12">
                            <form id="form-create-link"
                                  method="post"
                                  enctype="multipart/form-data"
                                  asp-controller="Link"
                                  asp-action="CreateLink">
                                <partial name="_ClientStatusMessage" />
                                <div id="add-link">
                                    <partial name="_AddLink" model="@Model" />
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    Partial View (this is where textboxes are)

    <div class="form-group col-md-8">
        <div asp-validation-summary="All" id="validation-error" class="text-danger custom-validation-summary"></div>
    </div>
    
    <input id="link-id" asp-for="@Model.LinkId" type="hidden" />
    <a name="link"></a>
    <partial name="_StatusMessage" model="@statusMessage" />
    @*<input type="hidden" asp-for="LinkId" />*@
    <div class="form-group col-md-12 col-lg-12">
        <div class="row">
            <div class="form-group col-md-3">
                <a class="btn btn-forum"
                   asp-area="Admin"
                   asp-controller="Link"
                   asp-action="Index">
                    <i class="fa fa-arrow-circle-left fa-lg fa-fw"></i>
                    Back to Links
                </a>
            </div>
        </div>
    </div>
    <div class="form-group col-md-8 col-lg-4">
        <label class="control-label">Display Order</label>
        <div>
            <input id="displayOrder" asp-for="Order" name="displayorder" class="form-control" />
        </div>
    </div>
    
    <div class="verticalspace"></div>
    <div class="verticalspace"></div>
    <div class="form-group col-md-8 col-lg-4">
        <label class="control-label" asp-for="CategoryId"></label>
        <div>
            <select asp-for="CategoryId"
                    asp-items="Model.AvailableCategories" class="form-control"></select>
        </div>
    </div>
    <div class="verticalspace"></div>
    <div class="verticalspace"></div>
    <div class="form-group col-md-8 col-lg-4">
        <label class="control-label">Title</label>
        <input id="link-title" asp-for="Title"  class="form-control" />
    </div>
    <div class="verticalspace"></div>
    <div class="verticalspace"></div>
    <div class="form-group col-md-8 col-lg-4">
        <label class="control-label">URL</label>
        <input id="link-url" asp-for="URL"  class="form-control" placeholder="https://example.com" />
    </div>
    <div class="verticalspace"></div>
    <div class="verticalspace"></div>
    <div class="form-group col-md-8 col-lg-12">
        <label class="control-label">Description</label>
        <textarea class="rtextLinkDescription" name="Description" id="Description" row="1" cols="60"
                  data-val-maxlength-max="200" asp-for="Description"
                  data-val-maxlength="Max length for Description is 200"></textarea>
    </div>
    <div class="form-group col-md-12">
        <a href="#link"
           id="link-save-and-add-another"
           type="button"
           class="btn btn-forum col-sm-12 col-md-4 col-lg-4">Add & Create Another</a>
        <a id="link-submit"
           class="btn btn-forum col-sm-12 col-md-4 col-lg-4">Add & Return to Links</a>
        <a id="link-cancel"
           class="cancel btn btn-forum col-sm-12 col-lg-3">Return to Links</a>
    </div>

    js file:

    $(document).ready(function ($) {
        $('.rtextLinkDescription').richText();
    });
    
    
    $(document).on("click",
        '#link-save-and-add-another',
        function (e) {
            blockUI();
            var post_url = $("#form-create-link").attr("action"); //get form action url
            var request_method = $("#form-create-link").attr("method"); //get form GET/POST method
            var form_data = new FormData($("#form-create-link")[0]);
            $("#link-is-create-only").val(false);
            $.ajax({
                url: post_url,
                type: request_method,
                data: form_data,
                processData: false,
                contentType: false,
                async: true
            }).done(function (objOperations) {
                $("#add-link").html(objOperations);
                if ($("#validation-error")[0].textContent.trim() === "") {
                    $('#form-create-link').reset("reset");
                    $('.rtextLinkDescription').richText();
                    $('#link-is-create-only').click(function () {
                        $(".rtextLinkDescription").val('').trigger("change");;
                    });
                }
                $.unblockUI();
            });
        });
    
    jQuery.fn.reset = function () {
        $("#CategoryId").prop('selectedIndex', 0);
        $("#link-title").val("");
        $("#link-url").val("");
        $(".rtextLinkDescription").val('');
        $("#displayOrder").val(0);
    }

    Monday, March 23, 2020 8:22 PM

Answers

  • User711641945 posted

    Hi bootzilla,

    Could you please share more details which could reproduce your issue?

    I comment some code that you does not provide entirely,and here is a working demo:

    Model:

    public class TestModel
    {
        public int LinkId { get; set; }
        public string Order { get; set; }
        public int CategoryId { get; set; }
        public string Title { get; set; }
        public string URL { get; set; }
        public string Description { get; set; }
        public List<SelectListItem> AvailableCategories { get; set; }
    }

    View:

    @{
        ViewData["Title"] = "Privacy Policy";
    }
    @model TestModel
    <div class="row">
        <div class="col-md-7 order-md-8">
            <div class="row">
                <div class="col-md-12">
                    <h2 class="text-info">@ViewData["Title"]</h2>
                    <hr />
                    <div class="row">
                        <div class="col-md-12">
                            <form id="form-create-link"
                                  method="post"
                                  enctype="multipart/form-data"
                                  asp-controller="Home"
                                  asp-action="CreateLink">
                                @*<partial name="_ClientStatusMessage" />*@
                                <div id="add-link">
                                    <partial name="_AddLink" model="@Model" />
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @section Scripts
    {
        <script>    
            $(document).on("click",
                '#link-save-and-add-another',
                function (e) {
                    //blockUI();
                    var post_url = $("#form-create-link").attr("action"); //get form action url
                    var request_method = $("#form-create-link").attr("method"); //get form GET/POST method
                    var form_data = new FormData($("#form-create-link")[0]);
                    //$("#link-is-create-only").val(false);
                    $.ajax({
                        url: post_url,
                        type: request_method,
                        data: form_data,
                        processData: false,
                        contentType: false,
                        async: true
                    }).done(function (objOperations) {
                        $("#add-link").html(objOperations);
                        if ($("#validation-error")[0].textContent.trim() === "") {
                            $('#form-create-link').reset("reset");
                            $('.rtextLinkDescription').richText();
                            //$('#link-is-create-only').click(function () {
                            //    $(".rtextLinkDescription").val('').trigger("change");;
                            //});
                        }
                         //$.unblockUI();
                    });
                });
    
            jQuery.fn.reset = function () {
                $("#CategoryId").prop('selectedIndex', 0);
                $("#link-title").val("");
                $("#link-url").val("");
                //$(".rtextLinkDescription").val('');
                $("#displayOrder").val(0);
            }
        </script>
    }

    Partial View(_AddLink.cshtml):

    @model TestModel
    <div class="form-group col-md-8">
        <div asp-validation-summary="All" id="validation-error" class="text-danger custom-validation-summary"></div>
    </div>
    
    <input id="link-id" asp-for="@Model.LinkId" type="hidden" />
    <a name="link"></a>
    @*<input type="hidden" asp-for="LinkId" />*@
    <div class="form-group col-md-12 col-lg-12">
        <div class="row">
            <div class="form-group col-md-3">
                <a class="btn btn-forum"
                   asp-area="Admin"
                   asp-controller="Link"
                   asp-action="Index">
                    <i class="fa fa-arrow-circle-left fa-lg fa-fw"></i>
                    Back to Links
                </a>
            </div>
        </div>
    </div>
    <div class="form-group col-md-8 col-lg-4">
        <label class="control-label">Display Order</label>
        <div>
            <input id="displayOrder" asp-for="Order" name="displayorder" class="form-control" />
        </div>
    </div>
    
    <div class="verticalspace"></div>
    <div class="verticalspace"></div>
    <div class="form-group col-md-8 col-lg-4">
        <label class="control-label" asp-for="CategoryId"></label>
        <div>
            <select asp-for="CategoryId"
                    asp-items="Model.AvailableCategories" class="form-control"></select>
        </div>
    </div>
    <div class="verticalspace"></div>
    <div class="verticalspace"></div>
    <div class="form-group col-md-8 col-lg-4">
        <label class="control-label">Title</label>
        <input id="link-title" asp-for="Title" class="form-control" />
    </div>
    <div class="verticalspace"></div>
    <div class="verticalspace"></div>
    <div class="form-group col-md-8 col-lg-4">
        <label class="control-label">URL</label>
        <input id="link-url" asp-for="URL" class="form-control" placeholder="https://example.com" />
    </div>
    <div class="verticalspace"></div>
    <div class="verticalspace"></div>
    
    <div class="form-group col-md-12">
        <a href="#link"
           id="link-save-and-add-another"
           type="button"
           class="btn btn-forum col-sm-12 col-md-4 col-lg-4">Add & Create Another</a>
        <a id="link-submit"
           class="btn btn-forum col-sm-12 col-md-4 col-lg-4">Add & Return to Links</a>
        <a id="link-cancel"
           class="cancel btn btn-forum col-sm-12 col-lg-3">Return to Links</a>
    </div>

    Controller:

    [HttpPost]
    public IActionResult CreateLink(TestModel test)
    {
    //do your stuff...
    test.AvailableCategories = new List<SelectListItem>
    {
    new SelectListItem{Text = "Value1", Value = "1"},
    new SelectListItem{Text = "Value2", Value = "2"},
    new SelectListItem{Text = "Value3", Value = "3"},
    new SelectListItem{Text = "Value4", Value = "4"}
    };
    return PartialView("_AddLink",test);
    } public IActionResult Privacy() { var model = new TestModel() { AvailableCategories = new List<SelectListItem> { new SelectListItem{Text = "Value1", Value = "1"}, new SelectListItem{Text = "Value2", Value = "2"}, new SelectListItem{Text = "Value3", Value = "3"}, new SelectListItem{Text = "Value4", Value = "4"} } }; return View(model); }

    Result:

    Best Regards,

    Rena

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 24, 2020 6:16 AM