Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • NEW File

    Загружено:

    Hasannor Mandi
    9 просмотров8 страниц

    Оригинальное название

    NEW file

    Авторское право

    © © All Rights Reserved

    Доступные форматы

    DOCX, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ

    Авторское право:

    © All Rights Reserved
    Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    9 просмотров8 страниц

    NEW File

    Загружено:

    Hasannor Mandi

    Авторское право:

    © All Rights Reserved
    Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 8

    <!

    DOCTYPE html>

    <html>

    <head>

    <title>STUDENT INFORMATION</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

    <link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

    <script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    </head>

    <body>

    <div class="container">

    <br />

    <h3 align="center">Student Information</h3>

    <br />

    <div align="right" style="margin-bottom:5px;">

    <button type="button" name="add_button" id="add_button"


    class="btn btn-success btn-xs">Add</button>

    </div>

    <div>

    <form action ="Search.php" method ="POST" class="form-line p-3">


    <input type="text" name="search" id="search" class="form-control form-control-lg rounded-0
    border-info" placeholder="Search by ID Number" style="width:20%;">

    <div>

    <input type="submit" name="submit" value="Search" class="btn-info btn-lg- rounded-0"


    style="width:10%;">

    </div>

    </form>

    </div>

    <div class="table-responsive">

    <table class="table table-bordered table-striped">


    <thead>

    <tr>

    <th>ID Number</th>

    <th>First Name</th>

    <th>Middle Name</th>

    <th>Last Name</th>

    <th>Gender</th>

    <th>Contact Number</th>

    <th>Email</th>

    <th>Address</th>

    <th>Date of Birth</th>

    <th>Edit</th>

    <th>Delete</th>

    </tr>

    </thead>

    <tbody></tbody>

    </table>

    </div>

    </div>

    </body>

    </html>

    <div id="apicrudModal" class="modal fade" role="dialog">

    <div class="modal-dialog">

    <div class="modal-content">

    <form method="post" id="api_crud_form">

    <div class="modal-header">

    <button type="button" class="close" data-dismiss="modal">&times;</button>

    <h4 class="modal-title">Add Data</h4>

    </div>

    <div class="modal-body">
    <div class="form-group">

    <label>Enter ID Number</label>

    <input type="text" name="id_no" id="id_no" class="form-control" />

    </div>

    <div class="form-group">

    <label>Enter First Name</label>

    <input type="text" name="first_name" id="first_name" class="form-


    control" />

    </div>

    <div class="form-group">

    <label>Enter Middlename</label>

    <input type="text" name="middle_name" id="middle_name" class="form-control"/>

    </div>

    <div class="form-group">

    <label>Enter Lastname</label>

    <input type="text" name="last_name" id="last_name" class="form-control"/>

    </div>

    <div class="form-group">

    <label>Enter Gender</label>

    <input type="text" name="gender" id="gender" class="form-control"/>

    </div>

    <div class="form-group">

    <label>Enter Contact Number</label>

    <input type="text" name="contact_number" id="contact_number" class="form-control"/>

    </div>

    <div class="form-group">

    <label>Enter Email</label>

    <input type="text" name="email" id="email" class="form-control"/>

    </div>

    <div class="form-group">

    <label>Enter Address</label>
    <input type="text" name="address" id="address" class="form-control"/>

    </div>

    <div class="form-group">

    <label>Enter Date of Birth</label>

    <input type="text" name="date_of_birth" id="date_of_birth" class="form-control"/>

    </div>

    <div class="modal-footer">

    <input type="hidden" name="hidden_id" id="hidden_id" />

    <input type="hidden" name="action" id="action" value="insert" />

    <input type="submit" name="button_action" id="button_action"


    class="btn btn-info" value="Insert" />

    <button type="button" class="btn btn-default" data-


    dismiss="modal">Close</button>

    </div>

    </form>

    </div>

    </div>

    </div>

    <script type="text/javascript">

    $(document).ready(function(){

    fetch_data();

    function fetch_data()

    $.ajax({

    url:"fetch.php",

    success:function(data)

    {
    $('tbody').html(data);

    })

    $('#add_button').click(function(){

    $('#action').val('insert');

    $('#button_action').val('Insert');

    $('.modal-title').text('Add Data');

    $('#apicrudModal').modal('show');

    });

    $('#api_crud_form').on('submit', function(event){

    event.preventDefault();

    if($('#id_no').val() == '')

    alert("Enter ID Number")

    else if($('#first_name').val() == '')

    alert("Enter Firstname");

    else if($('#middle_name').val() == '')

    alert("Enter Middlename")

    else if($('#last_name').val() == '')

    alert("Enter Last Name")

    else if($('#gender').val() == '')


    {

    alert("Enter Gender")

    else if($('#contact_number').val() == '')

    alert("Enter Contact Number")

    else if($('#email').val() == '')

    alert("Enter Email")

    else if($('#address').val() == '')

    alert("Enter Address")

    else if($('#date_of_birth').val() == '')

    alert("Enter Date of Birth")

    else

    var form_data = $(this).serialize();

    $.ajax({

    url:"action.php",

    method:"POST",

    data:form_data,

    success:function(data)

    fetch_data();

    $('#api_crud_form')[0].reset();

    $('#apicrudModal').modal('hide');
    if(data == 'insert')

    alert("Data Inserted ");

    if(data == 'update')

    alert("Data Updated");

    });

    });

    $(document).on('click', '.edit', function(){

    var id = $(this).attr('id');

    var action = 'fetch_single';

    $.ajax({

    url:"action.php",

    method:"POST",

    data:{id:id, action:action},

    dataType:"json",

    success:function(data)

    $('#hidden_id').val(id);

    $('#id_no').val(data.id_no);

    $('#first_name').val(data.first_name);

    $('#middle_name').val(data.middle_name);

    $('#last_name').val(data.last_name);

    $('#gender').val(data.gender);

    $('#contact_number').val(data.contact_number);

    $('#email').val(data.email);
    $('#address').val(data.address);

    $('#date_of_birth').val(data.date_of_birth);

    $('#action').val('update');

    $('#button_action').val('Update');

    $('.modal-title').text('Edit Data');

    $('#apicrudModal').modal('show');

    })

    });

    $(document).on('click', '.delete', function(){

    var id = $(this).attr("id");

    var action = 'delete';

    if(confirm("Are you sure you want to remove this data?"))

    $.ajax({

    url:"action.php",

    method:"POST",

    data:{id:id, action:action},

    success:function(data)

    fetch_data();

    alert("Data Deleted ");

    });

    });

    });

    </script>

    Вам также может понравиться