 <html>
 <head>
 </head>
 <body>
     <label>First Name:<label>
     <input id="firstname" type="text">
     <br>
     <label>Last Name:<label>
     <input id="lastname" type="text">
     <br>
     <button id="jsonbtn" >Click to convert input to JSON</button>
     <p id="jsontext"></p>
 </body>
</html>

var firstname = document.getElementById("firstname")
var lastname = document.getElementById("lastname")
var jsonBtn = document.getElementById("jsonbtn")
var jsonText = document.getElementById("jsontext")



jsonBtn.addEventListener("click", function(){
    var data = {
        "firstName":firstname.value,
        "lastName":lastname.value
    }
    jsonText.innerHTML = JSON.stringify(data)
})

codemirror

//get references for text input and button fields
var firstname = document.getElementById("firstname")
var lastname = document.getElementById("lastname")
var jsonBtn = document.getElementById("jsonbtn")
var jsonText = document.getElementById("jsontext")


//add click event listener, to get data when data is entered
jsonBtn.addEventListener("click", function(){
    //store data in JavaScript object
    var data = {
        "firstName":firstname.value,
        "lastName":lastname.value
    }
    //convert JavaScript object to JSON
    jsonText.innerHTML = JSON.stringify(data)
})

How to save user input to JSON object in HTML

Store user input from HTML in a JavaScript object and convert it to JSON using JSON.stringify().

How to save user input to JSON object in HTML

Overview

Example

Code example

Explanation