別のタブビューから入力テキスト値を取得する方法

-1

4つのタブがあり、この入力テキストは2番目のタブビューにあります。私は2つのボタンを持っています（前後）。私は最後のタブにいるとき、次のボタンを押したときにこの入力テキストから値を取得したいのですが、常にnull値または未定義値を返します。解決方法はわかりません。私はこのようなhtmlコードのテキストボックスを持っています：別のタブビューから入力テキスト値を取得する方法

<div class="container-fluid add-report-field" style="background-color:white"> 
     <div class="tabbable js-report-tab-container" > 
       <div class="tab-content"> 

       <div class="tab-pane" id="tab1"> 
        <div class="form-group"> 
        <label>Report Title</label> 
        <input type="text" name="js-report-title-step-2" id="js-report-title-step-2" class="form-control js-report-title-step-2" placeholder="Report Title" value="Report Title"> 
       </div> 
      </div> 
     </div> 
</div>

私はただの値を取得しようとしています。私は自分にconsole.logでこれを試してみました：

console.log($("input[name=js-report-title-step-2]").val()); 
console.log($("#js-report-title-step-2").val()); 
console.log($("#js-report-title-step-2").text()); 
console.log($(".js-report-title-step-2").attr("value")); 
console.log($("input:text").val());

が、いずれも上記の方法の問題は、ここで何私

のために働く... ???

注：

出典

2016-08-28 Hyosoka Poipo

[任意のトラブルがあるように思えません]（https://jsfiddle.net/15woa4tn /）、あなたのコードはそのまま動作します。 http://stackoverflow.com/q/14028959/1169519 – Teemu

@J F console.log（$）を追加しました –

'.val（）'がないセレクタで何かが返されますか？ –

入力フィールドの値を取得するには、あなたがval()を使用する必要があります。ここではにconsole.log（$）です。あなたの場合、undefinedを取得するため、コードが$(document).ready(function(){})またはそれ以上であることを確認する必要があります。$(function(){})。

$(function(){ 
 
    alert($('input').val()); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="text" name="js-report-title-step-2" id="js-report-title-step-2" class="form-control js-report-title-step-2" placeholder="Report Title" value="Report Title">

出典

2016-08-28 16:57:31

Haay ...私は私の質問を更新しました。もう一度それを見直してください：:) –

undefined入力の.valueプロパティのみのDOMStringずundefinedできるようにコレクションが空であることを意味します。要素がDOMに追加される前に、おそらくDOMを照会しています。 .readyメソッドを使用するか、コードが実行されるときにその要素がDOM内に存在することを確認するには、ターゲット要素の後にscriptタグを置くことでこれを行うことができます。

出典

2016-08-28 16:57:38 undefined

私はwebpack bundleを使用しています...だから私は.readyを使わない。私はちょうど$（ "id"）を直接呼び出しています –

@HyosokaPoipo _or_パートがあります： "コードが実行されたときに要素がDOMに存在することを確認してください"。またwebpackはモジュールのバンドラであり、jQueryの '.ready'メソッドとは関係ありません。 – undefined

私はこの問題がタブ内にあると思う@Vohuman、それはnullだから値を欲しいと思ったら別のタブビューに移動した。それがなぜ定義されていないのか、値を取得する方法はありますか？ありがとう.. –

それを試してみてください。

$(document).ready(function(){ 

    $ele = $(".add-report-field").find("input[name=js-report-title-step-2]"); 

    console.log($ele.val()); 

})

決勝コード：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    
 
</head> 
 
<body> 
 
    <div class="container-fluid add-report-field" style="background-color:white"> 
 
     <div class="tabbable js-report-tab-container" > 
 
       <div class="tab-content"> 
 
       <div class="tab-pane" id="tab1"> 
 
        <div class="form-group"> 
 
        <label>Report Title</label> 
 
        <input type="text" name="js-report-title-step-2" id="js-report-title-step-2" class="form-control js-report-title-step-2" placeholder="Report Title" value="Report Title"> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script>   
 
    $(document).ready(function(){ 
 

 
     $ele = $(".add-report-field").find("input[name=js-report-title-step-2]"); 
 

 
     console.log($ele.val()); 
 

 

 
    }) 
 
    </script> 
 
</body> 
 
</html>

出典

2016-08-28 16:58:12 Ehsan

私はこれを試したが、それは私の上で動作しませんでした... –

copyすべての私の答えとあなたのエディタに貼り付けて、それを試してください。私の答えをマークするのに役立ちます！ – Ehsan

私の質問を更新しました。もう一度見てください:) この入力テキストはタブ内にあります... –

別のタブビューから入力テキスト値を取得する方法

答えて

関連する問題