[英]Serializing form and use labels and paragraphs as keys in array
I have a form that at the top is basic, just some input fields. 我有一个表单,顶部是基本的,只是一些输入字段。 But further down is a list with categories, questions and three possible answers for every question using switches (radiobuttons).
但是下面是一个列表,其中包含使用开关(radiobuttons)的每个问题的类别,问题和三个可能的答案。
My HTML looks like this: 我的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>
And to give an idea of what I mean this is what my page looks like: 并且想知道我的意思这就是我的页面看起来像:
When I serialize the form and post to my php script the array that I print looks like this (i left everything empty except for the radiobuttons): 当我序列化表单并发布到我的PHP脚本时,我打印的数组看起来像这样(除了radiobuttons我留下了所有空的):
Array
(
[0] => Array
(
[name] => titel
[value] =>
)
[1] => Array
(
[name] => inspectienummer
[value] =>
)
[2] => Array
(
[name] => datum
[value] =>
)
[3] => Array
(
[name] => naaminspecteur
[value] =>
)
[4] => Array
(
[name] => locatie
[value] =>
)
[5] => Array
(
[name] => naamgeauditeerden
[value] =>
)
[6] => Array
(
[name] => group1
[value] => nvt
)
[7] => Array
(
[name] => group4
[value] => fout
)
[8] => Array
(
[name] => group7
[value] => nvt
)
)
As you can see I have no way of telling which answer belongs to what question and which question belongs to what category. 正如你所看到的,我无法告诉哪个答案属于哪个问题,哪个问题属于哪个类别。
How can I use the labels (categories) and paragraphs in the form (questions)? 如何使用表单中的标签(类别)和段落(问题)?
Ideally my array would look something like this: 理想情况下,我的数组看起来像这样:
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.
)
)
)
This is how I currently serialize my form: 这就是我目前序列化表单的方式:
$( ".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 );
});
});
You can use name
attribute of input
field to structure your posted data. 您可以使用
input
字段的name
属性来构建发布的数据。 Create your input fields something like this. 创建这样的输入字段。
<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">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.