Опубликовать данные из формы, не зная, как долго будет форма

Question

Мне нужно отправить некоторые данные формы, используя jQuery, и значения входных полей должны быть опубликованы в формате JSON. Проблема состоит в том, что поля формы состоят из полей, которые обязательно будут такими, как: имя, фамилия и адрес электронной почты, однако поля после этого могут быть любого числа, потому что форма построена из запроса GET. Поэтому обычно я делал бы что-то вроде этого:

var firstName = $('input[name="firstName"]').val(); 
var lastName = $('input[name="lastName"]').val(); 
var email = $('input[name="email"]').val(); 

data: JSON.stringify({ 
    "firstName": firstName, 
    "lastName": lastName, 
    "email": email 
}) 

Однако это не будет работать для моих оставшихся полей. Поэтому в идеале мне нужно сделать что-то вроде каждой функции или что-то, чтобы перебрать эти другие вопросы и поместить этот цикл в JSON.stringify, но я понятия не имею, как это сделать. Но тогда вы могли бы сказать, почему бы вам не просто использовать:

$('form').serialize(); 

просто получить все данные формы, но проблема заключается в том, что JSON должен быть в следующем формате

{ 
    "firstName": "string", 
    "lastName": "string", 
    "email": "string", 
    "responses": [ 
    { 
     "questionKey": 0, //this needs to be the ID of the input 
     "responseText": "string", //this needs to the value of the input 
    } //with this part of the JSON repeating for each question 
    ] 
} 

Все эти дополнительные поля имеют один и тот же класс ввода, поэтому я могу легко работать с ними в jQuery. Я действительно застрял, и я был бы очень признателен за вашу помощь. Спасибо :)

UPDATE - Ниже приведен пример поля формы:

<input name="firstName" id="firstName" type="text" class="known-questions"> 
<input name="lastName" id="lastName" type="text" class="known-questions"> 
<input name="email" id="email" type="email" class="known-questions"> 
<input name="45435345345" id="45435345345" type="text" class="unknown-questions"> 
<input name="43443539864" id="43443539864" type="text" class="unknown-questions"> 
<input name="43344243529" id="43344243529" type="text" class="unknown-questions"> //there could be any number of these 'unknown-questions' class inputs 

Answer 1

Полная форма сериализовать до требуемой структуры:

var data ={}; 
$('.known-questions').each(function(){ 
    data[this.name] = this.value; 
}); 

data.responses = $('.unknown-questions').map(function(){ 
    return {questionKey: this.id, responseText:this.value}; 
}).get(); 

var postJson = JSON.stringify(data); 

DEMO

Answer 2

Вы сказали, что каждый входной элемент с ответом на ваш responses массив будет делить класс. Попробуйте each петли, предполагая unknown-questions как это имя класса:

var responsesArray = []; 

$(".unknown-questions") 
    .each(function(idx, obj) 
    { 
     responsesArray.push(
      { 
       "questionKey" : obj.id, 
       "responseText" : $(obj).val() 
      }); 
    }); 

Вы также сказали, что вы хотите отправить данные формы с использованием JQuery. Неясно, если вы хотите получить или POST, или если вы будете использовать функции JQuery AJAX, но я тестировал выше, с использованием jquery.get вызова, как показано ниже:

$.get("https://httpbin.org/get", 
    { 
     "firstName" : firstName, 
     "lastName" : lastName, 
     "email" : email, 
     "responses" : responsesArray 
    }); 

Но я не уверен, что это то, что вы хотите. Если вы хотите JSON строки, которая будет захватывать объект, который можно отправить в качестве одного параметра, то это:

var jsonString = 
    JSON.stringify(
    { 
     "firstName" : firstName, 
     "lastName" : lastName, 
     "email" : email, 
     "responses" : responsesArray 
    }); 

производит следующую структуру JSON (я вставил новые строки и состряпал пример полой формы и значение) :

"{ 
    "firstName":"John", 
    "lastName":"Smith", 
    "email":"j.s@example.com", 
    "responses": 
     [ 
      {"questionKey":"response1", "responseText":"asdasd213"}, 
      {"questionKey":"response2", "responseText":"q34234234a"}, 
      {"questionKey":"response3", "responseText":"aaaa"}, 
      {"questionKey":"response4", "responseText":"bbbb"}, 
      {"questionKey":"response5", "responseText":"lkjlkj"} 
     ] 
}"