弹出窗口不会显示按钮操作答案

【问题标题】：Pop up window won't show up for button action弹出窗口不会显示按钮操作
【发布时间】：2019-06-20 08:04:07
【问题描述】：

我目前正在开发一个需要注册表单的网络应用程序。数据输入后点击按钮提交数据，会弹出一个窗口，在表单中输入具体数据，然后可以重置表单以重新输入。

我在 VS 17 中工作，我使用 MVC 空项目模板来制作我的 Web 应用程序。

编码如下：

用于按钮操作的 HTML 代码

<button type="submit" class="registerbtn" id="register" onclick="button_action()">Register</button>

<script>button_action();</script>

弹窗的JS文件：

function button_action() {

$(document).ready(function () {
    $("#register").submit(function () {
        $("#myModal").modal();
    });
});

}

用于创建弹出窗口模式的 HTML 代码：

 @* model *@
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

            @* model content *@
            <div class="modal-content">
                <div class="modal-header" style="padding: 35px 50px" ;>

                    <h3> THANK YOU FOR REGISTERING WITH NIKINI LEARNING </h3>
                </div>

                @* body of the model *@
                <div class="modal-body" style="padding: 40px 50px;">
                    <form role="form">

                        @* Customer Registration Reference No. display*@
                        <div class="form-group">
                            <label for="crf">
                                <span class="glyphicon glyphicon-user"></span>
                                Customer Registration No. :
                            </label>
                            <input type="text" class="form-control" id="crf" />
                        </div>

                        @* Customer Name DIsplay*@
                        <div class="form-group">
                            <label for="name">
                                <span class="glyphicon glyphicon-user"></span>
                                Customer Name :
                            </label>
                            <input type="text" class="form-control" id="name" />
                        </div>

                        @* Customer Contact No. Display*@
                        <div class="form-group">
                            <label for="contact">
                                <span class="glyphicon glyphicon-user"></span>
                                Contact No. :
                            </label>
                            <input type="text" class="form-control" id="contact" />
                        </div>

                        @* Customer Email Display*@
                        <div class="form-group">
                            <label for="email">
                                <span class="glyphicon glyphicon-user"></span>
                                Email address :
                            </label>
                            <input type="text" class="form-control" id="email" />
                        </div>

                        @* Customer registered course display*@
                        <div class="form-group">
                            <label for="course">
                                <span class="glyphicon glyphicon-user"></span>
                                Registered course :
                            </label>
                            <input type="text" class="form-control" id="email" />
                        </div>

                        @* Customer registered date display*@
                        <div class="form-group">
                            <label for="date">
                                <span class="glyphicon glyphicon-user"></span>
                                Registered date :
                            </label>
                            <input type="text" class="form-control" id="email" />
                        </div>

                        @* Course duration display*@
                        <div class="form-group">
                            <label for="duration">
                                <span class="glyphicon glyphicon-user"></span>
                                Course duration :
                            </label>
                            <input type="text" class="form-control" id="email" />
                        </div>

                        @* Course price display*@
                        <div class="form-group">
                            <label for="duration">
                                <span class="glyphicon glyphicon-user"></span>
                                Course price :
                            </label>
                            <input type="text" class="form-control" id="email" />
                        </div>

                        <h4><i>Please use your Customer Registration Reference Number (CRF) to do the payment </i></h4>
                    </form>

                    @* footer of the model *@
                    <div class="modal-footer">

                        @* edit button *@
                        <button type="button" class="btn btn-submit btn-default pull-left" data-dismiss="modal">
                            <span class="glyphicon glyphicon-edit"></span> edit
                        </button>

                        @* new button *@
                        <button type="reset" class="btn btn-submit btn-default pull-right" data-dismiss="modal">
                            <span class="glyphicon glyphicon-ok"></span> New
                        </button>
                    </div>

                </div>

            </div>
        </div>

    </div>
  </div>

