javascript - 如何保存和恢复表单字段内的多个值(仅使用前端逻辑)

Question

我正在寻找一种方法来保存多个 <input> 中的表值形成字段，并能够恢复它们。为什么 - 我需要一种在英制和公制系统之间切换的方法，而不会在转换过程中损失精度。

所以我下面有一些代码，假设值是用英语单位系统输入的。如果用户随后切换到公制，the values are converted对于用户来说。现在切换回英语没有任何作用，因为虽然我可以进行反向转换，但这样做最终会失去精度。我不知道如何解决保存和恢复多个值的问题，我想要表单做的是 restore originally entered values当用户切换到英语时。我想我首先需要有一种方法来保存原始输入的值。

尝试下面的代码时，首先将选择从英制更改为公制。您将看到所有值都更改为某个转换后的值。回到英语没有任何作用。 “保存”和“恢复”按钮现在也不起作用。此外，各个值之间没有区别，因为我不知道如何对它们进行编码。我不想为每个人分配唯一的 ID，除非必须这样做。 (因此，即现在输入您自己的值将被忽略，并且当您进行转换时，只有第一行第一个单元格才会影响其余单元格，因为我对单元格使用类选择器，而不是单独选择它们)

我需要什么帮助:

• 如何体现个人值(value)观？我必须为它们生成并分配一个唯一的 ID 吗？
• 如何保存这些值 - 我可以在输入时隐式保存，或通过“保存”按钮显式保存
• 如何恢复值 - 当更改回原始单位系统时，可以通过“恢复”按钮显式恢复这些值，也可以通过选择框隐式恢复这些值

编辑以提及 PHP:

“添加行”在这里只是以编程方式执行任何操作，但这意味着可以添加更多行。现在它是通过 PHP 完成的——向服务器后端发出表单帖子，并且页面刷新并添加一行。因此，如果需要的话，有一种方法可以使用 PHP 生成一些 HTML。例如，解决方案不必只是前端，但我认为 PHP 和前端耦合得越松散越好。因此，如果有一个仅前端(JS/jQuery)的解决方案，我会首先选择它，而不是混合 JS/PHP 方法，但我会接受两者。

$("#unit_system").change(function() {
   
       if ($('#unit_system').val() == "Metric")
       {
           $(".input_gpm").val(convert($(".input_gpm").val(),'gpm','m3h'));
       }
   });

   

   function convert(val, from, to)
   {
       var conv = [];
       conv["m3h"] = 1 / 3600;
       conv["gpm"] = 6.3090196485533854530026767050539e-5;
       return val * conv[from] / conv[to];
   };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my_form">
	<select id="unit_system">
		<option value="English">English</option>
		<option value="Metric">Metric</option>
	</select>

	<button id="save_values" type="button">Save Values</button>
	<button id="restore_values" type="button">Restore Values</button>
	<table id="values">
		<tr>
			<td>Row 1</td>
			<td><input class="input_gpm" type="text" value="4" /></td>
			<td><input class="input_gpm" type="text" value="4"  /></td>
		</tr>
		<tr>
			<td>Row 2</td>
			<td><input class="input_gpm" type="text" value="4" /></td>
			<td><input class="input_gpm" type="text" value="4" /></td>
		</tr>
		<tr>
			<td>Row 3</td>
			<td><input class="input_gpm" type="text" value="4" /></td>
			<td><input class="input_gpm" type="text" value="4" /></td>
		</tr>
		<tr>
			<td colspan="3"><button>Add Row...</button></td>
		</tr>
	</table>
</form>

Answer 1

您可以使用jQuery.data()存储和检索页面上每个输入的任意数据。我在下面创建了一个可运行的示例。看一下我为代码底部的“保存”和“恢复”按钮创建的处理程序。

编辑:我刚刚看到了“添加行”按钮的要求，我也为此添加了一个事件处理程序。

$("#unit_system").change(function() {
  if ($('#unit_system').val() == "Metric") {
    $(".input_gpm").val(convert($(".input_gpm").val(),'gpm','m3h'));
  }
});

function convert(val, from, to) {
  var conv = [];
  conv["m3h"] = 1 / 3600;
  conv["gpm"] = 6.3090196485533854530026767050539e-5;
  return val * conv[from] / conv[to];
};

$("#save_values").on("click", function() {
  $("input").each(function() {
    $(this).data("restore", $(this).val());
  });
});

$("#restore_values").on("click", function() {
  $("input").each(function() {
    $(this).val($(this).data("restore"));
  });
});

$("#addNew").on("click", function() {
  var lastDataRow = $("#values tr:nth-last-of-type(2)");
  var newDataRow = lastDataRow.clone();
  newDataRow.find("td:first").html("Row " + $("#values tr").length);
  lastDataRow.after(newDataRow);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my_form">
	<select id="unit_system">
		<option value="English">English</option>
		<option value="Metric">Metric</option>
	</select>

	<button id="save_values" type="button">Save Values</button>
	<button id="restore_values" type="button">Restore Values</button>
	<table id="values">
		<tr>
			<td>Row 1</td>
			<td><input class="input_gpm" type="text" value="4" /></td>
			<td><input class="input_gpm" type="text" value="4"  /></td>
		</tr>
		<tr>
			<td>Row 2</td>
			<td><input class="input_gpm" type="text" value="4" /></td>
			<td><input class="input_gpm" type="text" value="4" /></td>
		</tr>
		<tr>
			<td>Row 3</td>
			<td><input class="input_gpm" type="text" value="4" /></td>
			<td><input class="input_gpm" type="text" value="4" /></td>
		</tr>
		<tr>
			<td colspan="3"><button id="addNew">Add Row...</button></td>
		</tr>
	</table>
</form>