В настоящее время я работаю над веб-приложением, которое требует регистрационную форму. После ввода данных и нажатия кнопки для отправки данных появится всплывающее окно с конкретными данными, введенными в форму, а затем форму можно будет сбросить для новой записи.
Я работаю над проектом в VS 17, и я использовал пустой шаблон проекта MVC для создания своего веб-приложения.
Кодировка следующая:
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 с помощью submit. Тогда всплывающее окно не будет отображаться, когда данные не заполнены в обязательном поле, но даже после того, как данные заполнены и нажата кнопка отправки, форма просто сбрасывается, и всплывающее окно не отображается.
Мне нужен совет, чтобы исправить эту проблему, так как это заняло так много времени, чтобы завершить мой проект.
Любые другие методы, которые я могу использовать для выполнения той же работы, также предпочтительнее.
Вот весь код представления для тех, кому нужно:
@{
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>