如何使用 jQuery 添加输入值答案

【问题标题】：How to add input value using jQuery如何使用 jQuery 添加输入值
【发布时间】：2021-06-01 21:52:11
【问题描述】：

所以我有一个提交设备、颜色和问题（与设备）的表单，它使用 jQuery 在下面很好地显示了正确的价格，但我不知道如何将 jQuery 结果插入隐藏的输入值，所以它还将价格发送到下一页（结帐页面）谢谢:)

<form method="POST" action="../action.php">
 <select class="custom-select mr-sm-2" name="device" id="inlineFormCustomSelect">
    <option value="Motorola Edge">Moto Edge</option>
    <option value="Motorola Edge Plus">Moto Edge Plus</option>
  </select>

  <select class="custom-select mr-sm-2" name="color" id="inlineFormCustomSelect">
    <option selected>Select Color..</option>
    <option value="Solar Black">Solar Black</option>
    <option value="Midnight Magneta">Midnight Magneta</option>
  </select>

  <select class="custom-select mr-sm-2" name="issue" id="inlineFormCustomSelect3">
    <option data-price="£0.00" data-total="" selected>Select Problem..</option>
    <option data-price="£40.00" data-total="£42.00" value="Screen Repair">Damaged Screen</option>
    <option data-price="£15.00" data-total="£15.75" value="Battery Replacement">Battery Replacement</option>
    <option data-price="£35.00" data-total="£36.75" value="Audio Repair">Faulty Audio</option>
    <option data-price="£35.00" data-total="£36.75" value="Mic Repair">Faulty Microphone</option>
    <option data-price="£35.00" data-total="£36.75" value="Cam Repair">Faulty Camera</option>
  </select>

 <p><i id="price"></i>+Additional Fees</p>
  <p>Total:<span id="total"></span></p>


  <script type="text/javascript" language="javascript">
    $(function(){
      $('select').change(function(){
          var selected = $(this).find('option:selected');
        $('#price').html(selected.data('price'));
        $('#total').html(selected.data('total'));
      }).change();
    });


    *//This is some code I tried below//*

    $(document).ready(function(){
    $('input[id="price"];').val(price);
  });
  </script>

  <input type="hidden" id="price" name="price" value=''>

  <button type="submit" name="submit">

【问题讨论】：

您是在转换到整个其他页面，还是在更改 div 内的内容？
一方面，price 没有在您的 jQuery 中定义。此外，您正在尝试在页面加载时而不是在某些事件时分配值
另外，您有多个带有 id='price' 的元素，这不是有效的 HTML。 ID 必须是唯一的
而且，仅供参考，hidden form field can be modified by the user 所以如果您想确保用户没有给自己打折，请不要依赖它。
嗨，是的，所以它支持将 jquery 总价输入到隐藏的输入值字段中

标签： javascript jquery input

【解决方案1】：

如果您尝试在完全不同的页面中使用相同的值。你应该知道 JS 变量不会自动保存，刷新页面或加载另一个页面后你会丢失它们。

为了在浏览器中保存变量，可以使用 localStorage 或 localSession。在这种特殊情况下，我建议使用 localSession。 localSession 将在浏览器关闭或缓存被清除时删除数据。

此外，您可以删除分号 ';'来自$('input[id="price"];').val(price)

我不建议将 localStorage 或 localSession 用于重要的表单，这需要后端。您可以使用 PHP、Node、Django 或任何后端来管理表单。但是您尝试的最终是正确的，只是没有设置变量来从中检索数据。因此，为什么输入可以留空。

【讨论】：

根据我对问题的理解，OP 希望将 price 的值保存在隐藏字段中，以便将值与表单一起发布，然后可以在另一个页面上使用。从代码段中可以看出，“price”存在于 HTML 中，但是以一种不会随表单提交的方式。
是的，这是正确的，我已经有用户会话/帐户在后台工作，事实上你必须登录才能真正访问结帐页面
感谢您的快速回复，所以如果它“最终正确”，我将如何设置要从中检索的变量？谢谢

【解决方案2】：

您可以这样做的一种方法是在更新文本字段时更新隐藏字段。

$(function(){
  $('select').change(function(){
      var selected = $(this).find('option:selected');
    $('#price').html(selected.data('price'));
    $('#total').html(selected.data('total'));
    $('#hiddenPrice').val(selected.data('price'));
  }).change();
});

HTML：

<input type="hidden" id="hiddenPrice" name="hiddenPrice" value="">

注意事项：在您的问题中，隐藏的输入与文本字段具有相同的 ID。那不是有效的 HTML。所以给你的隐藏输入一个不同的Id（比如id='hiddenPrice'）。另外，请注意隐藏字段仍然可以由用户修改。您应该验证服务器端代码中发布的价格，以验证它是正确的价格。

【讨论】：

谢谢，我会试试这个，是的，这一切都很好，因为我记得大部分价格，而且我有一个管理页面可以接收所有订单，所以我可以检查它们:)
啊，非常感谢您的帮助，它运行良好！非常感谢:)

【解决方案3】：

试试这些

$('select[name="issue"]').on('change', function() {
  var issue = parseFloat($(this).children("option:selected").data('price'));

  $('input[name="price"]').val(issue);
  // or this one below
  $('input[name="price"]').val(issue).trigger('change');
});

另外，尝试更改隐藏输入字段的 id 并从数据价格中删除或提取此“£”。

【讨论】：