我还如何从表单中的元素序列化ID?

时间:2018-12-18 14:07:50

标签: javascript jquery ajax

我有一个看起来像这样的表格(例如,因为人们可以排序并添加新的类别/问题):

<form id="lijstform">
    <div class="row">
        <div class="col-md-8">
            <label class="lijstnaamtitle">Lijst naam</label>
            <label class="displaynonecoid" id="coid">57</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="2-order">
            <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 ui-sortable-handle" id="1-order" style="">
            <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" id="4-order" style="">
            <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 class="row sortwrap" id="3-order">
            <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="5-order">
            <div class="col-md-8">
                <input type="text" name="category[]" placeholder="5. 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>

这是我序列化表单并将其发布到我的PHP脚本中的方式:

$( ".lijstbutton" ).on( "click", function( event ) {
    event.preventDefault();
    // file that data is posted to:
    url = 'includes/createlist.php';
    // Serialized form
    $lijst = $( '#lijstform' ).serializeArray();
    // Id of company list is from
    $companyid = $( '#coid' ).text();
    // post the data
    var posting = $.post(url, {
      lijst: $lijst,
      companyid: $companyid
    });
    // show result in div
    posting.done(function( data ) {
     $( ".lijstresult" ).empty().slideDown('fast').append( data );
    });
  });

使用$lijst = $( '#lijstform' ).serializeArray();这行代码将整个表格序列化,但是其中没有id。我想要每个类别的ID,例如id="1-order"

如何将这些ID发送到我的PHP脚本中,以便将其存储在订单表中(排序顺序与商店中的排序方式不同)?

当我发布到PHP脚本并查看表单数据时,这就是我在“网络”标签中看到的内容:

lijst[0][name]: lijsttitle
lijst[0][value]: Lijst titel
lijst[1][name]: category[]
lijst[1][value]: Category 1
lijst[2][name]: question[]
lijst[2][value]: Question 1
lijst[3][name]: question[]
lijst[3][value]: Question 2
lijst[4][name]: category[]
lijst[4][value]: Category 2
lijst[5][name]: question[]
lijst[5][value]: Question 1
lijst[6][name]: category[]
lijst[6][value]: Category 3
lijst[7][name]: question[]
lijst[7][value]: question 1
companyid: 57

0 个答案:

没有答案