Want to fire Save button Modal popup in ASP.NET MVC application

Question

I have Edit form page where if user make any changes then all the changes appear in the Modal popup. For that, I have used Jquery to fire Modal. In the Modal popup, the submit button is not getting fired. If i Put the button in the page then it works fine. I do not have any idea where i am getting wrong. Any suggestion and guidance will be useful to me.

My .cshtml code:

@model TestProject.Models.Test
@using (Html.BeginForm())
{
      <div class="form-horizontal" >

        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.Id)

        <div class="form-group">
            @Html.LabelFor(model => model.FName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
              @Html.EditorFor(model => model.FName, new { htmlAttributes = new { @class = "form-control",@id = "FName" } })
            </div>
        </div>

 <div class="form-group">
  <button type="button" class="btn btn-primary" id="btnSubmit" data-toggle="modal" data-target="ListofChanges">Next</button>     
        </div>
    </div>
}

My JavaScript Code inside .cshtml:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
    var FirstName = "@Html.Raw(ViewBag.FName)";
    $(document).ready(function () {
        $("#btnSubmit").click(function () {

   if ($("#FName").val() != FirstName)
            {
        $("#error").html("First Name changed from:" + FirstName);
          }


            $('#ListofChanges').modal("show");
        });

    });
</script>

My Modal to popup the changes:

<div id="ListofChanges" tabindex="-1" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">PhoneBook Details changed from</h4>
            </div>
            <div class="modal-body">
                       <p id="error"></p>

            </div>
            <div class="modal-footer">
                <input type="submit" class="btn btn-primary" />
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

Please guide me why submit button in not fired once clicked. Thank you in advance.

Also worth pointing out that btnSubmit is not a submit button - you've used type="button". Change that to type="submit" if you want a submit button. Bootstrap's modal function is also asynchronous, so you need to prevent the form submission as well. — Tieson T.
– Tieson T., Commented Nov 15, 2017 at 22:06

Shyju · Accepted Answer · 2017-11-15 22:02:28Z

2

If you want to submit the original form, when user clicks on the submit button on the modal dialog, you should wire up the click event on that button and programatically submit your form.

Give your submit button inside the modal an Id , which you can use to wire up the click event.

<input type="submit" id="btn-submit" class="btn btn-primary" />

Now, register click event on this button, use the jQuery closest method to get the form where you other button is located (btnSubmit) and submit that form using the jquery submit method.

$(function () {

    $("#btnSubmit").click(function (e) {
        e.preventDefault();
        //your existing code goes here to set the modal content
        //$("#error").html("First Name changed from Sam" );

        $('#ListofChanges').modal("show");
    });

    $("#btn-submit").click(function() {
        alert("going to submit other form");
        $("#btnSubmit").closest("form").submit();
    });
});

answered Nov 15, 2017 at 22:02

Shyju

220k106 gold badges421 silver badges499 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Raj Over a year ago

Thank you so much. Your solution worked for me. Thank you for your time.

Collectives™ on Stack Overflow

Want to fire Save button Modal popup in ASP.NET MVC application

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related