Как можно отправить на сервер массив с данными в случае их изменения?
Здравствуйте. Есть таблица, где строки - это записи из БД. Мне нужно редактировать эти записи (изменять одно из значений записи).
есть значения:
В таблице все строки не редактируемые кроме последнего - статус.
<table>
<tr>
<td>1</td>
<td>что-то что-то что-то что-то</td>
<td>123123</td>
<td>
<select name="select">
<option value="value1">Значение 1</option>
<option value="value2" selected>Значение 2</option>
<option value="value3">Значение 3</option>
</select>
</td>
</tr>
<tr>
<td>2</td>
<td>что-то что-то</td>
<td>141414</td>
<td>
<select name="select">
<option value="value1">Значение 1</option>
<option value="value2" selected>Значение 2</option>
<option value="value3">Значение 3</option>
</select>
</td>
</tr>
<tr>
<td>3</td>
<td>что-то что-то</td>
<td>333333</td>
<td>
<select name="select">
<option value="value1">Значение 1</option>
<option value="value2" selected>Значение 2</option>
<option value="value3">Значение 3</option>
</select>
</td>
</tr>
</table>
<button>СОХРАНИТЬ</button>
Мне нужно чтобы, если пользователь изменил select одной из строк и нажал "сохранить" - на сервер отправился бы массив, в котором был список id и их новых статусов, чтобы я потом могла пройти его перебором и записать в БД
foreach ($_POST as $value) {
$datasave["data"] = [
"number"=>$value['id'],
"status"=>$value['select'],
];
$orders = myapi("collections/save/", "orders", $api, json_encode($datasave));
|
Цитата:
[
{id: 'ИД1', status: 'Статус1'},
...
{id: 'ИДN', status: 'СтатусN'}
]
потом его можно преобразовать в json- строку и отправить на сервер... |
Можно вообще формировать такой УРЛ
<url>?id=id1&st=st1&id=id2&st=st2&id=id3&st=st3&...&id=idN&st=stN Тогда на сервере (в request) будут доступны два массива id: ['id1', ..., 'idN'] и st: ['st1', ..., 'stN'] |
ksa,
а если бы у меня в одной строке было несколько редактируемых параметров, то как в этом случае быть? К примеру в записи с id=1 было изменено input.name = price и input.name = status. А в записи с id=2 только input.name = status. Как бы мне их можно было объединить в один? Ладно в {id: 1} мы можем заранее знать, что это id. А как быть с остальными? Ведь я не знаю будет ли price или status, или даже всё вместе: {price: '123', status: 'Статус 2'}. У меня просто не удалось прописать свой ключ (подставить в ключ переменную) |
nastya97core, если изменения не "однородны" - тогда вариант со строкой json более гибок...
Цитата:
[
{id: 1, price: '123', status: 'Статус 2'},
{id: 2, status: 'Статус 3'},
]
Останется только переделать его в json-строку и можно отправлять на сервер. Если серверный язык не умеет работать со json-строками - можно придумать другой формат строк, который серверу будет более удобен. |
ksa,
У меня тупик как раз с формированием этого массива. Как его сделать? Как мне прописать ключ, если я даже заранее не знаю, будет ли он? Вот этот вариант {status: ''} - сделает изменения в БД и сотрёт данные... |
вот такая таблица.
https://jsfiddle.net/pos2yb0j/ Нужно, чтобы при сохранении создавался массив только изменённых
[
{id: a1, info: '123', status: 'Статус 2'},
{id: a2, status: 'Статус 3'},
]
помогите |
nastya97core,
а можно исходный массив , а не таблицу? |
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid grey;
min-width: 10vw;
padding: 10px;
}
input {
border:none;
border-bottom:1px solid black;
}
</style>
<script>
$(function() {
$('input, select').on('change', function() {
const o = $(this)
o.addClass('on')
o.parents().parent().addClass('on')
})
$('#test').on('submit', function() {
let a = []
$('#data > tbody > tr.on').each(function() {
let obj = {}
const o = $(this)
const id = o.find('td:first-child').text()
obj.id = id
o.find('.on').each(function() {
obj[this.name] = this.value
})
a.push(obj)
})
alert(JSON.stringify(a))
return false
})
})
</script>
</head>
<body>
<form id='test'>
<table id='data'>
<thead>
<tr>
<td>id</td>
<td>Стоимость</td>
<td>Инфо</td>
<td>Статус</td>
</tr>
</thead>
<tbody>
<tr>
<td>a1</td>
<td><input type="text" name='sum' value="123"></td>
<td><input type="text" name='info' value="перезвонить"></td>
<td><select name='status'>
<option value="value1" selected>В обработке</option>
<option value="value2">Завершен</option>
<option value="value3">Невозможен</option>
</select></td>
</tr>
<tr>
<td>a2</td>
<td><input type="text" name='sum' value="1413"></td>
<td><input type="text" name='info'></td>
<td><select name='status'>
<option value="value1">В обработке</option>
<option value="value2" selected>Завершен</option>
<option value="value3">Невозможен</option>
</select></td>
</tr>
<tr>
<td>a3</td>
<td><input type="text" name='sum' value="222"></td>
<td><input type="text" name='info'></td>
<td><select name='status'>
<option value="value1" selected>В обработке</option>
<option value="value2">Завершен</option>
<option value="value3">Невозможен</option>
</select></td>
</tr>
</tbody>
</table>
<button>Сохранить</button>
</form>
</body>
</html>
|
таблица массив изменений
nastya97core,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<table>
<tr>
<td>id</td>
<td>Стоимость</td>
<td>Инфо</td>
<td>Статус</td>
</tr>
<tr class="test">
<td>a1</td>
<td>123</td>
<td><input type="text" value="перезвонить"></td>
<td><select name="select">
<option value="value1" selected>В обработке</option>
<option value="value2">Завершен</option>
<option value="value3">Невозможен</option>
</select></td>
</tr>
<tr class="test">
<td>a2</td>
<td>1413</td>
<td><input type="text"></td>
<td><select name="select">
<option value="value1">В обработке</option>
<option value="value2" selected>Завершен</option>
<option value="value3">Невозможен</option>
</select></td>
</tr>
<tr class="test">
<td>a3</td>
<td>222</td>
<td><input type="text"></td>
<td><select name="select">
<option value="value1" selected>В обработке</option>
<option value="value2">Завершен</option>
<option value="value3">Невозможен</option>
</select></td>
</tr>
</table>
<button>Сохранить</button>
<pre id="out"></pre>
<script>
const getData = _ => [...document.querySelectorAll('.test')].map(({ cells }) => {
let [id, price, info, status] = [...cells].map(({
textContent,
children
}) => children.length ? children[0].value : textContent);
return {
id,
info,
status
}
});
let currentArr = getData();
document.querySelector('button').addEventListener('click', _ => {
let arr = getData();
arr = arr.filter((obj, i) => {
let el = currentArr[i],
test;
['info', 'status'].forEach(k => obj[k] === el[k] ? delete obj[k] : (test = true))
return test
})
out.innerHTML = JSON.stringify(arr, "", 1)
})
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 07:58. |