How to Load Json form in html page & after user submission data display in same page in json raw form?

1

Make a html form by getting data from api. Below is json data for making form

{
  "errorCode": 0,
  "data": {
    "questionRound": "001",
    "question": [
      {
        "questionId": 1,
        "radio": true,
        "content": "What is your age？",
        "option": [
          {
            "A": "18-25"
          },
          {
            "B": "26-30"
          },
          {
            "C": "30 and above"
          }
        ]
      },
      {
        "questionId": 2,
        "radio": true,
        "content": "What language do you prefer to read on webpage for understanding the event?",
        "option": [
          {
            "A": "English"
          },
          {
            "B": "Hinglish"
          },
          {
            "C": "other.[Input answer] "
          }
        ]
      },
      {
        "questionId": 3,
        "radio": true,
        "content": "What type of event designs do you like?",
        "option": [
          {
            "A": "Cool/Trendy"
          },
          {
            "B": "Cute"
          },
          {
            "C": "Simple"
          },
          {
            "D": "other.[Input answer]"
          }
        ]
      },
      {
        "questionId": 4,
        "radio": true,
        "content": "Are the events easy to understand?",
        "option": [
          {
            "A": "Yes"
          },
          {
            "B": "No did not undertand the event"
          },
          {
            "C": "Little difficult but understood"
          }
        ]
      },
      {
        "questionId": 5,
        "radio": true,
        "content": "Which was your fav. event in APRIL ?",
        "option": [
          {
            "A": "http://kkimg.kktv9.com/activity/730/20200517125003_781.png"
          },
          {
            "B": "some_link"
          },
          {
            "C": "some_link"
          },
          {
            "D": "some_link"
          }
        ]
      }
  }
}


//After click on other input box should appear in modal box and takes user input.

hint: make ajax fuctions for above

After user fill above form data is submitted through  json object
Type: POST JSON OBJECT

submit json would be like this

{"name":"xx", "check":"yes", "select":"jquery", "message":"scdvsd", "email": "email","password":"kjkj"}


{
  "questionRound": "001",
  "questions": [
    {
      "questionId": "1",
      "userChoice": [
        {
          "option": "A",
          "optionValue": "18-25"
        }
      ]
    },{
      "questionId": "2",
      "userChoice": [
        {
          "option": "A",
          "optionValue": "English"
        }
      ]
    },{
      "questionId": "3",
      "userChoice": [
        {
          "option": "A",
          "optionValue": "Cool/Trendy"
        }
      ]
    },{
      "questionId": "4",
      "userChoice": [
        {
          "option": "A",
          "optionValue": "Yes"
        }
      ]
    },{
      "questionId": "5",
      "userChoice": [
        {
          "option": "A",
          "optionValue": "http://kkimg.kktv9.com/activity/730/20200517125003_781.png"
        }
      ]
    }
    }
  ]
}
2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

Please use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks are not single quotes.

markdown_Forums

3

We are not here to solve homework or challenges from other platforms.

You have to show us what you have tried so far so we can help you solve it on your own.

1 Like