|
Сообщение от Scantraxx
|
|
а у меня ведь заранее не известно сколько будет полей и какие там будут значения
|
А этого знать и не обязательно, скрипт клиента или сервера разберется сколько и чего, а значения прерогатива пользователя, что введет, то и будет.
Элементы формы это коллекция, и если из этой коллекции скриптом формировать объект/json, то указывать индексы не обязательно. Без них может получится пролет в таких языках как РНР, который освобождают программиста от заботы разбирать параметры запроса, он уже возвращает готовое, если только самому не захочется работать в RAW данными.
Это пример, в нем только возможность добавления полей в форму, без удаления их. После заполнения формы и ее отправления готовится объект, и преобразованный в JSON отправляется серверу:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(function() {
$('form').on('click', 'a.plus', function() {
//добавление ответов к вопросу
var fld = $(this).closest('div').prev().find('input').last(), add = fld.clone().val('');
fld.after(add)
}).submit(function(e) {
//формирование отправления и отправка формы
e.preventDefault();
var obj = [];
$.each(this.elements, function() {
if(this.name=='que_name') obj.push({"que_name" : this.value, "pos_ans" : []});
else if(this.name=='pos_ans') obj[obj.length-1].pos_ans.push(this.value)
});
console.log(JSON.stringify(obj)); //чисто посмотреть что отправляется
$.ajax({
type: 'POST',
url: '/Poll/Create',
data: {json : JSON.stringify(obj)},
contentType: 'application/json; charset=utf-8',
success: function (msg) {
if (msg == 'True') {
alert('Опрос успешно добавлен');
window.location.reload(true);
};
}
});
});
//добавление нового вопроса
$('#add_qst').click(function() {
var qst = $(this).closest('form').find('div.questionValue').last(), add = qst.clone(), h = add.find('h4');
h.text(h.text().replace(/\d+/, function(v) {
return +v + 1;
}));
add.find('input').val('').filter('[name="pos_ans"]').not(':first').remove();
qst.after(add)
});
});
</script>
</head>
<body>
<form>
<div class="questionValue">
<h4> Вопрос #1</h4>
<input type="text" name="que_name" />
<div class="answer">
<div class="possibleAnswer">
<input type='text' name='pos_ans' />
</div>
</div>
<div><p><a class="plus">Добавить ответ</a></p>
</div>
</div>
<a id="add_qst">Добавить вопрос</a>
<div><button>Send</button></div>
</form>
</body>
</html>