javascript - 如何通过jquery给jsp页面中的label设置值

Question

这是我的标签。

<label class="control-label " for="no1" id="lbl_count">0</label>
     <button type="submit" class="btn btn-primary" id="submit_btn">Add to cart</button>

这是我尝试将 jsp 页面中的原始数据量设置为标签的函数。但它不起作用。标签和按钮不在同一个 div 中。但两者的形式相同。

   <script>
        $('document').ready(function() {
            $('#submit_btn').click(function() {

                var x = document.getElementById("mytable").rows.length;
                alert(x);
                //    $("label[for='no1']").text(x);
               //     $("#lbl_count").text(x);
            });
        });
    </script>

我尝试了几种方法，但没有一个有效。警报正在工作。这意味着数据即将到来。那么如何解决这个问题。请帮我。谢谢。

Answer 1

在这种情况下，您看不到标签的更改，因为单击提交按钮后，页面刷新(显示原始状态)。尝试阻止元素的默认事件，这样您就可以看到标签上的更改。

<script>
    $('document').ready(function() {
        $('#submit_btn').click(function(e) {
            e.preventDefault(); //<-add ^this
            var x = document.getElementById("mytable").rows.length;  // use this or try with static value like var x = "23";
            $("#lbl_count").text(x);
        });
    });
</script>

但是，表单不会提交。正如您之前提到的，有记录要保存，然后使用 ajax post 代替。

AJAX 示例

HTML

<form action="">
  <label for="no1" id="lbl_count">0</label>
  <input type="text" name="var1" id="var1"/>
  <button type="submit" id="submit_btn">Add to cart</button>
</form>

JS

  $('document').ready(function() {
        $('#submit_btn').click(function(e) {
            e.preventDefault();               
            $.ajax({
                type : 'post',
                data : 'var1='+$('#var1').val(),
                url : 'your_jsp_process_page.jsp',
                success : function(data){
                    var x = 'hello';
                    $("#lbl_count").text(x);
                }
            });

        });
    });

your_jsp_process_page.jsp 在这个页面中，需要检索ajax发送的值。在此示例中，使用名称 var1 检索它。在这里您可以看到数据键和值配对 data : 'var1='+$('#var1').val(),。