Как правильно заполнить форму с помощью JS без потери данных?

var select, value, text; 
 
function change() { 
  select = document.getElementById("MySelect"); 
  value = select.options[select.selectedIndex].value; 
  console.log(value); 
  if (value == "Existing Business") { 
    document.getElementById("name").setAttribute('disabled', 'disabled'); 
    document.getElementById("name").value = "C1"; 
    document.getElementById("name").text = "C1"; 
    console.log(document.getElementById("name").text); 
  } else if (value == "New Business") { 
    document.getElementById("name").setAttribute('disabled', 'disabled'); 
    document.getElementById("name").value = "H1"; 
    document.getElementById("name").text = "Н1"; 
  } else { 
    document.getElementById("name").removeAttribute('disabled'); 
    document.getElementById("name").value = ""; 
  } 
} 
 
function send(e) { 
  e.preventDefault(); 
  var form = document.getElementById('mainForm').elements; 
  //---------------------------------------------------------------- 
  // Form serialization by NAME --> element must have a name attribute 
  var data = Object.values(form).reduce((obj, field) => { 
    // Will not send undefined or empty name attribute 
    if (!(typeof field.name === "undefined" || typeof field.value === "undefined" || field.name.length === 0)) 
      obj[field.name] = field.value; 
    return obj 
  }, {}); 
  //---------------------------------------------------------------- 
 
  //---------------------------------------------------------------- 
  // Send data to Server  
  const url = 'https://jsonplaceholder.typicode.com/posts'; // Replace this with your URL 
  //---------------------------------------------------------------- 
  // jQuery version 
  $.ajax({ 
      method: "POST", 
      url: url, 
      data: { 
        data: JSON.stringify(data) 
      } 
    }) 
    .done(function(msg) { 
      console.log("Data Saved: ", msg); 
    }); 
 
  //---------------------------------------------------------------- 
  // No jQuery ----------------------------------------------------- 
  //---------------------------------------------------------------- 
  /** 
    dbParam = JSON.stringify(data); 
    xmlhttp = new XMLHttpRequest(); 
    xmlhttp.onreadystatechange = function() { 
      if (this.readyState == 4 && this.status == 200) { 
        var txt = ''; 
        myObj = JSON.parse(this.responseText); 
        for (x in myObj) { 
          txt += myObj[x].id + "<br>"; 
        } 
         document.getElementById("demo").innerHTML = txt; 
      } 
    }; 
    xmlhttp.open("POST", url, true); 
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    xmlhttp.send("data=" + dbParam); 
    **/ 
  //---------------------------------------------------------------- 
 
  return false; 
}

<!-------- Libraries --------> 
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" /> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<!-------- Libraries --------> 
<form onsubmit="return send(event); " id="mainForm"> 
 
  <div class="form-group"> 
 
    <label for="sel1">Select list (select one):</label> 
    <select name="code" class="form-control" id="MySelect" onchange="change()"> 
      <option value="Other">Other</option> 
      <option value="Existing Business">Existing Business</option> 
      <option value="New Business">New Business</option> 
    </select> 
  </div> 
 
  <div class="form-group"> 
    <label for="name">Name:</label> 
    <input type="text" name="data" class="form-control" id="name" /> 
  </div> 
 
  <button class="btn btn-default">Submit</button> 
 
</form> 
<div id="demo"></div>