Question

我有一个可以排序的动态列表，这些元素的id会相应更改。

我的问题：我序列化了整个表单，并通过ajax将其发送到PHP脚本，但是id并未随同发送。

我的数组现在看起来像这样：

Array
(
    [title] => lijsttitle
    [Category 1] => Array
        (
            [0] => Question 1
        )

    [Category 2] => Array
        (
            [0] => Question 1
        )

    [Category 3] => Array
        (
            [0] => Question 1
        )

    [Category 4] => Array
        (
            [0] => Question 1
        )

)

我的HTML表单在发布时会生成上述数组，如下所示：

<form id="lijstform">
    <div class="row">
        <div class="col-md-8">
            <label class="lijstnaamtitle">Lijst naam</label>
            <input class="form-control name_list catinput lijsttitle" type="text" name="lijsttitle">
        </div>
    </div>
    <div id="dynamic_field" class="ui-sortable">
        <div class="row sortwrap ui-sortable-handle" id="1">
            <div class="col-md-8">
                <input type="text" name="category[]" placeholder="1. Voeg een categorie toe" class="form-control name_list catinput">
                <i class="mdi mdi-sort dragndrop"></i>
                <div class="questionlist questionwrap">
                    <div class="row">
                        <div class="col-md-8">
                            <button class="btn btn-success questionbutton">Extra vraag</button>
                            <input type="text" name="question[]" placeholder="1. Voeg een vraag toe" class="form-control name_list questioninput">
                        </div>
                        <div class="col-md-4">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
            </div>
        </div>
        <div class="row sortwrap ui-sortable-handle" id="2">
            <div class="col-md-8">
                <input type="text" name="category[]" placeholder="2. Voeg een categorie toe" class="form-control name_list catinput"> <i class="mdi mdi-sort dragndrop"></i>
                <div class="questionlist questionwrap">
                    <div class="row">
                        <div class="col-md-8">
                            <button class="btn btn-success questionbutton">Extra vraag</button>
                            <input type="text" name="question[]" placeholder="1. Voeg een vraag toe" class="form-control name_list questioninput"> </div>
                        <div class="col-md-4"> </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <button id="addcategory" class="btn btn-danger btn_remove removebutton">X</button>
            </div>
        </div>
        <div class="row sortwrap" id="3">
            <div class="col-md-8">
                <input type="text" name="category[]" placeholder="3. Voeg een categorie toe" class="form-control name_list catinput"> <i class="mdi mdi-sort dragndrop"></i>
                <div class="questionlist questionwrap">
                    <div class="row">
                        <div class="col-md-8">
                            <button class="btn btn-success questionbutton">Extra vraag</button>
                            <input type="text" name="question[]" placeholder="1. Voeg een vraag toe" class="form-control name_list questioninput"> </div>
                        <div class="col-md-4"> </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <button id="addcategory" class="btn btn-danger btn_remove removebutton">X</button>
            </div>
        </div>
        <div class="row sortwrap" id="4">
            <div class="col-md-8">
                <input type="text" name="category[]" placeholder="4. Voeg een categorie toe" class="form-control name_list catinput"> <i class="mdi mdi-sort dragndrop"></i>
                <div class="questionlist questionwrap">
                    <div class="row">
                        <div class="col-md-8">
                            <button class="btn btn-success questionbutton">Extra vraag</button>
                            <input type="text" name="question[]" placeholder="1. Voeg een vraag toe" class="form-control name_list questioninput"> </div>
                        <div class="col-md-4"> </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <button id="addcategory" class="btn btn-danger btn_remove removebutton">X</button>
            </div>
        </div>
    </div>
</form>

您会看到每个可排序的行都有一个ID：<div class="row sortwrap" id="4">

我希望数组中的每个类别都具有该ID，以便我可以更新数据库并稍后以正确的顺序显示保存的列表。

我尝试了以下操作：

$( ".lijstbutton" ).on( "click", function( event ) {
  event.preventDefault();
  url = 'includes/createlist.php';

  $lijst = $( '#lijstform' ).serializeArray();
  $idorder = $('.sortwrap').attr('id');

  var posting = $.post(url, {
    lijst: $lijst,
    idorder: $idorder
  });

    posting.done(function( data ) {
     $( ".lijstresult" ).empty().slideDown('fast').append( data );
   });
  });

但是发布后，这是我在“网络”标签中看到的内容：

lijst[0][name]: lijsttitle
lijst[0][value]: List name
lijst[1][name]: category[]
lijst[1][value]: Category 1
lijst[2][name]: question[]
lijst[2][value]: Question 1
lijst[3][name]: category[]
lijst[3][value]: Category 2
lijst[4][name]: question[]
lijst[4][value]: Question 1
lijst[5][name]: category[]
lijst[5][value]: Category 3
lijst[6][name]: question[]
lijst[6][value]: Question 1
lijst[7][name]: category[]
lijst[7][value]: Category 4
lijst[8][name]: question[]
lijst[8][value]: Question 1
idorder: 1

仅第一个发布。

这是我在PHP脚本中生成数组的方式：

$arr = $_POST['lijst'];

$store = [];

// pull off first arr element
$title = array_shift($arr);
// save title to store
$store['title'] = $title['name'];

$currCat = '';
foreach($arr as $a) {
  $val = $a['value'];
  // handle category
  if($a['name'] == 'category[]') {
    // save cat name
    $currCat = $val;
    // init questions array
    $store[$currCat] = [];
  }
  else {
    // add question to question array
    $store[$currCat][] = $val;
  }
}

不确定哪种最好的方法是将订单ID添加到我的数组中以及如何做。

也许在几乎没有使用过的字符之后将id添加到每个键中？类似于[类别1 | 1]，然后在|

上爆炸

Answer 1

一种简便的方法是在每个hidden下创建row sortwrap输入，提交输入后将被张贴到该行。

<div class="row sortwrap ui-sortable-handle" id="1">
    <div class="col-md-8">
        <input type="text" name="category[]" placeholder="1. Voeg een categorie toe" class="form-control name_list catinput">
        <i class="mdi mdi-sort dragndrop"></i>
        <div class="questionlist questionwrap">
            <div class="row">
                <div class="col-md-8">
                    <button class="btn btn-success questionbutton">Extra vraag</button>
                    <input type="text" name="question[]" placeholder="1. Voeg een vraag toe" class="form-control name_list questioninput">
                </div>
                <div class="col-md-4">
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
    </div>
    <input type="hidden" name="id[]" value="1" /> <!-- POST ID in Hidden input -->
</div>

类似地，在所有sortwrap容器下进行。

使用当前流程的另一种方法是使用jQuery map函数来检索所有ID。

更改

$idorder = $('.sortwrap').attr('id');

收件人

$idorder = $('.sortwrap').map(function() {
               return $(this).attr("id");
           }).get();

从已经序列化的表单jQuery中的元素中添加ID

1 个答案: