div.text的javascript / jquery onChange函数更新表单隐藏字段值
[英]javascript/jquery onChange function for div.text to update form hidden field value
问题描述
My Classic ASP cart page uses divs for a quantity selector within a form: 
我的经典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>
when - or + is clicked the 1 will update as expected. 单击-或+时，1将按预期更新。 the code to do this is this: 为此的代码是这样的：
$('.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);
});
What is the easiest way to post the content of the div with class "number" above when a form is submitted. 提交表单时，最简单的方法是在上面的类“ number”中发布div的内容。 Do i use: 我是否使用：
<input type="hidden" id="Num" name="Num" value="" />
Or another way. 或另一种方式。 Either way, how can this be done easily as I cannot get the variable "newVal" to populate the hidden field. 无论哪种方式，由于我无法获取变量“ newVal”来填充隐藏字段，该如何轻松完成。
Thanks 谢谢
3 个解决方案
解决方案1
1 2015-10-24 05:33:44
This demo has 2 features of note. 该演示有2个注意事项。
- The following are done with HTML and inline JS
(eg onchange='...)以下是使用HTML和内联JS (eg onchange='...)-
<input>s.number-minusandnumber-plus<input>s.number-minus和number-plus -
<output>.numberdisplays the sum of.number-minusand.number-plus<output>.number显示.number-minus和.number-plus
-
- As requested, the sum of
.number-minusand.number-plusis stored in a<input [hidden]>named.secret.根据要求， .number-minus和.number-plus的总和存储在名为.secret的<input [hidden]>。 This value was derived from<output>value by using jQuery (overkill IMO).此值是使用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>
解决方案2
0 2015-10-23 22:05:05
With pure JS: document.getElementById("Num").value = < variable name > 使用纯JS：document.getElementById（“ Num”）。value = <变量名>
With jQuery(not 100% sure) $("Num").value(< variable name>) 使用jQuery（不是100％确定）$（“ Num”）。value（<变量名>）
解决方案3
0 已采纳 2015-10-27 20:16:02
So I solved the problem myself. 所以我自己解决了这个问题。
I added the following line: 我添加了以下行：
$("#Num").val(newVal);
To both the jquery functions for the + and - divs as follows: 对于+和-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);
}); }）;
I am sure I had tried this but after thought I may have omitted the $ at the beginning. 我敢肯定我已经尝试过了，但是在想到之后我可能一开始就省略了$。 Always something simple in the end 最后总是简单
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.