1 
<script>
  $(function() {
    var first_name = $('#content').find('input[name="first_name"]').val();
    console.log(first_name);
  })
</script>

<div id="content">
    <form name="info">
    First Name: <input type="text" id="first_name" name="first_name"><input type="submit" id="button">
    </form>
</div>

コンソールに名前を出力しません。ここで何が間違っていますか?

4

6 に答える 6

3

現在の問題は、ページが読み込まれるとすぐに、作成したコードが実行されることです。

コードの外観から、実際にはフォームのボタンでコンソール ログを実行したいように見えます。

コードを少し変更しましたが、次のようにします。

  • フォームと入力を選択
  • 変数をスコープ外に宣言する
  • フォームの送信イベントにバインドする
  • 実際に送信しないようにする
  • 例ごとにコンソールにログを記録する

以下の変更されたコード:

<script>
$(function() {
            // Save a reference to the input
    var input = $("input[name=first_name]"),
            // Get the form itself
            form = $("form[name=info]"),
            // Storage for your first_name outside of the scope
            first_name = false;
    // Bind to the submit event on the form
    form.bind('submit', function() {
        // Set the first_name to the input's value
        first_name = input.val();
        // Log it out (per your example)
        console.log(first_name);
        // Return false to prevent the form from posting
        return false;
    });
});
</script>

<div id="content">
    <form name="info">
        First Name: 
        <input type="text" id="first_name" name="first_name">
        <input type="submit" id="button">
    </form>
</div>

フォームで何をしようとしても、これが最善の方法であると言っているわけではありません。現実的には、ボタンに ID は必要ありません。おそらく、フォームの NAME を ID に置き換えた方がよいでしょう。セレクター。また、ID セレクターはセレクターよりも高速であるため、ID セレクターを使用して入力を取得することもお勧めします[name=something]。( Gnarfさん、コメントありがとうございます！)

変数のスコープもおそらくあなたの例ではやや奇妙ですが、上記のコードは学習に適しているはずです:)

于 2013-05-18T03:11:21.387 に答える
1

あなたが書いたメソッドは、ページが読み込まれた後に一度だけ実行されます。その時点で、input 要素には値が含まれていません (つまり、$("#first_name").text() == '')。ロギング ステートメントを要素の keyup イベントにバインドして、入力されているテキストを表示できます。

$(function() {
    // this code only runs once
    var first_name = $('#content').find('input[name="first_name"]').val();
    console.log(first_name);

    $('#first_name').keyup(function() {
       // this code fires everytime a key is released on the element
       console.log($(this).val());
     });
  })

plnkrのデモ

于 2013-05-18T03:04:50.087 に答える
0

コードのJSFiddleは次のとおりです。

<div id="content">
    <form name="info">
    First Name: <input type="text" id="first_name" name="first_name" value="something">
        <input type="submit" id="button">
    </form>
</div>


$('#content form').on('submit', function () {
    console.log($('#content').find('input[name="first_name"]').val());
});

「何か」がデフォルト値です。テキスト ボックスで別の単語を入力すると、コンソールに新しい値が表示されます。

于 2013-05-18T03:12:45.433 に答える
0

コードに従って、正しい結果が得られます。

イベントをアタッチしていないため、定義した関数が呼び出されることはありません。

私はあなたのコードを修正しました。ここで動作することを確認できます

$(document).ready(function(){
    $("#first_name").focusout(function(){
    var first_name = $(this).val();
     alert(first_name);
  });
});
于 2013-05-18T03:16:35.147 に答える
-2

編集: 入力フィールドに何かを入力した後、jQuery の選択を実行する必要があります。今実行すると、空です

編集：jQueryドキュメントhttp://api.jquery.com/on/からこの「オン」を使用してみて ください

$('#content form').on('submit', function () {
    console.log($('#content').find('input[name="first_name"]').val(););
}
于 2013-05-18T02:53:48.927 に答える