Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
- <!-- Latest compiled and minified CSS -->
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
- <!-- Optional theme -->
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
- <!-- Latest compiled and minified JavaScript -->
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
- <title>Users Page</title>
- </head>
- <body onload="load()"; style="padding-left: 25px;">
- <meta name="csrf-token" content="({ csrf_token })" />
- <!--<label for="id">
- Id
- </label>-->
- <input type="hidden" id="id" name="id"> <br>
- <label for="username">
- Username
- </label>
- <input type="text" id="username" required="required" name="username"> <br>
- <label for="password">
- Password
- </label>
- <input type="password" name="password" id="password" required="required"><br>
- <label for="firstname">
- Firstname
- </label>
- <input type="text" id="firstname" required="required" name="firstname"> <br>
- <label for="lastname">
- Lastname
- </label>
- <input type="text" id="lastname" name="lastname" required="required"> <br>
- <label for="email">
- Email
- </label>
- <input type="email" name="email" id="email" required="required"><br>
- <label for="phone">
- Phone
- </label>
- <input type="text" name="phone" id="phone" required="required"><br>
- <input id="userbtn" type="button" value="Add New User" name="userbtn" onclick="submit();"/>
- <br><br><br>
- <label for="search">Search box</label>
- <input type="text" id="search" name="search">
- <input id="searchbtn" type="button" value="Search" name="searchbtn" onclick="load();"/>
- <table id="table" border="1">
- <tr> <th>#</th>
- <th>Username</th>
- <th>Password</th>
- <th>Firstname</th>
- <th>Lastname</th>
- <th>Email</th>
- <th>Phone</th></tr>
- </table>
- <script type="text/javascript">
- data= "";
- submit = function(){
- $.ajax({
- url:'api/SaveOrUpdate',
- type:'POST',
- data:{id:$("#id").val(), username:$('#username').val(), password:$('#password').val(),firstname:$('#firstname').val(), lastname:$('#lastname').val(), email:$('#email').val(), phone:$('#phone').val() },
- success: function(response){
- alert(response.message);
- load();
- }
- });
- $('#userbtn').attr('value','Add New User');
- resetform();
- }
- load = function(){
- $.ajax({
- url:'api/list',
- type:'POST',
- data:{value:$('#search').val()},
- success: function(response){
- //alert(response.message);
- data=response.data;
- $('.tr').remove();
- for(i=0; i<response.data.length; ++i){
- $("#table").append("<tr class='tr'> <td> "+response.data[i].id+" </td> <td> "+response.data[i].username+" </td> <td> "+response.data[i].password+" </td> <td> "+response.data[i].firstname+" </td> <td> "+response.data[i].lastname+" </td> <td> "+response.data[i].email+" </td> <td> "+response.data[i].phone+" </td> <td><a href='#' onclick= edit("+i+");>Edit </a> </td> <td><a href='#' onclick=_delete("+data[i].id+");>Delete </a> </td> </tr>")
- }
- }
- });
- };
- edit = function(index){
- $('#id').val(data[index].id);
- $('#username').val(data[index].username);
- $('#password').val(data[index].password);
- $('#firstname').val(data[index].firstname);
- $('#lastname').val(data[index].lastname);
- $('#email').val(data[index].email);
- $('#phone').val(data[index].phone);
- $('#userbtn').attr('value','Update');
- };
- _delete = function(id){
- $.ajax({
- url:'api/delete',
- type:'POST',
- data:{id},
- success: function(response){
- alert(response.message); // a függvény visszatérítését kíírja sikeres hívás esetén
- load();
- }
- })
- }
- resetform = function(){
- $('#username').val('');
- $('#password').val('');
- $('#firstname').val('');
- $('#lastname').val('');
- $('#phone').val('');
- $('#email').val('');
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement