API tools faq
paste
Advertisement
Guest User

Jquery Assign

a guest
Jun 26th, 2017
127
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.63 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <link rel="stylesheet" href="style7.css" />
  6. </head>
  7.  
  8. <body onload="loctable();">
  9. <div class="container">
  10. <h2 class="text-center">Login Form</h2>
  11. <form id="regForm" >
  12. <div class="form-group" id="form1">
  13. <label>FirstName</label><br>
  14. <input type="text" id="firstname" name="firstname" onkeyup="dltObj()">
  15. </div>
  16. <div class="form-group" id="form2">
  17. <label>LastName</label><br>
  18. <input type="text" id="lastname" name="lastname" onkeyup="dltObj()">
  19. </div>
  20. <div class="form-group" id="form3">
  21. <label>UserId</label><br>
  22. <input type="text" id="username" name="username" onkeyup="dltObj()">
  23. </div>
  24. <div class="form-group" id="form4">
  25. <label>Email</label><br>
  26. <input type="text" id="email" name="email" onkeyup="dltObj()">
  27. </div>
  28. <div class="form-group" id="form5">
  29. <label>Password</label><br>
  30. <input type="password" id="password" name="password" onkeyup="dltObj()">
  31. </div>
  32. <div class="form-group" id="form6">
  33. <label>Phone</label><br>
  34. <input type="text" id="phone" name="phone" onkeyup="dltObj()">
  35. </div>
  36. <div class="form-group" id="form7">
  37. <label>Batch</label><br>
  38. <input type="text" id="batch" name="batch" placeholder="Javascript/Java/.Net" onkeyup="dltObj()">
  39. </div>
  40. <div class="form-group" id="form8">
  41. <label>Location</label><br>
  42. <input type="text" id="location" name="location" onkeyup="dltObj()">
  43. </div>
  44. <div id="buttons">
  45. <p draggable="true" id="1">Piscataway</p>
  46. <p draggable="true" id="2">California</p>
  47. <p draggable="true" id="3">Buffalo</p>
  48. <p draggable="true" id="4">Long Island</p>
  49. <p draggable="true" id="5">Chicago</p>
  50. </div>
  51. <div class="form-group" id="form9">
  52. <label>Communication</label><br>
  53. <input type="text" id="communication" name="communication" onkeyup="dltObj()">
  54. </div>
  55. <div class="form-group" id="form10">
  56. <label>Permanent</label><br>
  57. <input type="text" id="permanent" name="permanent" onkeyup="dltObj()">
  58. </div>
  59. <div class="form-group" id="form11">
  60. <label>Company 1</label><br>
  61. <input type="text" id="google" name="google" onkeyup="dltObj()">
  62. </div>
  63. <div class="form-group" id="form12">
  64. <label>Company 2</label><br>
  65. <input type="text" id="facebook" name="facebook" onkeyup="dltObj()">
  66. </div>
  67. <div class="form-group" id="form13">
  68. <label>Company 3</label><br>
  69. <input type="text" id="linkedin" name="linkedin" onkeyup="dltObj()">
  70. </div>
  71. <div class="form-group" id="form14">
  72. <label>Gender</label><br>
  73. <input type="radio" class="form-control" id="male" name="gender">Male
  74. <input type="radio" class="form-control" id="female" name="gender">Female
  75. </div>
  76.  
  77. <button type="button" name="submit" id="inputsubmit" class="btn btn-default" onclick="register(event)">Submit</button>
  78. <button type="button" name="update" id="inputupdate" class="btn btn-default" >Update</button>
  79. </form>
  80. </div>
  81.  
  82. <div class="extratabs">
  83. <strong>Rows :</strong>
  84. <select id="dropdown">
  85. <option value='10'>10</option>
  86. <option value='20'>20</option>
  87. <option value='50'>50</option>
  88. <option value='100'>100</option>
  89. </select>
  90. <label for="search">
  91. <strong>Enter keyword to search</strong>
  92. </label>
  93. <input type="text" id="search">
  94.  
  95.  
  96. <table id="data">
  97.  
  98. </table>
  99. </div>
  100.  
  101.  
  102.  
  103.  
  104. <script src="https://code.jquery.com/jquery-3.2.1.min.js"
  105. integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  106. crossorigin="anonymous"></script>
  107. <script src="script7.js"></script>
  108. </body>
  109.  
  110. </html>
  111.  
  112.  
  113.  
  114.  
  115. /**
  116. * Created by Kishan on 6/20/2017.
  117. */
  118.  
  119.  
  120. var test = JSON.parse(localStorage.getItem('userList'));
  121. var d;
  122. if(test == null){
  123. test = [];}
  124.  
  125.  
  126. var fname = document.getElementById("firstname").value;
  127. var lname = document.getElementById('lastname').value;
  128. var uname = document.getElementById('username').value;
  129. var eml = document.getElementById('email').value;
  130. var pwd = document.getElementById('password').value;
  131. var loc = document.getElementById('location').value;
  132. var phn = document.getElementById('phone').value;
  133. var btc=document.getElementById('batch').value;
  134. var communication = document.getElementById('communication').value;
  135. var permanent = document.getElementById('permanent').value;
  136. var google =document.getElementById('google').value;
  137. var facebook =document.getElementById('facebook').value;
  138. var linkedin =document.getElementById('linkedin').value;
  139. var genderM = document.getElementById('male');
  140. var genderF = document.getElementById('female');
  141.  
  142.  
  143. // DRAG AND DROP
  144.  
  145.  
  146. document.addEventListener('dragstart', function (event) {
  147. event.dataTransfer.setData('Text', event.target.innerHTML);
  148. });
  149.  
  150.  
  151. //REMOVING VALIDATION ERRORS
  152. function dltObj() {
  153. if (document.getElementById("removee")) {
  154. document.querySelector("#removee").remove();
  155. }
  156. }
  157.  
  158. //ON SUBMIT FUNCTION
  159. function register() {
  160.  
  161. var fname = document.getElementById("firstname").value;
  162. var lname = document.getElementById('lastname').value;
  163. var uname = document.getElementById('username').value;
  164. var eml = document.getElementById('email').value;
  165. var pwd = document.getElementById('password').value;
  166. var loc = document.getElementById('location').value;
  167. var phn = document.getElementById('phone').value;
  168. var btc=document.getElementById('batch').value;
  169. var communication = document.getElementById('communication').value;
  170. var permanent = document.getElementById('permanent').value;
  171. var google =document.getElementById('google').value;
  172. var facebook =document.getElementById('facebook').value;
  173. var linkedin =document.getElementById('linkedin').value;
  174. var genderM = document.getElementById('male');
  175. var genderF = document.getElementById('female');
  176.  
  177. if (fname === '') {
  178. document.getElementById('form1').insertAdjacentHTML("afterEnd", "<p id='removee' style='color:red'>Firstname cannot be empty</p>");
  179.  
  180. } else {
  181. if (lname === "") {
  182. document.getElementById('form2').insertAdjacentHTML("afterEnd", "<p id='removee' style='color:red'>Lastname cannot be empty</p>");
  183.  
  184. }
  185. else {
  186. if (uname === "") {
  187.  
  188. document.getElementById('form3').insertAdjacentHTML('afterEnd', "<p id='removee' style='color:red'>Username cannot be empty</p>");
  189. } else {
  190. if (eml === "") {
  191.  
  192. document.getElementById('form4').insertAdjacentHTML('afterEnd', "<p id='removee' style='color:red'>Email cannot be empty</p>");
  193. } else {
  194. if (pwd === "") {
  195.  
  196. document.getElementById('form5').insertAdjacentHTML('afterEnd', "<p id='removee' style='color:red'>Password cannot be empty</p>");
  197. }
  198. else {
  199. if (phn === '') {
  200. document.getElementById('form6').insertAdjacentHTML('afterEnd', "<p id='removee' style='color:red'>Phone number cannot be empty</p>");
  201. }
  202. else {
  203. if (btc === '') {
  204. document.getElementById('form7').insertAdjacentHTML('afterEnd', "<p id='removee' style='color:red'>Batch number cannot be empty</p>");
  205. } else {
  206. if (loc === '') {
  207. document.getElementById('form8').insertAdjacentHTML('afterEnd', "<p id='removee' style='color:red'>Location cannot be empty</p>");
  208. } else {
  209. if (communication === '') {
  210. document.getElementById('form9').insertAdjacentHTML('afterEnd', "<p id='removee' style='color:red'>Address communication cannot be empty</p>");
  211. } else {
  212. if (permanent === '') {
  213. document.getElementById('form10').insertAdjacentHTML('afterEnd', "<p id='removee' style='color:red'>Address permanent cannot be empty</p>");
  214. }
  215. else {
  216. if (google === '') {
  217. document.getElementById('form11').insertAdjacentHTML('afterEnd', "<p id='removee' style='color:red'>Previous_employer google cannot be empty</p>");
  218. }
  219. else {
  220. if (facebook === '') {
  221. document.getElementById('form12').insertAdjacentHTML('afterEnd', "<p id='removee' style='color:red'>Previous_employer facebook cannot be empty</p>");
  222. }
  223. else {
  224. if (linkedin === '') {
  225. document.getElementById('form13').insertAdjacentHTML('afterEnd', "<p id='removee' style='color:red'>Previous_employer linkedin cannot be empty</p>");
  226. }
  227.  
  228. /*else {
  229. if (genderM.checked == false && genderF.checked == false) {
  230.  
  231. document.getElementById('form6').insertAdjacentHTML('afterEnd', "<p id='removee' style='color:red'> Please select the gender</p>");
  232. return false;
  233.  
  234. }*/
  235.  
  236. else {
  237. var userobj = {
  238. firstname: fname,
  239. lastname: lname,
  240. username: uname,
  241. email: eml,
  242. password: pwd,
  243. phone: phn,
  244. batch: btc,
  245. location: loc,
  246. address: {
  247. communication: communication,
  248. permanent: permanent
  249. },
  250. previous_employer: {
  251. google: google,
  252. facebook: facebook,
  253. linkedIn: linkedin
  254. }
  255.  
  256. }
  257. //var test = JSON.parse(localStorage.getItem('userList'));
  258. test.push(userobj);
  259. localStorage.setItem('userList', JSON.stringify(test));
  260. loctable();
  261. regForm.reset();
  262. }
  263. }
  264. }
  265. }
  266. }
  267. }
  268. }
  269. }
  270. }
  271. }
  272. }
  273. }
  274. }
  275.  
  276. return true;
  277. }
  278.  
  279. // displaying table
  280. function loctable() {
  281.  
  282.  
  283. if (localStorage.userList) {
  284.  
  285.  
  286. // var rtobj = JSON.parse(localStorage.getItem('userList'));
  287. var htm = "<table class='classoftable' border='1' style='border-collapse:collapse;' cellpadding='5'>";
  288.  
  289.  
  290. // DROPDOWN TO SELECT ROWS
  291.  
  292.  
  293. $(document).ready(function () {
  294. $("#dropdown").change(function () {
  295. if ($("#dropdown").val() == '10') {
  296. htm = '';
  297. jQuery('#data').html(htm);
  298. htm += '<tr ><th >Firstname</th><th >Lastname</th><th >Username</th><th >Email</th><th >Action 1</th><th >Action2</th><th >Action 3</th>'
  299.  
  300. for (var i = 0; i < 10; i++) {
  301.  
  302.  
  303. htm += '<tr id="tr_' + i + '"><td >' + test[i].firstname + '</td>';
  304. htm += '<td >' + test[i].lastname + '</td>';
  305. htm += '<td >' + test[i].username + '</td>';
  306. htm += '<td >' + test[i].email + '</td>';
  307. htm += '<td ><a href="#" id="edit_' + i + '" style="color: darkred">Edit</a></td>';
  308. htm += '<td ><a href="#" id="view_' + i + '" style="color: darkred">View</a></td>';
  309. htm += '<td ><a href="#" id="delete_' + i + '" style="color: darkred">Delete</a></td>';
  310. htm += '</tr>';
  311. }
  312.  
  313. htm += '</table>';
  314. jQuery('#data').html(htm);
  315. $(".classoftable").show();
  316.  
  317. }
  318. else if ($("#dropdown").val() == '20') {
  319. htm = '';
  320. jQuery('#data').html(htm);
  321. htm += '<tr ><th >Firstname</th><th >Lastname</th><th >Username</th><th >Email</th><th >Action 1</th><th >Action2</th><th >Action 3</th>'
  322. for (var i = 0; i < 20; i++) {
  323. htm += '<tr id="tr_' + i + '"><td >' + test[i].firstname + '</td>';
  324. htm += '<td >' + test[i].lastname + '</td>';
  325. htm += '<td >' + test[i].username + '</td>';
  326. htm += '<td >' + test[i].email + '</td>';
  327. htm += '<td ><a href="#" id="edit_' + i + '" style="color: darkred">Edit</a></td>';
  328. htm += '<td ><a href="#" id="view_' + i + '" style="color: darkred">View</a></td>';
  329. htm += '<td ><a href="#" id="delete_' + i + '" style="color: darkred">Delete</a></td>';
  330. htm += '</tr>';
  331. }
  332.  
  333. htm += '</table>';
  334. jQuery('#data').html(htm);
  335. $(".classoftable").show();
  336.  
  337.  
  338. }
  339. else if ($("#dropdown").val() == '50') {
  340.  
  341. htm = '';
  342. jQuery('#data').html(htm);
  343. htm += '<tr ><th >Firstname</th><th >Lastname</th><th >Username</th><th >Email</th><th >Action 1</th><th >Action2</th><th >Action 3</th>'
  344. for (var i = 0; i < 50; i++) {
  345. htm += '<tr id="tr_' + i + '"><td >' + test[i].firstname + '</td>';
  346. htm += '<td >' + test[i].lastname + '</td>';
  347. htm += '<td >' + test[i].username + '</td>';
  348. htm += '<td >' + test[i].email + '</td>';
  349. htm += '<td ><a href="#" id="edit_' + i + '" style="color: darkred">Edit</a></td>';
  350. htm += '<td ><a href="#" id="view_' + i + '" style="color: darkred">View</a></td>';
  351. htm += '<td ><a href="#" id="delete_' + i + '" style="color: darkred">Delete</a></td>';
  352. htm += '</tr>';
  353. }
  354.  
  355. htm += '</table>';
  356. jQuery('#data').html(htm);
  357. $(".classoftable").show();
  358.  
  359. }
  360. else if ($("#dropdown").val() == '100') {
  361. htm = '';
  362. jQuery('#data').html(htm);
  363. htm += '<tr ><th >Firstname</th><th >Lastname</th><th >Username</th><th >Email</th><th >Action 1</th><th >Action2</th><th >Action 3</th>'
  364. for (var i = 0; i < test.length; i++) {
  365. htm += '<tr id="tr_' + i + '"><td >' + test[i].firstname + '</td>';
  366. htm += '<td >' + test[i].lastname + '</td>';
  367. htm += '<td >' + test[i].username + '</td>';
  368. htm += '<td >' + test[i].email + '</td>';
  369. htm += '<td ><a href="#" id="edit_' + i + '" style="color: darkred">Edit</a></td>';
  370. htm += '<td ><a href="#" id="view_' + i + '" style="color: darkred">View</a></td>';
  371. htm += '<td ><a href="#" id="delete_' + i + '" style="color: darkred">Delete</a></td>';
  372. htm += '</tr>';
  373.  
  374. }
  375.  
  376. htm += '</table>';
  377. jQuery('#data').html(htm);
  378. $(".classoftable").show();
  379. }
  380. else {
  381. $(".classoftable").hide();
  382. }
  383.  
  384. });
  385.  
  386. $("#dropdown").change();
  387.  
  388. });
  389. }
  390. else {
  391.  
  392. jQuery.ajax({
  393. "type": "GET",
  394. "url": "content.json",
  395. "datatype": "JSON",
  396. "success": function (data) {
  397. localStorage.setItem("userList", JSON.stringify(data));
  398. },
  399. "error": function () {
  400. alert('Error happened while making server request!!!');
  401. }
  402. });
  403.  
  404.  
  405. }
  406. }
  407.  
  408. //Search Box
  409.  
  410. $(document).ready(function()
  411. {
  412. $('#search').keyup(function()
  413. {
  414. searchTable($(this).val());
  415. });
  416. });
  417.  
  418. function searchTable(inputVal)
  419. {
  420. var table = $('#data');
  421. table.find('tr').each(function(index, row)
  422. {
  423. var allCells = $(row).find('td');
  424. if(allCells.length > 0)
  425. {
  426. var found = false;
  427. allCells.each(function(index, td)
  428. {
  429. var regExp = new RegExp(inputVal, 'i');
  430. if(regExp.test($(td).text()))
  431. {
  432. found = true;
  433. return false;
  434. }
  435. });
  436. if(found == true)$(row).show();else $(row).hide();
  437. }
  438. });
  439. }
  440.  
  441. //EDIT BUTTON
  442.  
  443. jQuery(document).on('click', 'a[id^="edit_"]', function () {
  444.  
  445. $("#inputsubmit").hide();
  446. $("#inputupdate").show();
  447. var idSplit = jQuery(this).attr('id').split('_'),
  448. trId = 'tr_' + idSplit[1];
  449. d=idSplit[1];
  450.  
  451. for(var i=0;i<test.length;i++) {
  452. if (i == d) {
  453.  
  454. $("#firstname").val(test[d].firstname);
  455. $("#lastname").val(test[d].lastname);
  456. $("#username").val(test[d].username);
  457. $("#email").val(test[d].email);
  458. $("#phone").val(test[d].phone);
  459. $("#batch").val(test[d].batch);
  460. $("#location").val(test[d].location);
  461. $("#communication").val(test[d].address.communication);
  462. $("#permanent").val(test[d].address.permanent);
  463. $("#google").val(test[d].previous_employer.google);
  464. $("#facebook").val(test[d].previous_employer.facebook);
  465. $("#linkedin").val(test[d].previous_employer.linkedin);
  466.  
  467. //Calling edit function
  468. }
  469. }
  470.  
  471. });
  472.  
  473.  
  474. $("#inputupdate").click(function(){
  475.  
  476. test[d].firstname = $("#firstname").val();
  477. test[d].lastname = $("#lastname").val(),
  478. test[d].username = $("#username").val(),
  479. test[d].email = $("#email").val(),
  480. test[d].batch = $("#batch").val(),
  481. test[d].location = $("#location").val(),
  482. test[d].address.communication = $("#communication").val(),
  483. test[d].address.permanent = $("#permanent").val(),
  484. test[d].previous_employer.google = $("#google").val(),
  485. test[d].previous_employer.facebook = $("#facebook").val(),
  486. test[d].previous_employer.linkedin = $("#linkedin").val()
  487.  
  488.  
  489. localStorage.setItem("userList", JSON.stringify(test));
  490. loctable();
  491. regForm.reset();
  492. $("#inputupdate").hide();
  493. $("#inputsubmit").show();
  494.  
  495.  
  496.  
  497. });
  498.  
  499.  
  500.  
  501. //VIEW BUTTON
  502. jQuery(document).on('click', 'a[id^="view_"]', function (event) {
  503.  
  504. event.preventDefault();
  505.  
  506.  
  507. var idSplit = jQuery(this).attr('id').split('_'),
  508. trId = 'tr_' + idSplit[1];
  509. d=idSplit[1];
  510.  
  511. if (test[d] != '') {
  512. var htm1 = "<table border='1' style='border-collapse:collapse;'>";
  513. htm1 += '<tr ><th >Phone</th><th >Batch</th><th >Location</th><th >Address</th><th >Previous Employer</th></tr>';
  514. htm1 += '<td >' + test[d].phone + '</td>';
  515. htm1 += '<td >' + test[d].batch + '</td>';
  516. htm1 += '<td >' + test[d].location + '</td>';
  517. htm1 += '<td >' + '<strong>Communication :</strong>' + test[d].address.communication + "<br>" + '<strong>Permanent:</strong>' + test[d].address.permanent + '</td>';
  518. htm1 += '<td >' + '<strong>Google :</strong>' + test[d].previous_employer.google + "<br>" + '<strong>Facebook:</strong>' + test[d].previous_employer.facebook + "<br>" + '<strong>Linkedin:</strong>' + test[d].previous_employer.linkedin + '</td>';
  519. htm1 += '</tr>';
  520. htm1 += '</table>';
  521.  
  522. jQuery('#' + trId).after('<tr><td colspan="7">'+htm1+'</td></tr>');
  523. test[d] = '';
  524. }
  525.  
  526. else {
  527. jQuery('#' + trId).next().toggle(htm1);
  528. }
  529.  
  530. });
  531.  
  532.  
  533. //DELETE BUTTON
  534.  
  535. jQuery(document).on('click', 'a[id^="delete_"]', function (event) {
  536.  
  537. event.preventDefault();
  538.  
  539. //rtobj = JSON.parse(localStorage.getItem('userList'));
  540. var idSplit = jQuery(this).attr('id').split('_'),
  541. trId = 'tr_' + idSplit[1];
  542.  
  543.  
  544. jQuery('#' + trId).closest('tr').remove();
  545. test.splice(idSplit[1],1)
  546. localStorage.setItem("userList", JSON.stringify(test));
  547. loctable();
  548. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!