dimkoug · February 3, 2022 09:05
diff --git a/jquery_form.html b/jquery_form.html
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    <script>
      'use strict';
      let app = {
        todos: [
        {
          id:1,
          todo: 'todo1'

        },
        {
          id:2,
          todo: 'todo2'

        },

      ]
      };
      (function(w,d,$){
        $(d).ready(function(){
          console.info('jquery');
          console.info(app.todos);
          function loadItems(){
            $('#todo-list').html('');
            $.each(app.todos,function(item, value){
              console.info("item:",item, value);
              $('#todo-list').append(`<li>${value.todo}
                <button class="btn action btn-warning" type='button' data-action='update' data-id=${value.id}>Update</button>
                <button class="btn action btn-danger" type='button' data-action='delete' data-id=${value.id}>Delete</button>
                </li>`)
            });
          }
          loadItems();
          $('body').on('click','.action', function(e){
            e.preventDefault();
            let id = $(this).data('id');
            let action = $(this).data('action');
            $('#todo-form').data('action',action)
            let todo = app.todos.filter(v => v.id === id);
            console.info(todo[0]);
            if(action==='update'){
              $('input[name="id"]').val(todo[0].id);
              $('input[name="todo"]').val(todo[0].todo);
            }
            if(action==='delete'){
              $(this).parent().fadeOut();
              app.todos = app.todos.filter(v => v.id !== id);
            }
            loadItems();
            console.info($('#todo-form').data('action'));
          });

          let form = $("#todo-form").validate();

          $('body').on('submit', '#todo-form', function(e){
              e.preventDefault();
              console.info('subit form');
              var data = {};
              $(this).serializeArray().map(function(x){data[x.name] = x.value;});
              console.info(data);
              let action = $(this).data('action');
              console.info(action);
              if(action==='update'){
                console.info(data.id);
                let todo = app.todos.filter(v => v.id === parseInt(data.id));
                console.info(todo);
                todo[0].todo = data.todo;
              }
              else {
                data.id = Math.floor(Math.random() * 100);
                console.info(form);
                if(form.valid()){
                  app.todos.push(data);
                }
              }
              $('#todo-form').removeData('action');
              $('#todo-form')[0].reset();
              loadItems();
          })
        })/* document ready */
      })(window,document,jQuery)
    </script>
  </head>
  <body>
    <div class="container">
      <div class="row py-2">
        <div class="col-12">
          <div class="">
            <form id="todo-form" class="" action="" method="" novalidate>
              <label for="" class="form-label">Todo</label>
              <input type="hidden" name="id" value="" >
              <input type="text" name="todo" value="" required class="form-control">
              <div class="row py-2">
                <div class="col-12">
                  <button type="submit" name="button" class="btn btn-primary">Save</button>
                </div>
              </div>
            </form>
         </div>
        </div>
      </div>
      <div class="row py-2">
        <div class="col-12">
          <div class="">
            <ul id="todo-list"></ul>
          </div>
        </div>
      </div>
    </div>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en" dir="ltr">
	<head>
	<meta charset="utf-8">
	<title></title>
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
	<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
	<script>
	'use strict';
	let app = {
	todos: [
	{
	id:1,
	todo: 'todo1'

	},
	{
	id:2,
	todo: 'todo2'

	},

	]
	};
	(function(w,d,$){
	$(d).ready(function(){
	console.info('jquery');
	console.info(app.todos);
	function loadItems(){
	$('#todo-list').html('');
	$.each(app.todos,function(item, value){
	console.info("item:",item, value);
	$('#todo-list').append(`<li>${value.todo}
	<button class="btn action btn-warning" type='button' data-action='update' data-id=${value.id}>Update</button>
	<button class="btn action btn-danger" type='button' data-action='delete' data-id=${value.id}>Delete</button>
	</li>`)
	});
	}
	loadItems();
	$('body').on('click','.action', function(e){
	e.preventDefault();
	let id = $(this).data('id');
	let action = $(this).data('action');
	$('#todo-form').data('action',action)
	let todo = app.todos.filter(v => v.id === id);
	console.info(todo[0]);
	if(action==='update'){
	$('input[name="id"]').val(todo[0].id);
	$('input[name="todo"]').val(todo[0].todo);
	}
	if(action==='delete'){
	$(this).parent().fadeOut();
	app.todos = app.todos.filter(v => v.id !== id);
	}
	loadItems();
	console.info($('#todo-form').data('action'));
	});

	let form = $("#todo-form").validate();

	$('body').on('submit', '#todo-form', function(e){
	e.preventDefault();
	console.info('subit form');
	var data = {};
	$(this).serializeArray().map(function(x){data[x.name] = x.value;});
	console.info(data);
	let action = $(this).data('action');
	console.info(action);
	if(action==='update'){
	console.info(data.id);
	let todo = app.todos.filter(v => v.id === parseInt(data.id));
	console.info(todo);
	todo[0].todo = data.todo;
	}
	else {
	data.id = Math.floor(Math.random() * 100);
	console.info(form);
	if(form.valid()){
	app.todos.push(data);
	}
	}
	$('#todo-form').removeData('action');
	$('#todo-form')[0].reset();
	loadItems();
	})
	})/* document ready */
	})(window,document,jQuery)
	</script>
	</head>
	<body>
	<div class="container">
	<div class="row py-2">
	<div class="col-12">
	<div class="">
	<form id="todo-form" class="" action="" method="" novalidate>
	<label for="" class="form-label">Todo</label>
	<input type="hidden" name="id" value="" >
	<input type="text" name="todo" value="" required class="form-control">
	<div class="row py-2">
	<div class="col-12">
	<button type="submit" name="button" class="btn btn-primary">Save</button>
	</div>
	</div>
	</form>
	</div>
	</div>
	</div>
	<div class="row py-2">
	<div class="col-12">
	<div class="">
	<ul id="todo-list"></ul>
	</div>
	</div>
	</div>
	</div>
	</body>
	</html>