Как получить весь список данных из всех input?
Всем привет! Возникла нужда подключить калькулятор калорийности на сайте жены, но тут возникла загвоздка, как теперь получить все данные из заполненных input одним списком. Нужно вывести все указанные ингредиенты в отдельный блок DIV, чтобы каждый ингредиент был разделен запятой.
Имеется блок куда добавляется ингредиент, в блоке 3 input, в 1-й мы вводим ингредиент "помидор", во 2-й мы указываем вес "2", а в 3-й единицу измерения "шт". Получается в итоге "Помидор 2 шт".
Каждая новая строка с новыми полями для ввода сформирована таким образом:
<div class="form-box-cont">
<div class="form-box-ingrid">
<input type="text" placeholder="Название ингредиента" id="ingred2" name="ingred_group[1][ingredient][2][name]" value="">
</div>
<div class="form-box-inp">
<input type="text" placeholder="Кол-во" name="ingred_group[1][ingredient][2][value]" value="">
<input type="text" placeholder="Ед.Изм." id="unit2" name="ingred_group[1][ingredient][2][unit]" value="">
</div>
</div>
Соответственно нужно вытащить ингредиенты в таком формате: Допустим у нас имеется 5 ингредиентов, получаем на выходе в новом блоке "Помидор 2 шт, Огурец 1шт, Мука 200 гр, Соль по вкусу, Горошек 1 банка". Нужно чтобы весь получиный список выводился одной строкой.
Как это сделать не соображу никак? Потихоньку пытаюсь учить JS, но сложновато пока дается.
Прошу у вас помощи.
Вот код формирования списков для внесения ингредиентов:
//Поля ингредиентов
function addIngredient(group, name, value, unit) {
name = name || '';
value = value || '';
unit = unit || '';
var id = ++ingredientsCount;
var groupId = group.data('id');
var rowCount = group.find('tr').length;
var inputHTML = '<tr class="ingredient_box"><td>' + (rowCount < 0 ? 'Название ингредиента <span style="color:red;">*' : '') + '</td><td><div class="form-box-cont">' +
'<div class="form-box-ingrid"><input type="text" placeholder="Название ингредиента" id="ingred' + id + '" name="ingred_group[' + groupId + '][ingredient][' + id + '][name]" value="' + name + '"></div>' +
'<div class="form-box-inp"><input type="text" placeholder="Кол-во" name="ingred_group[' + groupId + '][ingredient][' + id + '][value]" value="' + value + '">' +
'<input type="text" placeholder="Ед.Изм." id="unit' + id + '" name="ingred_group[' + groupId + '][ingredient][' + id + '][unit]" value="' + unit + '">' +
'</div></div></td>' +
(rowCount >= 2 ? '<td class="td-comment"><a href="javascript:void(0)" class="inp-close" title="Удалить список">x</a>' :
'<th class="td-comment td-comment-pad">') +
'</tr>';
group.find('.ingredient-cont').append(inputHTML);
}
function delIngredient() {
$(this).parents('tr').remove();
return false;
}
function addGroup(name) {
name = name || '';
groupsCount++;
var id = groupsCount;
var html = '<div class="group-wrap" data-id="{id}"><div class="border-header"><span>{title}</span></div> \
<div class="form-table ingredient-cont"><div class="ingredient-cont_item"><div class="title-Group">Для чего ингредиенты <span class="td-comment">Например: <a href="javascript:void(0)">Для соуса</a></span></div><input type="text" name="ingred_group[{id}][name]" value="{name}"> \
</div></div></div>';
if (groupsCount == 1) {
html = html.replace(/\{title\}/, 'Добавить ингредиент');
} else {
html = html.replace(/\{title\}/, 'Дополнительный список <a href="javascript:void(0)" class="close-block" title="Удалить список">x</a>');
}
html = html.replace(/\{id\}/g, id);
html = html.replace(/\{name\}/g, name);
return $(html).appendTo('.add-list-box');
}
function delGroup() {
$(this).parents('.group-wrap').remove();
return false;
}
$(document).ready(function() {
$('.add-list').click(function() {
var group = addGroup();
addIngredient(group);
addIngredient(group);
return false;
});
$('div.ingredients')
.on('click change', '.ingredient-cont .form-box-ingrid input', function() {
$(this).parents('.ingredient-cont').removeClass('has-error');
if ($(this).parents('tr').is(':last-child')) {
addIngredient($(this).parents('.group-wrap'));
}
return false;
})
.on('click', '.inp-close', delIngredient)
.on('click', '.close-block', delGroup);
});
var ingredientsCount = 0;
var groupsCount = 0;
if (typeof ingredientsList !== 'undefined' && ingredientsList.length) {
groupsCount = ingredientsList.length;
$.map(ingredientsList, function(data) {
var group = addGroup(data['name']);
$.map(data['ingredient'], function(ingredient) {
addIngredient(group, ingredient['name'], ingredient['value'], ingredient['unit']);
});
addIngredient(group);
});
} else {
// ингредиенты
if (!groupsCount) {
var group = addGroup();
addIngredient(group);
addIngredient(group);
}
}
/* - Блок добавить ингредиенты- */
.ingredient_box {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
width: 100%;
}
.form-box.ingredients {
position: relative;
margin: 50px 0 20px;
padding-bottom: 5px;
border-radius: 0;
z-index: 1;
}
.form-box.ingredients::after {
z-index: -1;
transform: scaleX(1.082);
box-sizing: border-box;
}
@media only screen and (max-width:780px) {
.form-box.ingredients::after {
transform: scaleX(1.2);
}
}
.form-box.ingredients .add-list-box .form-box-cont {
display: flex;
align-items: center;
padding: 5px 0 10px;
}
.ingredient_box td:nth-child(2),
.form-box-ingrid {
flex-grow: 1;
}
.form-box-ingrid input {
width: 100%;
}
.form-box.ingredients .add-list-box .form-box-inp input {
max-width: 70px;
width: 100%;
margin-left: 10px;
}
.form-box.ingredients .add-list-box .ingredient-cont_item {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 10px 0 20px;
}
.form-box.ingredients .add-list-box .form-table input {
flex-grow: 1;
}
.ingredient-cont_item .title-Group {
padding: 10px 30px 10px 0;
}
@media only screen and (max-width:480px) {
.form-box.ingredients .add-list-box .form-box-inp input {
width: 42%;
}
}
.title-Group {
padding-right: 30px;
line-height: 1.2;
font-size: 13px;
}
.form-box.ingredients .add-list-box .form-table .td-comment {
display: block;
font-size: 12px;
font-style: italic;
color: #878787;
}
.form-box.ingredients .border-header {
border-bottom: 1px dotted #c5c5c5;
text-align: center;
margin: 0 0 25px;
}
.form-box.ingredients .border-header span {
padding: 0 20px;
background: #f8f8f8;
display: inline-block;
bottom: -13px;
position: relative;
font-size: 17px;
}
.form-box.ingredients .add-list {
display: inline-block;
position: relative;
color: #2a82c5;
font-style: normal;
height: 23px;
line-height: 21px;
background-color: #fff;
padding: 5px 10px 2px 26px;
font-size: 14px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px #dadada;
-moz-box-shadow: 0 1px #dadada;
box-shadow: 0 1px 4px #dadada;
}
.form-box.ingredients .add-list:before {
position: absolute;
content: '+';
top: 5px;
left: 6px;
font-size: 22px;
color: #2a82c5;
}
.form-box.ingredients .add-list:hover {
text-decoration: none;
color: #d81760;
}
.form-box.ingredients .close-block {
font-style: normal;
font-size: 16px;
display: inline-block;
margin-left: 5px;
color: red;
}
.form-box.ingredients .inp-close {
position: absolute;
top: 15px;
right: -12px;
font-style: normal;
text-decoration: none;
font-size: 16px;
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-box ingredients">
<div class="add-list-box"></div>
<div class="border-header">
<span><a href="" class="add-list">Добавить еще список</a></span>
</div>
</div>
Заранее всем спасибо! С уважением!
Ответы (2 шт):
var ingredientsLst = []; // здесь будут все блоки ингредиентов
$('.form-box-cont').each(function() { // проходим по всем блокам
var ingredientParts = [];
$('input', this).each(function() {
ingredientParts.push($(this).val()); // собираем все input в массив
});
ingredientsLst.push(ingredientParts.join(' '));
}
Драфтвуйте)
let ingredientsCount = 0;
let groupsCount = 0;
const addIngredient=(group, name='', value='', unit='')=>{
const id = ingredientsCount++;
const groupId = group.data('id');
const rowCount = group.find('tr').length;
const inputHTML = `<tr class="ingredient_box"><td>${rowCount < 0 ? 'Название ингредиента <span style="color:red;">*</span>' : ''}</td><td><div class="form-box-cont">
<div class="form-box-ingrid"><input type="text" placeholder="Название ингредиента" id="ingred${id}" name="ingred_group[${groupId}][ingredient][${id}][name]" value="${name}">
<input type="text" placeholder="Кол-во" name="ingred_group[${groupId}][ingredient][${id}][value]" value="${value}">
<input type="text" placeholder="Ед.Изм." id="unit${id}" name="ingred_group[${groupId}][ingredient][${id}][unit]" value="${unit}"></div></div></td>
${rowCount >= 2 ? '<td class="td-comment"><a href="javascript:void(0)" class="inp-close" title="Удалить список">x</a>' : '<th class="td-comment td-comment-pad">'}</tr>`;
group.find('.ingredient-cont').append(inputHTML);
};
const addGroup=(name='')=>{
groupsCount++;
let title = 'Доп ингредиенты <a href="javascript:void(0)" class="close-block" title="Удалить список">x</a>';
if(groupsCount === 1)title = 'Ингредиенты';
// if(groupsCount === 1)title = 'Категория <a href="javascript:void(0)" class="close-block" title="Удалить список">x</a>';
let id = groupsCount;
let html = `<div class="group-wrap" data-id="${id}"><div class="border-header"><span>${title}</span></div>
<div class="form-table ingredient-cont"><div class="ingredient-cont_item"><div class="title-Group">Для чего ингредиенты
<span class="td-comment">Например: <a href="javascript:void(0)">Для соуса</a></span></div>
<input type="text" name="ingred_group[${id}][name]" value="${name}"></div></div></div>`;
return $(html).appendTo('.add-list-box');
};
window.onload=()=>{
$('.add-list').click((e)=>{
e.preventDefault();
const group = addGroup();
console.log('group');
addIngredient(group);
addIngredient(group);
});
$('div.ingredients').on('click change', '.ingredient-cont .form-box-ingrid input', ({currentTarget})=>{
$(currentTarget).parents('.ingredient-cont').removeClass('has-error');
if($(currentTarget).parents('tr').is(':last-child')){
addIngredient($(currentTarget).parents('.group-wrap'));
}
});
$('div.ingredients').on('click', '.inp-close', ({currentTarget})=>{
$(currentTarget).parents('tr').remove();
});
$('div.ingredients').on('click', '.close-block', ({currentTarget})=>{
$(currentTarget).parents('.group-wrap').remove();
});
// return false;
if(typeof ingredientsList !== 'undefined' && ingredientsList.length){
groupsCount = ingredientsList.length;
console.log('ingredientsList');
$.map(ingredientsList, (data)=>{
let group = addGroup(data['name']);
$.map(data['ingredient'], (ingredient)=>{
addIngredient(group, ingredient['name'], ingredient['value'], ingredient['unit']);
});
addIngredient(group);
});
}else{
if(!groupsCount){
console.log('groupsCount');
let group = addGroup();
addIngredient(group);
addIngredient(group);
}
}
};
const getTextsFromInput=()=>{
let arr = [];
$('.add-list-box').find('.form-box-ingrid').each((i, e)=>{
if($(e).children('input:first').val() === '')return true;
arr.push(`${$(e).children('input:nth-child(1)').val()} ${$(e).children('input:nth-child(2)').val()} ${$(e).children('input:nth-child(3)').val()}`);
});
return arr.join(', ');
};
$('#butn').click(()=>{
let x = getTextsFromInput();
console.log(x);
});
/* - Блок добавить ингредиенты- */
.ingredient_box{
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
width: 100%;
}
.form-box.ingredients{
position: relative;
margin: 50px 0 20px;
padding-bottom: 5px;
border-radius: 0;
z-index: 1;
}
.form-box.ingredients::after{
z-index: -1;
transform: scaleX(1.082);
box-sizing: border-box;
}
@media only screen and (max-width:780px){
.form-box.ingredients::after{
transform: scaleX(1.2);
}
}
.form-box.ingredients .add-list-box .form-box-cont{
display: flex;
align-items: center;
padding: 5px 0 10px;
}
.ingredient_box td:nth-child(2),
.form-box-ingrid{
display: flex;
flex-grow: 1;
}
.form-box-ingrid input{
width: 100%;
}
.form-box.ingredients .add-list-box .form-box-inp input{
max-width: 70px;
width: 100%;
margin-left: 10px;
}
.form-box.ingredients .add-list-box .ingredient-cont_item{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 10px 0 20px;
}
.form-box.ingredients .add-list-box .form-table input{
flex-grow: 1;
}
.ingredient-cont_item .title-Group{
padding: 10px 30px 10px 0;
}
@media only screen and (max-width:480px){
.form-box.ingredients .add-list-box .form-box-inp input{
width: 42%;
}
}
.title-Group{
padding-right: 30px;
line-height: 1.2;
font-size: 13px;
}
.form-box.ingredients .add-list-box .form-table .td-comment{
display: block;
font-size: 12px;
font-style: italic;
color: #878787;
}
.form-box.ingredients .border-header{
border-bottom: 1px dotted #c5c5c5;
text-align: center;
margin: 0 0 25px;
}
.form-box.ingredients .border-header span{
padding: 0 20px;
background: #f8f8f8;
display: inline-block;
bottom: -13px;
position: relative;
font-size: 17px;
}
.form-box.ingredients .add-list{
display: inline-block;
position: relative;
color: #2a82c5;
font-style: normal;
height: 23px;
line-height: 21px;
background-color: #fff;
padding: 5px 10px 2px 26px;
font-size: 14px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px #dadada;
-moz-box-shadow: 0 1px #dadada;
box-shadow: 0 1px 4px #dadada;
}
.form-box.ingredients .add-list:before{
position: absolute;
content: '+';
top: 5px;
left: 6px;
font-size: 22px;
color: #2a82c5;
}
.form-box.ingredients .add-list:hover{
text-decoration: none;
color: #d81760;
}
.form-box.ingredients .close-block{
font-style: normal;
font-size: 16px;
display: inline-block;
margin-left: 5px;
color: red;
}
.form-box.ingredients .inp-close{
position: absolute;
top: 15px;
right: -12px;
font-style: normal;
text-decoration: none;
font-size: 16px;
color: red;
}
<html><head>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<link rel="stylesheet" href="cssfile.css">
</head><body>
<div class="form-box ingredients">
<div class="add-list-box">
</div>
<div class="border-header">
<span>
<a href="" class="add-list">Добавить еще список</a>
</span>
</div>
</div>
<div class="as-console-wrapper">
<div class="as-console">
</div>
</div>
<button id="butn" style="width:100px;height:100px;"></button>
<script src="javascript.js"></script>
</body></html>