<html> <head> <title>Register&Login</title> </head> <style type="text/css" media="screen"> body { font: 0.8em Arial, sans-serif; } .loginAndRegister { padding: 0; clear: both; } .loginAndRegister li { display: inline; } .loginAndRegister li a { background: #ccf; padding: 10px; float:left; border-right: 1px solid #ccf; border-bottom: none; text-decoration: none; color: #000; font-weight: bold;} .loginAndRegister li.active a { background: #eef; } .content { float: left; clear: both; border: 1px solid #ccf; border-top: none; border-left: none; background: #eef; padding: 10px 20px 20px; </style> <script type="text/javascript" src=../js/jquery-2.1.1.min.js></script> <script src="../js/jquery.tabify.js" type="text/javascript" charset="utf-8"></script> <script> jQuery(document).ready(function() { jQuery('#loginAndRegister').tabify(); }); </script> <script> jQuery(document).ready(function() { jQuery('#register').click(function() { var firstName=jQuery('#firstName').val(); var lastName=jQuery('#lastName').val(); var location=jQuery('#location').val(); var mobile=jQuery('#mobile').val(); var email=jQuery('#email').val(); var userName=jQuery('#userName').val(); var password=jQuery('#password').val(); jQuery.ajax( { type:'GET', dataType:'JSON', url:"user_details.php?firstname=" + firstName + "&lastname=" + lastName + "&location=" + location + "&mobile=" + mobile + "&email=" + email + "&username=" + userName + "&password=" + password , success:function(data) { console.log('success'); } }); }); }); </script> <script> jQuery(document).ready(function() { jQuery('#login').click(function() { var userName=jQuery('#userName').val(); var password=jQuery('#password').val(); jQuery.ajax( { type:'GET', dataType:'JSON', url:"login.php?username=" + userName + "&password=" + password , success:function(data) { for(i=0;i<jQuery(data).length;i++) { console.log('data'); jQuery('#textarea1').append('<tr><td>' + data[i].firstname + '</td></tr>'); jQuery('#textarea2').append('<tr><td>' + data[i].lastname + '</td></tr>'); jQuery('#textarea3').append('<tr><td>' + data[i].location + '</td></tr>'); jQuery('#textarea4').append('<tr><td>' + data[i].mobile + '</td></tr>'); jQuery('#textarea5').append('<tr><td>' + data[i].email + '</td></tr>'); } } }); }); }); </script> <script> jQuery(document).ready(function() { jQuery('#edit').click(function() { jQuery.ajax( { type:'GET', dataType:'JSON', url:"login.php", success:function(data) { for(i=0;i<jQuery(data).length;i++) { /* what to add here to edit the appending values*/ } } }); }); }); </script> <body> <ul class="loginAndRegister" id="loginAndRegister"> <li class="active"><a href="#registerForm">Register</a></li> <li><a href="#loginForm">LogIn</a></li> </ul> <div id="registerForm" class="content"> <form id="userRegistration"> First Name:<input type="text" id="firstName" name="firstname"><br> Last Name:<input type="text" id="lastName" name="lastname"><br> Location:<input type="text" id="location" name="location"><br> Mobile:<input type="text" id="mobile" name="mobile"><br> E-Mail:<input type="email" id="email" name="email"><br> User Name:<input type="text" id="userName" name="username"><br> Password:<input type="text" id="password" name="password"><br> <input type="button" id="register" value="Register" name="save"> </form> </div> <div id="loginForm" class="content"> <form id="userLogin"> User Name:<input type="text" id="userName" name="username"><br> Password:<input type="text" id="password" name="password"><br> <input type="button" id="login" value="Login" name="save"> <input type="button" id="edit" value="Edit" name="edit"> <input type="button" id="update" value="Update" name="update"><br><br><br> <div id="textarea1"></div> <div id="textarea2"></div> <div id="textarea3"></div> <div id="textarea4"></div> <div id="textarea5"></div> </form> </div> </body> </html>
Here I need to append the values from database to UI in a structure where user can edit those values and can Re-submit their values.
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)