如何组织从 HTML 表单获得的数据以生成 JSON
How can I organize data that I got from an HTML form to make a JSON?
我是一名初学者程序员,我需要了解如何从 HTML 表单获取数据并将其放入 JSON 文件中,但我制作的代码为我的 JSON 文件中的每个对象提供了不同的鬃毛,因为表单不能有两个同名的输入,碰巧在我的表单中,我使用 jQuery 附加类似于"问题"和"答案"输入的内容,用户可以插入许多问题,它们都像问题 1、问题 2...我希望它是 JSON 文件中的问题数组,而不是单个对象(不知道它是否清楚(
我有什么
{
"_method":"PUT",
"_token":"4EnPNxmaVmVdXnuYwxzLzWP06mMK7phHJMBJMt3v",
"2tipo":"discursiva",
"2enunciado":"teste pergunta discursiva",
"2resposta":"",
"3tipo":"objetiva",
"3enunciado":"teste pergunta objetiva",
"3alternativa2checkbox":"on",
"3alternativa2texto":"teste alternativa",
"3alternativa1checkbox":"on",
"3alternativa1texto":"teste alternativa"
}
我想要它如何:
{
"_method":"PUT",
"_token":"4EnPNxmaVmVdXnuYwxzLzWP06mMK7phHJMBJMt3v",
"question":[
{
"type":"discursiva",
"quest":"teste pergunta discursiva",
"answers":""
},
{
"type":"objetiva",
"quest":"teste pergunta objetiva",
"answers":[
{
"alt":"on",
"txt":"teste alternativa"
}
{
"alt":"on",
"txt":"teste alternativa"
}]
}]
}
这是我的JS文件:
/**
* Created by paulo on 11/10/15.
*/
var cont = 1;
//this is wrong I know
var contAlt = [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1];
function createQuest(){
if(document.getElementById('discursiva').checked) {
var appd = $('<div class="q'+cont+'"><div class="form-group"><input type="hidden" name="'+cont+'tipo" value="discursiva"><label>Questão '+cont+' -</label><input type="text" class="form-control" name="'+cont+'enunciado"><button type="button" class="btn btn-default" onclick="delQuest('+cont+')" >Remover pergunta</button><input type="hidden" name="'+cont+'resposta" value=""></div>');
$(".quest").append(appd);
cont++;
}
else if(document.getElementById('objetiva').checked) {
var appd = $('<div class="q'+cont+'"><div class="form-group"><input type="hidden" name="'+cont+'tipo" value="objetiva"><label>Questão '+cont+' -</label><input type="text" class="form-control" name="'+cont+'enunciado"><button type="button" class="btn btn-default" onclick="delQuest('+cont+')" >Remover pergunta</button><button type="button" class="btn btn-default" onclick="addAlt('+cont+')" >Adicionar alternativa</button><div class="checkbox'+cont+'"><label><input type="checkbox" name="'+cont+'alternativa1checkbox"> Alternativa 1 </label><input type="text" class="form-control" name="'+cont+'alternativa1texto"></div></div>');
$(".quest").append(appd);
cont++;
}
}
var del = 0;
function delQuest(del) {
var toDel = (".q" + del);
$(toDel).remove();
}
function addAlt(add){
contAlt[add]++;
var appd = $('<div class="checkbox'+contAlt[add]+'"><label><input name="'+add+'alternativa'+contAlt[add]+'checkbox"type="checkbox"> Alternativa '+contAlt[add]+'</label><input type="text" class="form-control" name="'+add+'alternativa'+contAlt[add]+'texto"><button type="button" class="btn btn-default" onclick="delAlt('+contAlt[add]+')" >Remover alternativa</button></div>');
var classe = (".checkbox"+add);
$(classe).prepend(appd);
}
function delAlt(del){
var toDel = (".checkbox" + del);
$(toDel).remove();
}
这个php(我正在使用laravel,顺便说一句(:
@extends('layouts.master')
@section('title')
Criar novo sol
@stop
@section('script')
<link rel="stylesheet" href="../../css/styleForm.css">
@stop
@section('div1')
{!! $id !!}
{{--seleciona o tipo de questão--}}
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="discursiva" value="option1" checked>
Discursiva
</label>
<label>
<input type="radio" name="optionsRadios" id="objetiva" value="option2">
Objetiva
</label>
</div>
<button class="btn btn-default" onclick="createQuest()" >Nova</button>
{{--formulário aram--}}
{!!Form::open(array('url'=>'new/'.$id, 'method' => 'PUT'))!!}
<div class="quest">
</div>
{{--enviar--}}
<p>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-floppy-disk"></span> Salvar</button>
</p>
{!!Form::close()!!}
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<script src="../../js/indexForm.js"></script>
<script src="../../js/questionnaire.js"></script>
@stop
jQuery选择器将帮助您:
questions = [];
$(".quest > div[class^='q']").each(function(){
var type = $(this).find("input[name$='tipo'").val();
var quest = $(this).find("input[name$='enunciado'").val()
var ans = [];
$(this).find("div[class^='checkbox']").each(function(){
var that = this;
var check = $(that).find("input[name$='checkbox']").val();
var text = $(that).find("input[name$='texto']").val();
ans.push({"alt": check, "txt": text});
});
questions.push({"type": type, "quest": quest, "answers": ans});
});
相关文章:
- 无法使用变量访问数据 JSON
- 使用 ng-repeat解析不均匀数据/ json对象
- 在没有jsonp的情况下从另一个域获取数据(json格式)
- 如何获取带参数的数据json
- 如何在android中显示实时雅虎金融股票数据..json格式如下所示
- 使用 JavaScript 将数据 json 显示到网页中
- 高位图表来源于API数据(JSON)
- 使用动态数据json初始化同位素
- Django:将数据JSON从视图传递给javascript
- 存储配置数据 (json)
- 未捕获的SyntaxError:意外的标识符图像数据json
- 接收数据json/jquery
- Jquery数据表数据json
- 不能在cakephp中使用数组数据json
- 在不锁定浏览器的情况下,将大数据JSON从REST请求反序列化为对象
- 如何读取数据JSON格式数组的字符串数据
- 我有一个流星应用程序,需要从/public/_assets/results/mmresults读取数据.Json文件,在
- 数据json不显示在html
- 使用2个下拉列表创建2个并排的表行来比较数据- JSON
- 需要将复杂的json对象转换为合适的angularjs UI树数据json结构