我目前正在处理需要注册表格的Web应用程序。输入数据后，单击按钮提交数据，将显示一个弹出窗口，其中包含在表单中输入的特定数据，然后可以重置该表单以进行新输入。
我正在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>
当我单击按钮而不填写表单中的字段时，弹出窗口出现。因此，我已使用Submit更改了JS代码中的click函数。然后，当未在必填字段中填写数据时，即使在填充数据并单击提交按钮之后，弹出窗口也不会显示。刚刚重置的表单不会弹出窗口。
我需要一些建议来纠正此问题，因为这花费了很多时间才能完成我的项目。
我可以用来完成相同工作的任何其他方法也是首选。
这是需要的人的视图的全部代码：
@{
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>
答案 0 :(得分：0)
将button_action（）函数更改为以下函数
pandas