[英]javascript/jquery onChange function for div.text to update form hidden field value
我的经典ASP购物车页面使用div作为表单中的数量选择器:
<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"> </div>
<div class="entry number">1</div>
<div class="entry number-plus"> </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);
});
提交表单时,最简单的方法是在上面的类“ number”中发布div的内容。 我是否使用:
<input type="hidden" id="Num" name="Num" value="" />
或另一种方式。 无论哪种方式,由于我无法获取变量“ newVal”来填充隐藏字段,该如何轻松完成。
谢谢
该演示有2个注意事项。
(eg onchange='...)
<input>
s .number-minus
和number-plus
<output>
.number
显示.number-minus
和.number-plus
.number-minus
和.number-plus
的总和存储在名为.secret
的<input [hidden]>
。 此值是使用jQuery(过大的IMO)从<output>
值派生的。 ` $(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> <!--http://stackoverflow.com/questions/33312004/javascript-jquery-onchange-function-for-div-text-to-update-form-hidden-field-val--> <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>
使用纯JS:document.getElementById(“ Num”)。value = <变量名>
使用jQuery(不是100%确定)$(“ Num”)。value(<变量名>)
所以我自己解决了这个问题。
我添加了以下行:
$("#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);
});
我敢肯定我已经尝试过了,但是在想到之后我可能一开始就省略了$。 最后总是简单
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.