saveInfoCard

by Divine Draft

HTML

<div class="main-container__data">

          <div class="data-item">
            <form action="#" class="data-item__form">
              <h2 class="data-item__text" >Сумма</h2>
              <input type="number" name="sum" id="sum" autocomplete="off" onkeyup="this.value = this.value.replace (/\D/gi, '').replace (/^0+/, '')">
            </form>
          </div>
          
          <div class="data-item">
            <form action="#" class="data-item__form">
              <h2 class="data-item__text">Номер карты</h2>
              <input type="number" name="number" id="number" autocomplete="off" placeholder="1234 5678 9032 3456" title="Введите 12 цифр, пожалуйста"onkeyup="this.value = this.value.replace (/\D/gi, '').replace (/^0+/, '')">
            </form>
          </div>
          
          <div class="data-item">
            <form action="#" class="data-item__form ">
              <h2 class="data-item__text">Имя</h2>
              <input type="text" name="name" id="name" autocomplete="off" placeholder="Ivan" onKeyUp="if(/[^a-zA-Zа-яА-ЯёЁ .]/i.test(this.value)){this.value='';}">
            </form>
          </div>

          <div class="data-item">
            <form action="#" class="data-item__form">
              <label for="">
                <h2 class="data-item__text">Дата истечения</h2>
                <input type="date"  name="date" id="date" autocomplete="off">
              </label>
            </form>
          </div>
          
          <div class="data-item">
            <form action="#" class="data-item__form">
              <h2 class="data-item__text">CVV-код</h2>
              <input type="password" name="cvv" id="cvv" autocomplete="off" title="Введите 3 цифры, пожалуйста" onkeyup="this.value = this.value.replace (/\D/gi, '').replace (/^0+/, '')">
            </form>
          </div>
        
        <div class="main-container__check">
          <label for="#" class="check-label">
            <input type="checkbox" name="check" id="check"...

JavaScript

let btn = document.querySelector('.btn');
const form = document.querySelector('.data-item__form');
let inputs = document.querySelectorAll('input');


    const getKey = (e) => {
        let keyNum;

        if(inputs.event) {
            keyNum.inputs.event.keyUp;
        } else if (e) {
                keyNum = e.which;
        }
            console.log(keyNum)
        };

        document.onkeyup = getKey();

   
    btn.addEventListener('click', () =>{
        function getCheck(){
            if (getKey() != "" && check.checked){
                console.log('click')
                btn.disabled = false;

                const user = [...document.querySelectorAll('input')].reduce((user, el) => {
                    user[el.name] = el.value;
                    return user;
                }, {}); 
                
                getData(); 
                btnClear();
                //document.querySelectorAll('.table-container__data').innerHTML = JSON.stringify(user, null, '');
                
            } else {
                btn.disabled = true;
            }
        }
            getCheck()
    });


function getData(){
			let item_sum = document.getElementById('sum').value;
			let item_number = document.getElementById('number').value;
			let item_name = document.getElementById('name').value;
			let item_date = document.getElementById('date').value;
			let item_cvv = document.getElementById('cvv').value;

      let xTable = document.getElementById('TableforData');
      let tr = document.createElement('tr');
      tr.innerHTML = '<td>' + item_sum + '</td><td>' + item_number + '</td><td>' + item_name + '</td><td>' +  item_date + '</td><td>' + item_cvv +'</td>';
      xTable.children[0].appendChild(tr);
}

     
const btnClear = () => {
    for (let i = 0; i < inputs.length; i++) {
       if(i) {
        inputs[i].value = "";
       } else {
        value.return();
       }
    }
};