Question

如何使用JS存储用户输入，以便以后可以恢复（即按下按钮）。

假设用户将文本输入到表单的输入字段中，如下所示：

<form>
    <select name="unit_system" id="unit_system">
        <option value="English">English</option>
        <option value="Metric">Metric</option>  
    </select>

    <input class="input_gpm" type="text" value="<?=$value?>" />

</form>

我希望能够恢复到原始输入的值，即使输入字段中的值以编程方式更改，也可能会在将值从一个单位测量系统转换为另一个测量系统时发生。

Answer 1

为什么不将用户输入存储在自己的变量中？使用jQuery：

var $userInput;
$(".input_gpm").on("change", function(){
    $userInput = $(".input_gpm").val();
});

然后，当用户在select字段中输入一个值时，它将存储在$ userInput变量中以供存储和将来使用。只有当用户手动将文本输入到输入字段时，它才会被重写。

Answer 2

这是我的尝试，可以使用一点点清理，我确定。与barrt关于存储原始值的答案背后的原理相同，但实现了选择选项

＆＃13;

var origVal = $('#input_gpm').val();

$('#unit_system').change(function() {
  
  var selected = $(this).find('option:selected');
  
  if ( selected.val() === 'Metric' ) {
    // maths here
    var newVal = '18.927 lpm';
    $('#input_gpm').val(newVal)
  }
  
  if ( selected.val() === 'English' ) {
   $('#input_gpm').val(origVal)
  }
  
  
  
  $('#output-origVal').html('origVal: ' + origVal)
  $('#output-newVal').html('newVal: ' + newVal)
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <select name="unit_system" id="unit_system">
    <option value="English">English</option>
    <option value="Metric">Metric</option>  
  </select>

  <input id="input_gpm" type="text" value="5 gpm" />

</form>
  
<hr>
  
<div id="output-origVal"></div>
<div id="output-newVal"></div>

＆＃13;

Answer 3

您可以在表单内部使用隐藏的输入字段，并在用户提交表单时将该隐藏字段的值更改为绝对值。如果您不使用隐藏字段并只更新输入值，那么用户在提交时可能会看到值已更改且用户可能会感到困惑......

HTML：

<form id="formId" action="">
    <input type="hidden" name="absolute_value" id="absolute_value"/>
    <select name="unit_system" id="unit_system">\
        <option value="English">English</option>
        <option value="Metric">Metric</option>  
    </select>

    <input class="input_gpm" type="text" value="<?=$value?>" />
    <button type='submit'>submit</button>
</form>

的Jquery / JS：

$('#formId').submit(function(){
    var value =  $(".input_gpm").val();
    var option = $("#unit_system").val();
    //conversion to absolute value
    $('#absolute_value').val(absoluteValue);
});

然后使用服务器端隐藏字段中的值。

Answer 4

这里有很好的答案，关于如何完全按照我的要求做...但我最终从我的代码中删除了这个逻辑并将其放入PHP中。因此，使我的视图（HTML，JS）不知道转换或保存和恢复值，以及我的后端逻辑更多转换和保存/恢复意识。

如何保持原始用户输入的值不变，同时仍然能够以编程方式在输入字段中更改它

4 个答案: