Javascript 序列化表单并将标签和段落用作数组中的键

我有一个表单，在顶部是基本的，只是一些输入字段。但再往下是一个列表，上面有类别、问题和使用开关（单选按钮）回答每个问题的三个可能答案

我的HTML如下所示：

<form class="addwerkplekinspectie" action="#" method="post">
   <div class="row">
      <div class="col-md-3">
         <p class="inputtitles">Werkplekinspectie template:</p>
      </div>
      <div class="col-md-9">
         <p class="inputtitles nomarginleft">jjjj</p>
      </div>
      <div class="col-md-3">
         <p class="inputtitles">Titel:</p>
      </div>
      <div class="col-md-9">
         <input type="text" name="titel" class="form-control name_list">
      </div>
      <div class="col-md-3">
         <p class="inputtitles">Inspectienummer:</p>
      </div>
      <div class="col-md-9">
         <input type="text" name="inspectienummer" class="form-control name_list">
      </div>
      <div class="col-md-3">
         <p class="inputtitles">Inspectiedatum:</p>
      </div>
      <div class="col-md-9">
         <input type="date" name="datum" class="form-control name_list">
      </div>
      <div class="col-md-3">
         <p class="inputtitles">Naam inspecteur:</p>
      </div>
      <div class="col-md-9">
         <input type="text" name="naaminspecteur" class="form-control name_list">
      </div>
      <div class="col-md-3">
         <p class="inputtitles">Locatie/Vestiging</p>
      </div>
      <div class="col-md-9">
         <input type="text" name="locatie" class="form-control name_list">
      </div>
      <div class="col-md-3">
         <p class="inputtitles">Naam/ Namen geauditeerden</p>
      </div>
      <div class="col-md-9">
         <input type="text" name="naamgeauditeerden" class="form-control name_list">
      </div>
   </div>
   <label class="categorytitle">jjjj</label>
   <div class="row">
      <div class="col-md-8">
         <p class="questionclass">hhhh</p>
      </div>
      <div class="col-md-4">
         <div class="container text-right">
            <input type="radio" name="group1" id="radio-1" value="ok">
            <label class="radiotoggle" for="radio-1"><span class="radio">Ok</span></label>
            <input type="radio" name="group1" id="radio-2" value="fout">
            <label class="radiotoggle" for="radio-2"><span class="radio">Fout</span></label>
            <input type="radio" name="group1" id="radio-3" value="nvt">
            <label class="radiotoggle" for="radio-3"><span class="radio">N.v.t</span></label>
         </div>
      </div>
      <div class="col-md-8">
         <p class="questionclass">jjj</p>
      </div>
      <div class="col-md-4">
         <div class="container text-right">
            <input type="radio" name="group4" id="radio-4" value="ok">
            <label class="radiotoggle" for="radio-4"><span class="radio">Ok</span></label>
            <input type="radio" name="group4" id="radio-5" value="fout">
            <label class="radiotoggle" for="radio-5"><span class="radio">Fout</span></label>
            <input type="radio" name="group4" id="radio-6" value="nvt">
            <label class="radiotoggle" for="radio-6"><span class="radio">N.v.t</span></label>
         </div>
      </div>
   </div>
   <label class="categorytitle">Testt</label>
   <div class="row">
      <div class="col-md-8">
         <p class="questionclass">test</p>
      </div>
      <div class="col-md-4">
         <div class="container text-right">
            <input type="radio" name="group7" id="radio-7" value="ok">
            <label class="radiotoggle" for="radio-7"><span class="radio">Ok</span></label>
            <input type="radio" name="group7" id="radio-8" value="fout">
            <label class="radiotoggle" for="radio-8"><span class="radio">Fout</span></label>
            <input type="radio" name="group7" id="radio-9" value="nvt">
            <label class="radiotoggle" for="radio-9"><span class="radio">N.v.t</span></label>
         </div>
      </div>
   </div>
</form>
<div class="lijstresult">
</div>
<button type="button" class="btn btn-secondary btn-lg waves-effect btnadd savewpi">Werkplekinspectie opslaan</button>

Array
(
    [information] => Array
        (
            [titel] => inserted value
            [inspectienummer] => inserted value
            [datum] => inserted value
            [naaminspecteur] => inserted value
            [locatie] => inserted value
            [naamgeauditeerden] => inserted value
        )

    [questionlist] => Array
        (
            [jjjj] => Array
                    (
                        [hhhh] => ok
                        [jjj] => fout
                    )
            [testt] => Array
                    (
                        [test] => n.v.t.
                    )
        )
)

正如你们所看到的，我无法分辨哪个答案属于哪个问题，哪个问题属于哪个类别

如何使用表格（问题）中的标签（类别）和段落

理想情况下，我的阵列将如下所示：

