jQuery如何從表單獲取輸入？

Question

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

不在控制檯中打印名稱，我在這裏做錯了什麼？

Answer 1

現在的問題是，你寫的代碼被執行的頁面加載時立即。

從你的代碼看起來，它看起來像你實際上希望窗體的按鈕來執行控制檯日誌。

我已經改變了你的代碼了一下，但在這裏，您會使用：

• 選擇表和輸入
• 聲明變量出範圍
• 綁定到表單提交事件
• 防止其實際提交
• 和記錄每您的例子安慰

下面

改變的代碼：

<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，並可能會想用選擇器的ID替換表單上的NAME。也建議使用ID選擇器來獲取輸入，因爲ID選擇器比選擇器快。 （感謝gnarf爲評論！）

的變量範圍也可能在你的例子有些奇怪，但上面的代碼應該是很好的學習:)

Answer 2

編輯：您必須在輸入字段中輸入內容後運行jQuery選擇。當你運行它，現在，它是空的

編輯：嘗試「上」使用這個從jQuery文檔 http://api.jquery.com/on/

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

Answer 3

爲你寫它的方法只運行一次，頁面後負載。此時輸入元素不包含值（即$（「＃first_name」）。text（）==''）。您可以將日誌語句綁定到元素的關鍵事件，以查看正在輸入的文本。

$(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()); 
    }); 
    }) 

Demo on plnkr

Answer 4

這裏是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()); 
}); 

'Something'是默認值。'在文本框中嘗試其他詞語，您將在控制檯中看到新的值。

Answer 5

根據你的代碼，你會得到正確的結果。

您定義的函數從未被調用，因爲您沒有附加任何事件。

我已經修改你的代碼，你可以檢查它的工作here

$(document).ready(function(){ 
    $("#first_name").focusout(function(){ 
    var first_name = $(this).val(); 
    alert(first_name); 
    }); 
}); 

Answer 6

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