0

Basically I have the following

$("#amount").keyup(function() {
    if($(this).val() != "") {
        alert($(this).closest("form").find('input[id="price"]').val());
    }
});

The HTML layout is as follows 

<form class="submitOrder" method="POST">
    <fieldset>
        <div class="form-group">
            <label>Amount</label>
            <input type="text" class="form-control" id="amount">
        </div>
        <div class="form-group">
             <label>Price</label>
             <input type="text" class="form-control" id="price" value="$1" disabled="">
        </div>
    </fieldset>
</form>

According to this statement, $(this).val() always returns an empty value meaning the alert won't be processed, why is this?

My exact HTML mockup within a JSFiddle : http://jsfiddle.net/7PPBq/3/

4

4 回答 4

1

我看到两个问题：

  1. 对于“价格”和“金额”，您可以多次使用相同的 ID。ID 必须是唯一的。除了 id 之外，您可能还想给输入一个 name 属性，因为 name 将是在帖子中识别输入的方式。
  2. html 无效。表单中的 div 没有在它们应该结束的地方结束。

有关工作示例，请参阅此提琴手。 

 <div class="row row-offcanvas row-offcanvas-right">
    <div class="col-xs-12 col-sm-7">
        <div class="row">
                <div class="col-7">
                    <ul class="nav nav-tabs" id="myTab">
                <li class="active"><a href="#facebook" data-toggle="tab">Facebook</a></li>
                <li><a href="#twitter" data-toggle="tab">Twitter</a></li>
                <li><a href="#youtube" data-toggle="tab">YouTube</a></li>
                <li><a href="#instagram" data-toggle="tab">Instagram</a></li>
            </ul>

            <div class="tab-content">
                <div id="ajaxResponse"></div>
                <div class="tab-pane active" id="facebook">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title">Create Order</h3>
                        </div>
                        <div class="panel-body">
                            <form class="submitOrder" method="POST">
                                <fieldset>
                                        <label for="fname">Amount</label>
                                        <input type="text" class="form-control" id="amount">

                                        <label for="fname">Price</label>
                                        <input type="text" class="form-control" id="price" value="$1" disabled>
                                </fieldset>
                            </form>
                        </div>
                    </div>
            </div>
            </div>
        </div><!--/span-->
    </div><!--/row-->
</div>

于 2013-10-28T02:52:47.770 回答
1

不能有多个元素共享完全相同的 ID

全部更改id="amount"为class="amount".

全部更改id="price"为class="price".

将您的 JS 更改为：

$(".amount").keyup(function() {
    if($(this).val() != "") {
        alert($(this).closest("form").find(".price").val());
    }
});
于 2013-10-28T02:55:31.340 回答
0

尝试这样做：

$("#amount").keyup(function() {
    if($(this).val() != "") {
        alert($(this).parents('.tab-pane').find('input[id="price"]').val());
    }
});

在这里摆弄

于 2013-10-28T03:25:04.357 回答
0

我在这里没有看到任何问题。你导入了 jQuery 库吗？

<script type="text/javascript" src="/js/jquery191.js"></script>

http://jsfiddle.net/whyach/LDYxD/

于 2013-10-28T02:38:01.850 回答