Я спрашиваю, когда я сбрасываю Jquery форму

Question

Jquery form.reset при нажатии кнопки сброса, только для чтения часть инициализируется и значение значения исчезает. При загрузке данных устанавливаются значения имени и памятки, а значения памятки остаются неизменными даже при возникновении события кнопки сброса. Как сохранить данные, когда происходит событие сброса?

// reset button event
$("#reset").on("click", function(){
   var form = document.getElementById("SettingForm");
   form.reset();
});

// ajax data load
success : function(data) {

    $("#name").val(data.name);

    $("#memo").text(data.memo);

}				

<form id="SettingForm" action="" method="POST">
<table cellpadding="0" cellspacing="0" class="panelW">
<tr>
     <th class="w35p">name</th>
     <td><input id="name" name="name" type="text" value="" readonly/></td>
 </tr>
 <tr>
     <th class="w35p"><c th:text="#{configure.memo}">memo</c></th>
     <td><textarea id="memo" name="memo" value=""  readonly></textarea> 
     </td>
 </tr>
  </table>
</form>

Answer 1

В этом случае важно различать guish между атрибутами и свойствами.

Свойство value является текущим значением ввода, которое будет быть представленным в форме.

Значение атрибут является исходным значением ввода по умолчанию. Он копируется в свойство при первоначальной визуализации и снова при использовании form.reset().

Поэтому, если вы хотите обновить значение по умолчанию, вам нужно присвоить атрибут; .val() просто присваивает свойство.

Аналогично, для textarea текст используется по умолчанию при сбросе формы.

success : function(data) {
    $("#name").val(data.name).attr(data.name);
    $("#memo").val(data.memo).text(data.memo);
}               

const data = {
  name: "Default name",
  memo: "Default memo"
};

$("#name").val(data.name).attr("value", data.name);
$("#memo").val(data.memo).text(data.memo);

$("#reset").on("click", function(){
   var form = document.getElementById("SettingForm");
   form.reset();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="SettingForm" action="" method="POST">
  <table cellpadding="0" cellspacing="0" class="panelW">
    <tr>
      <th class="w35p">name</th>
      <td><input id="name" name="name" type="text" value=""/></td>
    </tr>
    <tr>
      <th class="w35p">
        <c th:text="#{configure.memo}">memo</c>
      </th>
      <td><textarea id="memo" name="memo" value=""></textarea>
      </td>
    </tr>
  </table>
</form>
<button id="reset">Reset</button>