当我单击按钮而不填写表单中的字段时，会出现弹出窗口。所以，我用提交更改了 JS 代码中的点击功能。那么必填字段没有填写数据时弹窗不会出现，但是即使数据填完点击提交按钮后，表单刚刚重置，弹窗也不会出现。

我需要一些建议来解决这个问题，因为完成我的项目花了很多时间。

我可以用来做同样工作的任何其他方法也是首选。

以下是视图的完整代码，供需要的人参考：

@{
ViewBag.title = "Customer Registration";
Layout = "~/Views/Shared/Layout.cshtml";
}

<!DOCTYPE html>

<html>
<head>

<meta name="viewport" content="width=device-width" />
<link href="~/Content/register.css" rel="stylesheet" />
<link href="~/Content/nav.css" />
<script src="~/Scripts/layout.js"></script>
<script src="~/Scripts/register.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

</head>
<body>

<navbar>

    <div class="topnav" id="myTopnav">
        <a href="/Login/login">Login</a>
        <a href="/Payment/payment"> Payment </a>
        <a href="/Register/register" class="active">Customer Registration</a>
        <a href="/Details/course">Course Details</a>
        <a href="/Details/users">User Info</a>
        <a href="javascript:void(0);" class="icon" onclick="myfunction()">
            <i class="fa fa-bars"></i>
        </a>
    </div>

</navbar>

@* Register form *@
<form>

    @* Main container *@
    <div class="container">

        @* form heading *@
        <p class="my_heading1">
            <b>
                Customer Registration Form
            </b>
        </p>
        <p class="my_text_type1">
            <i>
                Please fill out the form to Register in Nikini Learning Courses.
            </i>
        </p>

        @* Data entry container *@
        <div class="entry_container">
            @* status entry *@
            <label for="status"><b>Status</b></label>
            <input type="text" name="status" required />

            @*Name Entry *@
            <label for="name"><b>Name</b></label>
            <input type="text" placeholder="Enter your name" name="name" required />

            @*Name with initials entry *@
            <label for="namei"><b>Name with initials</b></label>
            <input type="text" placeholder="Your name with initials" name="namei" required />

            @*NIC entry*@
            <label for="nic><b>NIC / Passport No. </b></label>
            <input type="text" placeholder="Enter your NIC / Passport No." name="nic" required />

            @*Contact No entry*@
            <label for="contact"><b>Contact No.</b></label>
            <input type="text" placeholder="Enter your Mobile / Land line No." name="contact" required />

            @*Email entry*@
            <label for="email"><b>Email</b></label>
            <input type="text" placeholder="Enter Email" name="email" required>

            @*Involvement type entry*@
            <label for="type"><b>Type:</b></label>
            <div class="checkboxes">
                <input type="checkbox" name="person" value="person" /><label>Personal</label>
                <input type="checkbox" name="comp" value="comp" /><label>Company</label>
            </div>

            @*Address entry*@
            <label for="address"><b>Address</b></label>
            <input type="text" placeholder="Enter your address here" name="address" required />

            @*Company / Institute Name entry*@
            <label for="Com_In"><b>Company / Institute Name</b></label>
            <input type="text" placeholder="Enter your Company / Institute Name" name="Com_In" required />

            @*Job / Field of Study entry*@
            <label for="job_field"><b>Job title / Field of study</b></label>
            <input type="text" placeholder="Enter your Job title / Field of Study" name="job_field" required />

            @*Course date entry*@
            <label for="date"><b>Starting date of the course</b></label>
            <input type="date" name="date" required />

            @*Course Name entry*@
            <label for="course"><b>Course Name</b></label>
            <input type="text" placeholder="Enter the course name" name="course" required />

            <p></p>

            @*Price entry*@
            <label for="price"><b>Course price</b></label>
            <input type="text" name="price" required />

            <p></p>

            @*Duration entry*@
            <label for="duration"><b>Duration of the course</b></label>
            <input type="text" name="duration" required />

        </div>

        @* submit button :
            - by clicking the button, a pop-up window will be displayed with the data entered to the database.
        *@

        <button type="submit" class="registerbtn" id="register" onclick="button_action()">Register</button>

        <script>button_action();</script>
    </div>