<form class="addwerkplekinspectie" action="#" method="post">
   <div class="row">
      <div class="col-md-3">
         <p class="inputtitles">Werkplekinspectie template:</p>
      </div>
      <div class="col-md-9">
         <p class="inputtitles nomarginleft">jjjj</p>
      </div>
      <div class="col-md-3">
         <p class="inputtitles">Titel:</p>
      </div>
      <div class="col-md-9">
         <input type="text" name="titel" class="form-control name_list">
      </div>
      <div class="col-md-3">
         <p class="inputtitles">Inspectienummer:</p>
      </div>
      <div class="col-md-9">
         <input type="text" name="inspectienummer" class="form-control name_list">
      </div>
      <div class="col-md-3">
         <p class="inputtitles">Inspectiedatum:</p>
      </div>
      <div class="col-md-9">
         <input type="date" name="datum" class="form-control name_list">
      </div>
      <div class="col-md-3">
         <p class="inputtitles">Naam inspecteur:</p>
      </div>
      <div class="col-md-9">
         <input type="text" name="naaminspecteur" class="form-control name_list">
      </div>
      <div class="col-md-3">
         <p class="inputtitles">Locatie/Vestiging</p>
      </div>
      <div class="col-md-9">
         <input type="text" name="locatie" class="form-control name_list">
      </div>
      <div class="col-md-3">
         <p class="inputtitles">Naam/ Namen geauditeerden</p>
      </div>
      <div class="col-md-9">
         <input type="text" name="naamgeauditeerden" class="form-control name_list">
      </div>
   </div>
   <label class="categorytitle">jjjj</label>
   <div class="row">
      <div class="col-md-8">
         <p class="questionclass">hhhh</p>
      </div>
      <div class="col-md-4">
         <div class="container text-right">
            <input type="radio" name="group1" id="radio-1" value="ok">
            <label class="radiotoggle" for="radio-1"><span class="radio">Ok</span></label>
            <input type="radio" name="group1" id="radio-2" value="fout">
            <label class="radiotoggle" for="radio-2"><span class="radio">Fout</span></label>
            <input type="radio" name="group1" id="radio-3" value="nvt">
            <label class="radiotoggle" for="radio-3"><span class="radio">N.v.t</span></label>
         </div>
      </div>
      <div class="col-md-8">
         <p class="questionclass">jjj</p>
      </div>
      <div class="col-md-4">
         <div class="container text-right">
            <input type="radio" name="group4" id="radio-4" value="ok">
            <label class="radiotoggle" for="radio-4"><span class="radio">Ok</span></label>
            <input type="radio" name="group4" id="radio-5" value="fout">
            <label class="radiotoggle" for="radio-5"><span class="radio">Fout</span></label>
            <input type="radio" name="group4" id="radio-6" value="nvt">
            <label class="radiotoggle" for="radio-6"><span class="radio">N.v.t</span></label>
         </div>
      </div>
   </div>
   <label class="categorytitle">Testt</label>
   <div class="row">
      <div class="col-md-8">
         <p class="questionclass">test</p>
      </div>
      <div class="col-md-4">
         <div class="container text-right">
            <input type="radio" name="group7" id="radio-7" value="ok">
            <label class="radiotoggle" for="radio-7"><span class="radio">Ok</span></label>
            <input type="radio" name="group7" id="radio-8" value="fout">
            <label class="radiotoggle" for="radio-8"><span class="radio">Fout</span></label>
            <input type="radio" name="group7" id="radio-9" value="nvt">
            <label class="radiotoggle" for="radio-9"><span class="radio">N.v.t</span></label>
         </div>
      </div>
   </div>
</form>
<div class="lijstresult">
</div>
<button type="button" class="btn btn-secondary btn-lg waves-effect btnadd savewpi">Werkplekinspectie opslaan</button>

Array
(
    [information] => Array
        (
            [titel] => inserted value
            [inspectienummer] => inserted value
            [datum] => inserted value
            [naaminspecteur] => inserted value
            [locatie] => inserted value
            [naamgeauditeerden] => inserted value
        )

    [questionlist] => Array
        (
            [jjjj] => Array
                    (
                        [hhhh] => ok
                        [jjj] => fout
                    )
            [testt] => Array
                    (
                        [test] => n.v.t.
                    )
        )
)

这是我当前序列化表单的方式：

$( ".savewpi" ).on( "click", function( event ) {
    event.preventDefault();

    url = 'includes/savewpi.php';
    $wpi = $( '.addwerkplekinspectie' ).serializeArray();

    // post the data
    var posting = $.post(url, {
      wpi: $wpi
    });

    console.log($wpi);

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

---

您可以使用

input

字段的

name

属性来构造发布的数据。创建类似这样的输入字段

<input type="date" name="information[titel]" class="form-control name_list">
<input type="date" name="information[inspectienummer]" class="form-control name_list">
<input type="date" name="information[naaminspecteur]" class="form-control name_list">
<input type="date" name="information[locatie]" class="form-control name_list">
<input type="date" name="information[naamgeauditeerden]" class="form-control name_list">

<input type="radio" name="questionlist[jjjj][hhhh]" id="radio-1" value="ok">
<input type="radio" name="questionlist[jjjj][jjj]" id="radio-2" value="fout">