$(window).on('scroll', function(){
console.log(this);
});<!DOCTUPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Test</title>
</head>
<body>
<input type="file" data-type="col-1"><br>
<input type="file" data-type="col-2"><br>
<input type="file" data-type="col-3"><br>
<input type="file" data-type="col-1"><br>
<input type="file" data-type="col-2"><br>
<input type="file" data-type="col-3"><br>
<input type="file" data-type="col-4"><br>
<button id="click">Test</button>
<script>
var btn =document.getElementById('click');
click.addEventListener('click', function(e){
var files = document.querySelectorAll('input[type="file"]'),
fd = new FormData();
if(files){
files.forEach(function(input, index, list){
if(input.files.length){
fd.append("filesUploadData[]", input.dataset.type);
fd.append("filesUpload[]",input.files[0]);
}
});
}
// вывод для теста
console.log(fd.getAll('filesUpload[]'));
console.log(fd.getAll('filesUploadData[]'));
// Отправляем ajax
// Повесить обработчики отправки!!!!
var request = new XMLHttpRequest();
request.open("POST", "/form.php");
request.send(fd);
});
</script>
</body>
</html>
window._helper = {
pack: function(data){
return JSON.stringify(data);
},
unpack: function(data){
try {
return JSON.parse(data);
} catch(ex) {
return null;
}
},
isNumber: function(value){
return (!isNaN(parseFloat(value)) && isFinite(value) && !this.isString && !this.isBoolean && !this.isObject && !this.isArray);
},
isArray: function (value){
return (!this.isNull(value) && (Object.prototype.toString.call(value) === '[object Array]'));
},
isObject: function(value){
return (!this.isEmpty(value) && (typeof value == 'object'));
},
isBoolean: function(value){
return (typeof value == 'boolean');
},
isString: function(value){
return (typeof value == 'string');
},
isNull: function(value){
return ((value === undefined) || (value === null));
},
isEmpty: function(value){
return ( this.isNull(value) || ((typeof value.length != 'undefined') && (value.length == 0)) );
}
};
window.storage = {
get: function(key, defValue, typeValue){
var val = (typeof localStorage[key] == "undefined" || typeof localStorage[key] == "null") ? _helper.pack(defValue) : localStorage[key];
val = _helper.unpack(val) == null ? defValue : _helper.unpack(val);
switch (typeValue){
case 'number':
if(_helper.isNull(val) || _helper.isEmpty(val))
val = 0;
if(!_helper.isNumber(val))
val = parseFloat(val);
this.set(key, val);
break;
case 'boolean':
val = (_helper.isBoolean(val)) ? val : (defValue ? true : false);
this.set(key, val);
break;
case 'object':
case 'array':
val = _helper.isObject(val) || _helper.isArray(val) ? val : (typeValue == "array" ? [] : {});
this.set(key, val);
break;
default:
this.set(key, val);
break;
}
return val;
},
set: function(key, value){
value = _helper.pack(value);
localStorage[key] = value;
}
};
Логику калькулятора я опускаю. Ибо в зависимости от задачи она может быть в абсолюте разная и пишется на чистом js + bekend (если он требуется)
Вы пытаетесь внедрить это в WP.
Значит первое, что вам нужно познать - создание плагинов для WP и не просто запуск, а с возможностью настройки калькулятора. Из этого уже будет строится ваш frontend, где вы просто будете обязаны предусмотреть всю возможную логику и даже расширяемость вашего основного объекта калькулятор.
Тема довольно-таки обширная и, повторяюсь, зависит от задачи. Либо вы делаете для конкретного проекта или либо вы делаете конечный продукт, который будет легко настраиваемый в любом проекте и вы можете рассчитывать на кофе с печеньками.
Сколько стоит такая работа.
Всё зависит от вашего скила и качества.