How to convert form form into json string in javascript

In modern web development, JavaScript has become an indispensable part. As a client-side scripting language, JavaScript can interact with HTML and CSS very conveniently to achieve dynamic user interaction and rich user experience.

Among them, forms are one of the most common and important interaction methods in web applications. Through forms, users can easily enter and submit data, and developers can easily obtain and process this data.

In JavaScript, how to convert HTML form data into JSON format data? This is a common requirement, and this article explains how to implement it.

1. Basics of HTML forms

In order to facilitate demonstration and explanation, let’s first look at a simple HTML form code:

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username"><br>
  
  <label for="password">密码：</label>
  <input type="password" id="password" name="password"><br>
  
  <label>性别：</label>
  <input type="radio" name="gender" value="male" id="male"><label for="male">男</label>
  <input type="radio" name="gender" value="female" id="female"><label for="female">女</label><br>
  
  <label>爱好：</label>
  <input type="checkbox" name="hobby" value="reading" id="reading"><label for="reading">阅读</label>
  <input type="checkbox" name="hobby" value="travel" id="travel"><label for="travel">旅游</label>
  <input type="checkbox" name="hobby" value="music" id="music"><label for="music">音乐</label><br>
  
  <label for="comment">评论：</label>
  <textarea id="comment" name="comment"></textarea><br>
  
  <input type="submit" value="提交">
</form>

This is an input box, a single Forms with select boxes, checkboxes, text fields, and submit buttons. We can enter text in the input box, select options in the radio boxes and check boxes, and finally click the submit button to submit the form data to the server.

Note that each form element has a name attribute and a value attribute. The name attribute is used to identify the name of this element, and the value attribute is used to save the value entered by the user.

2. Obtaining form data

In JavaScript, you can obtain the data entered by the user by accessing the value attribute of the form element. For example, to get the values ​​of username and password, you can do the following:

var username = document.getElementById("username").value; // 获取用户名
var password = document.getElementById("password").value; // 获取密码

Similarly, you can also get the values ​​of other form elements.

3. Convert form data into JSON format

In actual development, we usually need to convert form data into JSON format data for storage or transmission. Below we will introduce how to implement this function.

First, we need to bind a submit function to the form. In this function, we can follow the following steps to obtain the form data and convert it into JSON format:

document.getElementById("form").addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止表单的默认提交行为
  
  var form = document.getElementById("form");
  var data = new FormData(form);
  
  var json = {};
  data.forEach(function(value, key) {
    if (json[key] !== undefined) {
      if (!Array.isArray(json[key])) {
        json[key] = [json[key]];
      }
      json[key].push(value);
    } else {
      json[key] = value;
    }
  });
  
  console.log(json); // 输出JSON格式的数据
});

Here we use the FormData object to obtain the form data. This object provides some common methods to process form data, such as getting the values ​​of all form elements, getting the value of specified form elements, etc.

Then, we need to convert the FormData object into JSON format data. The specific implementation method is as follows:

1. Traverse the elements in the FormData object one by one to obtain the values ​​of their name and value attributes.
2. If the current name attribute has already appeared, it is considered to be an array. This is because some elements in the form may have the same name, for example multiple checkboxes may all have the name attribute "hobby".
3. Add the current value (value) to the corresponding array to save the values ​​of multiple check boxes.
4. Otherwise, directly add the current value (value) to the JSON object (json) as the attribute value.

Note that if there are multiple elements with the same name in the form, such as multiple check boxes, we need to save their values ​​​​in an array. Therefore, when traversing FormData objects, we need to determine whether their values ​​(value) are already arrays. If not, you need to convert them into arrays.

Finally, we can output the converted JSON format data through console.log. This data can be used for serialization, storage, or transmission.

4. Summary

In this article, we introduced how to convert form data into JSON format data in JavaScript. By using methods such as FormData objects and traversing form elements, we can easily implement this function, thereby achieving more flexible and efficient data processing. Whether in front-end development, back-end development or mobile application development, this technology is an important part and is worth mastering and using by developers.

The above is the detailed content of How to convert form form into json string in javascript. For more information, please follow other related articles on the PHP Chinese website!