Scribd
Upload
18 views5 pages

Modal

The document contains HTML and JavaScript code for a modal interface to add and manage student records. It includes form fields for student name, class, and roll number, along with AJAX calls for creating, editing, and deleting student entries. The modal functionality is implemented using Bootstrap, allowing for user interaction and data submission without page reloads.

Uploaded by

Best Latest
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
18 views5 pages

Modal

The document contains HTML and JavaScript code for a modal interface to add and manage student records. It includes form fields for student name, class, and roll number, along with AJAX calls for creating, editing, and deleting student entries. The modal functionality is implemented using Bootstrap, allowing for user interaction and data submission without page reloads.

Uploaded by

Best Latest
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

<div class="modal fade" id="addStudentModal" tabindex="-1" aria-

labelledby="addStudentModalLabel" aria-hidden="true" data-val="true" data-val-


required="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addStudentModalLabel">Add
Student</h5>
<button type="button" class="btn-close" data-bs-
dismiss="modal" aria-label="Close"></button>
</div>
<form id="addStudentForm">
<div class="modal-body">
<div class="mb-3">
<label for="Name"
class="form-label">Name</label>
<input type="text" id="Name" name="Name"
class="form-control" required />
</div>
<div class="mb-3">
<label for="Class"
class="form-label">Class</label>
<input type="text" id="Class" name="Class"
class="form-control" required />
</div>
<div class="mb-3">
<label for="RollNumber" class="form-label">Roll
Number</label>
<input type="number" id="RollNumber"
name="RollNumber" class="form-control" required />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-
bs-dismiss="modal">Close</button>
<button type="button" id="saveStudent" class="btn
btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>

<script>

$(document).ready(function () {
$('#add-btn').click(function(){
console.log('click call')

});
$(".editButton").click(function () {
const id = $(this).data("id");
const name = $(this).data("name");
const studentClass = $(this).data("class");
const rollNumber = $(this).data("roll");

$("#studentId").val(id);
$("#studentName").val(name);
$("#studentClass").val(studentClass);
$("#studentRoll").val(rollNumber);

//yahan show hoga modal


$("#editDeleteModal").modal("show");
});

// Save button click hoga or record Update hoga student ka)


$("#saveButton").click(function () {
const formData = $("#modalForm").serialize();

$.ajax({
url: "/Student/Edit", // Update this to the correct Edit action URL
method: "POST",
data: formData,
success: function () {
alert("Student updated successfully!");
location.reload(); // Reload the page to reflect changes
},
error: function () {
alert("Error updating student!");
}
});
});

// Delete button click (Delete student)


$("#deleteButton").click(function () {
const id = $("#studentId").val();

$.ajax({
url: `/Student/Delete/${id}`, // Update this to the correct
Delete action URL
method: "POST",
success: function () {
alert("Student deleted successfully!");
location.reload(); // Reload the page to reflect changes
},
error: function () {
alert("Error deleting student!");
}
});
});
});

</script>

<script>
// data save hoga (save buton k click honay pe)....
$(document).ready(function () {
$('#saveStudent').click(function () {
// Collect form data
var studentData = {
Name: $('#Name').val(),
Class: $('#Class').val(),
RollNumber: $('#RollNumber').val()
};

// Submit data via AJAX


$.ajax({
url: '/Student/Create',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(studentData),
success: function (response) {
alert('Student added successfully!');
$('#addStudentModal').modal('hide');
$('#addStudentForm')[0].reset();
location.reload(); // Optional: Reload page to show updated data
},
error: function (xhr) {
// Show validation errors
alert('Error: ' + xhr.responseText);
}
});

});
});
</script>

new

<div class="modal fade" id="addMdl" tabindex="-1" aria-


labelledby="addStudentModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addStudentModalLabel">Add Student</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<form id="addStudentForm">
<div class="modal-body">
<div class="mb-3">
<label for="Name" class="form-label">Name</label>
<input type="text" id="Name" name="Name" class="form-
control" required />
</div>
<div class="mb-3">
<label for="Class" class="form-label">Class</label>
<input type="text" id="Class" name="Class" class="form-
control" required />
</div>
<div class="mb-3">
<label for="RollNumber" class="form-label">Roll
Number</label>
<input type="text" id="RollNumber" name="RollNumber"
class="form-control" required />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Close</button>
<button type="button" id="stsave" class="btn btn-
primary">Save</button>
</div>
</form>
</div>
</div>
</div>

$(document).ready(function () {

$('#add-btn').click(function(){
$('#addMdl').modal('show');
});

$('#stsave').click(function () {
var studentData = {
Name: $('#Name').val(),
Class: $('#Class').val(),
RollNumber: $('#RollNumber').val()
};

$.ajax({
url: '/Student/Create',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(studentData),
success: function (response) {
alert('Student added successfully!');
$('#addStudentModal').modal('hide');
$('#addStudentForm')[0].reset();
location.reload();
},
error: function (xhr) {
console.error('Error:', xhr.responseText);
alert('Error: ' + xhr.responseText);
}
});
});
});

You might also like