javascript - How does the php background process multiple pieces of data for the same item submitted through the form? ?

Question

1. The page structure is as shown in the picture above, and PHP is used in the background. If there are three records in the education experience, and they are submitted to the background when you click save, how should you handle them better? ?

2. If the front page can dynamically generate a new row, how to deal with the problem of name and other attributes between multiple rows? ?

Can you tell me a general idea? ?

Answer 1

For example, there are the following fields

scholl_name
education
address

Modify the original

For example, its ID is 123

<p>
    <input name="old[123][scholl_name]" value="....">
    <input name="old[123][education]" value="....">
    <input name="old[123][address]" value="...."> 
    <a href="javascript:delete(123)">删除</a>
</p>

Newly added

Set a variable createdIndex = 0
New

//createdIndex 使用js输出
<p id="new_createdIndex">
    <input name="create[new_createdIndex][scholl_name]" value="">
    <input name="create[new_createdIndex][education]" value="">
    <input name="create[new_createdIndex][address]" value=""> 
    <a href="javascript:delete('new_createdIndex')">删除</a>
</p>

//每次新增后都累加
createdIndex++;

Delete

function delete(id)
{
    if (id.indexOf('new_') < 0) //不是新增的, 新增一条删除记录到form
       $('<input name="deleted[]" value="'+id+'">').appendTo('#this-form');
    //删除本行
    $('#' + id).remove();
}

Background processing

$deleted = $_POST['deleted'];
foreach($deleted as $id)
{
   数据库删除对应的$id
}
$create = $_POST['create'];

//如果需要排序 可以用sort或rsort

foreach($create as $v)
{
    /*
    结构是: 
    $v = [
        'school' => 'Your value',
        'education' => '...',
        'address' => ''
    ];
    */
    insert into table 
}
   

$old = $_POST['old'];
foreach($old as $id => $v)
{
   //结构同上
   update table set .... where id = $id;
}

This is the most compatible way. If you use Vue or the like, you can also use JSON submission, because Vue can monitor whether the form has been modified and only records the modified form.

Answer 2

First question

Use array form when submitting on the front end:

[{
    "school": "中山大学"
    ...
}, {
    "school": "华南理工大学"
    ...
}]

The server traverses the data and saves it to the database.

Second question

name does not conflict, only id conflicts. Can you describe the problem in more detail?

Answer 3

1. The data submitted to the background is received directly by $_POST, and then traversed in a loop to verify the corresponding data. After passing the verification, it is stored in the database;
2. All attributes of the same field in the newly added row are the same;

Answer 4

The first option:
When you click submit, process the data you want through js (for example, format it into an array) and put it into a hidden field before submitting the form
The second option:
Do processing on the form element name It has been clearly stated above:
The third option: (similar to the second one)

1. First define the template for adding a new line

<script type="text/template" id="tpl_xxx">
//html元素
<tr>
    <input name="school[]" />
    <input name="remark[]" />
</tr>
</script>

1. When adding a new row, clone tpl_xxx and put it in the corresponding place (such as the last row of the table)

2. Post-submission PHP processing

$schools = $_POST['schools'];
$remarks = $_POST['remarks'];
//$schools[0], $remarks[0], ... 组成第一行数据