Build a JSON object using form data

Question

Build a JSON object using form data

Check out my form at this link: http://jsfiddle.net/sxGtM/4743/. Upon submitting the form, I need to generate a JSON object with the following structure:

data = {
        'voted_questions': [question.pk, question.pk, question.pk, question.pk],
        'answers': [
        {
        'question': question.pk,
        'option': option.pk,
        },
        {
        'question': question.pk,
        'option': option.pk,
        },
        ]
    }

The values of question.pk and option.pk are numerical identifiers for each question and option (essentially their IDs). Can anyone provide guidance on how to create this JSON format?

javascript json forms

Answer 1

Answer №1

It seems a bit redundant to ask for a list of answered questions when you already have a list of answers that includes the question IDs. Nevertheless, here is what you requested.

HTML

<h2>Form</h2>
<form action="" method="post">
Which country is known as the Land of the Rising Sun?<br/>
<input type="hidden" name="first" value="1"/>
Japan:<input type="radio" name="first" data-questionid="1" value="11"/><br/>
China:<input type="radio" name="first" data-questionid="1" value="12"/><br/>
Which city is known as The Big Apple?<br/>
<input type="hidden" name="second" value="2"/>
New York:<input type="radio" name="second" data-questionid="2" value="13"/><br/>
Los Angeles:<input type="radio" name="second" data-questionid="2" value="14"/><br/>
<p><input type="submit" /></p>
</form>
<h2>JSON</h2>
<pre id="result">
</pre>

Javascript

$(function() {
    $('form').submit(function() {
        var voted_questions = [];
        var answers = [];

        $('input[type="radio"]:checked').each(function(){
            voted_questions.push($(this).data('questionid'));
            answers.push({'question':$(this).data('questionid'), 'options':this.value});
        });

        var data = {
            'voted_questions': voted_questions,
            'answers': answers
        };

        $('#result').text(JSON.stringify(data));
        return false;
    });


});

jsfiddle

Answer 2

It seems a bit redundant to ask for a list of answered questions when you already have a list of answers that includes the question IDs. Nevertheless, here is what you requested.

HTML

<h2>Form</h2>
<form action="" method="post">
Which country is known as the Land of the Rising Sun?<br/>
<input type="hidden" name="first" value="1"/>
Japan:<input type="radio" name="first" data-questionid="1" value="11"/><br/>
China:<input type="radio" name="first" data-questionid="1" value="12"/><br/>
Which city is known as The Big Apple?<br/>
<input type="hidden" name="second" value="2"/>
New York:<input type="radio" name="second" data-questionid="2" value="13"/><br/>
Los Angeles:<input type="radio" name="second" data-questionid="2" value="14"/><br/>
<p><input type="submit" /></p>
</form>
<h2>JSON</h2>
<pre id="result">
</pre>

Javascript

$(function() {
    $('form').submit(function() {
        var voted_questions = [];
        var answers = [];

        $('input[type="radio"]:checked').each(function(){
            voted_questions.push($(this).data('questionid'));
            answers.push({'question':$(this).data('questionid'), 'options':this.value});
        });

        var data = {
            'voted_questions': voted_questions,
            'answers': answers
        };

        $('#result').text(JSON.stringify(data));
        return false;
    });


});

jsfiddle

Build a JSON object using form data

Answer №1

Similar questions

The messageReactionAdd event has suddenly stopped functioning without any explanation

Displaying XML data in an HTML table

How can I manipulate the JSON property, an array of objects, within a React component?

Clicking on a specific month results in displaying only one row from the database rather than showing all rows associated with that particular month

What is the best way to convert the key, value pairs from a JSON column in a dataframe into individual columns for keys and their corresponding values in Python?

Sending complete form details to a service using Angular

What are some strategies to enhance the efficiency of this code and reduce repetition?

Complex Notepad++ duplication, substitution, and addition operations

Placing jQuery scripts in Blogger platform: A guide

What is the purpose of incorporating the replace function in my regular expression for Palindromes?

Having trouble getting the reset select function to work

The servlet is successfully receiving a JSON post, but unfortunately, it is not being displayed

What is the process for swapping out a file input tag with a specific file already chosen?

Error: The value of "$tweetId" cannot be parsed as it is set to "undefined". Please ensure that string values are properly enclosed

Google Feed API - Retrieving saved data from RSS feed cache

My goal is to assign unique class names to each button in a list located inside a drawer, allowing them to be called individually when needed

Directive containing tracking code script

java printwriter not cooperating with javascript

Modifying button text with jQuery is not feasible

Refreshing the previous tab upon changing tabs in React Navigation TabNavigator