</form>

<div>

    @* model *@
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

            @* model content *@
            <div class="modal-content">
                <div class="modal-header" style="padding: 35px 50px" ;>

                    <h3> THANK YOU FOR REGISTERING WITH NIKINI LEARNING </h3>
                </div>

                @* body of the model *@
                <div class="modal-body" style="padding: 40px 50px;">
                    <form role="form">

                        @* Customer Registration Reference No. display*@
                        <div class="form-group">
                            <label for="crf">
                                <span class="glyphicon glyphicon-user"></span>
                                Customer Registration No. :
                            </label>
                            <input type="text" class="form-control" id="crf" />
                        </div>

                        @* Customer Name DIsplay*@
                        <div class="form-group">
                            <label for="name">
                                <span class="glyphicon glyphicon-user"></span>
                                Customer Name :
                            </label>
                            <input type="text" class="form-control" id="name" />
                        </div>

                        @* Customer Contact No. Display*@
                        <div class="form-group">
                            <label for="contact">
                                <span class="glyphicon glyphicon-user"></span>
                                Contact No. :
                            </label>
                            <input type="text" class="form-control" id="contact" />
                        </div>

                        @* Customer Email Display*@
                        <div class="form-group">
                            <label for="email">
                                <span class="glyphicon glyphicon-user"></span>
                                Email address :
                            </label>
                            <input type="text" class="form-control" id="email" />
                        </div>

                        @* Customer registered course display*@
                        <div class="form-group">
                            <label for="course">
                                <span class="glyphicon glyphicon-user"></span>
                                Registered course :
                            </label>
                            <input type="text" class="form-control" id="email" />
                        </div>

                        @* Customer registered date display*@
                        <div class="form-group">
                            <label for="date">
                                <span class="glyphicon glyphicon-user"></span>
                                Registered date :
                            </label>
                            <input type="text" class="form-control" id="email" />
                        </div>

                        @* Course duration display*@
                        <div class="form-group">
                            <label for="duration">
                                <span class="glyphicon glyphicon-user"></span>
                                Course duration :
                            </label>
                            <input type="text" class="form-control" id="email" />
                        </div>

                        @* Course price display*@
                        <div class="form-group">
                            <label for="duration">
                                <span class="glyphicon glyphicon-user"></span>
                                Course price :
                            </label>
                            <input type="text" class="form-control" id="email" />
                        </div>

                        <h4><i>Please use your Customer Registration Reference Number (CRF) to do the payment </i></h4>
                    </form>

                    @* footer of the model *@
                    <div class="modal-footer">

                        @* edit button *@
                        <button type="button" class="btn btn-submit btn-default pull-left" data-dismiss="modal">
                            <span class="glyphicon glyphicon-edit"></span> edit
                        </button>

                        @* new button *@
                        <button type="reset" class="btn btn-submit btn-default pull-right" data-dismiss="modal">
                            <span class="glyphicon glyphicon-ok"></span> New
                        </button>
                    </div>

                </div>

            </div>
        </div>

    </div>


</div>

</body>
</html>

【问题讨论】：

你应该包含完整的cshtml文件来提问
为什么要在button_action 方法中添加$(document).ready(function () 和$("#register").submit(function () {？只需使用function button_action() {$("#myModal").modal();}
我已在问题中添加了完整的 cshtml 文件。您可以查看。

标签： javascript c# html asp.net model-view-controller

【解决方案1】：

将 button_action() 函数改为下面的函数

function button_action() {
        $("#myModal").modal();
}

【讨论】：

它适用于按钮点击。但我只想在填写表格然后点击提交按钮时弹出。