javascript/jquery div.text 的 onChange 函数更新表单隐藏字段值

Question

我的经典 ASP 购物车页面使用 divs 作为表单中的数量选择器：

<form action="/update-cart/" method="post">
     <div class="quantity-selector detail-info-entry">
           <div class="detail-info-entry-title">Quantity</div>
                       <div class="entry number-minus">&nbsp;</div>
                       <div class="entry number">1</div>
                       <div class="entry number-plus">&nbsp;</div>
          </div>
     </div>
</form>

单击 - 或 + 时，1 将按预期更新。执行此操作的代码是这样的：

$('.number-plus').on('click', function(){
    var divUpd = $(this).parent().find('.number'), newVal = parseInt(divUpd.text(), 10)+1;
    divUpd.text(newVal);
});

$('.number-minus').on('click', function(){
    var divUpd = $(this).parent().find('.number'), newVal = parseInt(divUpd.text(), 10)-1;
    if(newVal>=1) divUpd.text(newVal);
});

提交表单时，post div 和 class "number" 内容的最简单方法是什么。我使用：

<input type="hidden" id="Num" name="Num" value="" />

或者换一种方式。无论哪种方式，这怎么能轻松完成，因为我无法获取变量 "newVal" 来填充隐藏字段。

谢谢

Answer 1

使用纯 JS： document.getElementById("Num").value = <变量名>

与 jQuery（不是 100% 确定） $("Num").value(<变量名>)

Answer 2

此演示有 2 个值得注意的功能。

以下是用HTML和inline JS (e.g. onchange='...)完成的
- <input>s .number-minus 和 number-plus
- <output> .number 显示 .number-minus 和 .number-plus
根据要求，.number-minus 和 .number-plus 的总和存储在名为 .secret 的 <input [hidden]> 中。该值是通过使用 jQuery 从 <output> 值派生的（IMO 矫枉过正）。 `

$(function() {
  $('#pos, #neg').on('change', function(event) {
    var cnt = $('#counter').val();
    $('#secret').val(cnt);
    console.log('Secret: ' + secret.value);
  });
});

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>javascript/jquery onChange function for div.text to update form hidden field value</title>
  <meta name="description" content="SO33312004">
  <style>
    .detail-info-entry-title,
    #pos,
    #neg {
      font-variant: small-caps;
    }
    .entry {
      padding: 3px;
      margin: 0 5px;
      width: 48px;
      line-height: 1.6;
      border: 2px solid #00E;
      border-radius: 8px;
      display: table-cell;
    }
    #counter {
      font-weight: 900;
      margin: auto;
      display: table-cell;
      height: 24px;
    }
    #form33312004 {
      color: #0CF;
      background: hsla(180, 100%, 10%, 1);
      width: 33%;
      height: 30%;
      text-align: center;
      vertical-align: middle;
      display: table-row;
    }
    .field {
      width: 50px;
      display: table-cell;
    }
    footer {
      font-size: .75em;
      text-align: center;
    }
  </style>
</head>
<!--

<body>
  <form id="form33312004" submit="return false" oninput="counter.value = parseInt(pos.value, 10) - parseInt(neg.value, 10)">
    <fieldset class="quantity-selector detail-info-entry">
      <legend class="detail-info-entry-title">Quantity</legend>
      <div class="field">
        <input type="number" id="pos" min="0" max="999" step="any" value="0" class="entry number-plus">
        <label for="pos">Positive</label>
      </div>
      <output for='pos neg' id="counter" name="counter" class="entry number">0</output>
      <div class="field">
        <input type="number" id="neg" min="0" max="999" step="any" value="0" class="entry number-minus">
        <label for="neg">Negative</label>
      </div>
    </fieldset>
    <input id="secret" type="hidden">
  </form>
  <div class="field">
    <footer>Observe the hidden input's value thru
      <br/>the console. (<b>F12</b> then the <b>Console</b> tab).</footer>
    <script sr="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>

</body>

</html>

Answer 3

所以我自己解决了这个问题。

我添加了以下行：

$("#Num").val(newVal);

对于 + 和 - div 的 jquery 函数如下：

 $('.number-plus').on('click', function(){
var divUpd = $(this).parent().find('.number'), newVal = parseInt(divUpd.text(), 10)+1;
divUpd.text(newVal);
$("#Num").val(newVal);
});
 $('.number-minus').on('click', function(){
var divUpd = $(this).parent().find('.number'), newVal = parseInt(divUpd.text(), 10)-1;
if(newVal>=1) divUpd.text(newVal);
$("#Num").val(newVal);

});

我确定我已经尝试过了，但后来我想我可能省略了开头的 $。最后总是简单的东西

javascript/jquery div.text 的 onChange 函数更新表单隐藏字段值

javascript/jquery onChange function for div.text to update form hidden field value

javascript

forms

onchange