Convert javascript form to object

Convert JavaScript form to object

In Web development, the form is a very common component. When we need to get input data from a form, we usually process the data in the form of an object. Converting the form into a JavaScript object makes it easy to manipulate data. In this article, we'll cover how to convert a form into an object using JavaScript.

In HTML, forms are usually created using the form element. We use JavaScript to get the form elements, then iterate through all the controls of the form, get their values, and store them in the object. Here is an example:

HTML Form

First, we need to create a form in HTML, as shown below:

<form>
  <input type="text" name="firstName" value="John">
  <input type="text" name="lastName" value="Doe">
  <input type="email" name="email" value="john.doe@example.com">
  <input type="submit" value="Submit">
</form>

The above form contains 3 input controls and a submit button. Each control has a name and a value.

JavaScript Code

Next, we will write JavaScript code to convert the form into an object. We will use the FormData object to get the value of the form control. The FormData object is a new API that allows us to get form data in a simple way, and it can handle forms containing files.

In this example we are not including a file upload so we can use a simple loop to get all the values ​​in the form. We can get the name of each control through the name attribute, and get the value of each control through the value attribute. We also need to check the type of each control to make sure we are handling each value correctly.

The following is our JavaScript code:

// 获取表单元素
var form = document.querySelector('form');

// 创建一个空对象来存储表单数据
var formData = {};

// 循环所有控件
for (var i = 0; i < form.elements.length; i++) {
  var element = form.elements[i];
  var name = element.name;
  var value = element.value;

  // 确保控件被支持，并且不包含文件
  if (name && value && (element.type !== 'file')) {
    if (element.type === 'number') {
      // 将数字转换成数值类型
      value = parseFloat(value);
    }
    formData[name] = value;
  }
}

// 输出表单数据对象
console.log(formData);

In the above code, we first get the form element and then create an empty object formData to store the form data. We use a loop to loop through all the form controls, get their names and values, and store them in a formData object.

Please note that we also check the type of each control. If the control is of numeric type, we convert it to numeric type and store it in the object.

Finally, we output the form data object to the console.

Test code

The following is our test code to verify whether the form object is correct:

// 测试代码
var form = document.querySelector('form');
form.elements['firstName'].value = 'Jane';
form.elements['lastName'].value = 'Doe';
form.elements['email'].value = 'jane.doe@example.com';

var formData = {};

for (var i = 0; i < form.elements.length; i++) {
  var element = form.elements[i];
  var name = element.name;
  var value = element.value;
  if (name && value && (element.type !== 'file')) {
    if (element.type === 'number') {
      value = parseFloat(value);
    }
    formData[name] = value;
  }
}

console.log(formData);

Run the above test code, the output is as follows:

{
  firstName: "Jane",
  lastName: "Doe",
  email: "jane.doe@example.com"
}

Now that we have converted the form into a JavaScript object, we can easily manipulate the data, such as sending it in an AJAX request.

The above is the detailed content of Convert javascript form to object. For more information, please follow other related articles on the PHP Chinese website!