如何在表单域中保存和恢复多个值（仅使用前端逻辑）

Posted 2023-05-07

【中文标题】如何在表单域中保存和恢复多个值（仅使用前端逻辑）

【英文标题】：How to save and restore multiple values inside a form field (using front-end logic only)

【发布时间】：2014-11-11 19:39:05

【问题描述】：

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

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

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

我需要什么帮助：

如何处理个人价值观？我必须为他们生成并分配一个唯一的 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>

【参考方案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>

【参考方案2】：

不是针对所有问题的完整解决方案，而只是一种方法，您可以注意在相应的数据属性中存储和恢复当前的度量或英文值。调整后Fiddle：

$("#unit_system").change(function () 

  if ($('#unit_system').val() == "Metric") 
    $(".input_gpm").each(function () 
        $(this).data("english", 
               $(this).val()).val(convert($(this).val(), 'gpm', 'm3h'))
    );
   else
  
    $(".input_gpm").each(function () 
        $(this).data("metric", 
        $(this).val()).val($(this).data("english"));
    );
  
);