0

基本的に私は以下を持っています

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

HTMLレイアウトは次のとおりです。

<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>

このステートメントによると、 は$(this).val()常に空の値を返しますalert。これは、処理されないことを意味します。なぜですか?

JSFiddle 内の私の正確なHTMLモックアップ: http://jsfiddle.net/7PPBq/3/

4

4 に答える 4

1

2 つの問題があります。

  1. 「価格」と「金額」の両方に同じ ID が複数使用されています。ID は一意である必要があります。名前は投稿で入力を識別する方法になるため、id の代わりに、または ID に加えて、入力に 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 に答える