JavaScript implements form backfilling

Form backfilling means that when submitting a form, if a field in the form fails validation and is returned, the user does not need to refill the entire form, but only needs to modify the field that failed validation and resubmit. This saves users time and improves user experience.

In front-end development, a common way is to implement form backfilling through JavaScript. Two common implementation methods will be introduced below.

The first way is to store the form data in the browser's local cache. When the form submission fails, each field in the form is automatically filled in by reading the data in the cache when the page is reloaded. The advantage of this method is that users do not need to refill data, avoid duplication of work, and can improve user satisfaction.

The code is as follows:

// 存储表单数据到本地缓存
function saveFormData() {
  var data = {
    name: document.getElementById('name').value,
    email: document.getElementById('email').value,
    phone: document.getElementById('phone').value
  };
  localStorage.setItem('formData', JSON.stringify(data));
}

// 读取本地缓存中的表单数据并回填到表单中
function fillFormData() {
  var data = JSON.parse(localStorage.getItem('formData'));
  if (data) {
    document.getElementById('name').value = data.name;
    document.getElementById('email').value = data.email;
    document.getElementById('phone').value = data.phone;
  }
}

// 在表单提交前保存表单数据到本地缓存中
document.getElementById('myForm').addEventListener('submit', function(e) {
  e.preventDefault();
  saveFormData();
  // 提交表单
});

// 在页面加载时读取本地缓存中的数据并回填到表单中
window.addEventListener('load', fillFormData);

The second way is to store the form data in the URL query parameters before submitting the form. After the form submission fails, when the page is reloaded, by reading The query parameters in the url automatically fill in various fields in the form. The advantage of this approach is that a specific state can be retained when the page is reloaded.

The code is as follows:

// 存储表单数据到URL查询参数中
function saveFormData() {
  var data = {
    name: document.getElementById('name').value,
    email: document.getElementById('email').value,
    phone: document.getElementById('phone').value
  };
  var params = new URLSearchParams(window.location.search);
  params.set('formData', JSON.stringify(data));
  history.replaceState(null, '', window.location.pathname + '?' + params);
}

// 读取URL查询参数中的表单数据并回填到表单中
function fillFormData() {
  var params = new URLSearchParams(window.location.search);
  var data = JSON.parse(params.get('formData'));
  if (data) {
    document.getElementById('name').value = data.name;
    document.getElementById('email').value = data.email;
    document.getElementById('phone').value = data.phone;
  }
}

// 在表单提交前保存表单数据到URL查询参数中
document.getElementById('myForm').addEventListener('submit', function(e) {
  e.preventDefault();
  saveFormData();
  // 提交表单
});

// 在页面加载时读取URL查询参数中的数据并回填到表单中
window.addEventListener('load', fillFormData);

The above are two common ways to implement form backfilling. The appropriate method to implement form backfilling should be selected based on the specific situation.

The above is the detailed content of JavaScript implements form backfilling. For more information, please follow other related articles on the PHP Chinese website!