如何將HTML表單中的數據存儲在變量中？

Question

基本上有一個類似於Google的搜索欄，一旦用戶點擊了“提交”，我就需要將其存儲在變量中。 jQuery的功能遠遠不止於此，但僅是document.ready 。 我需要變量中的數據的原因是因為在那之后，我將使用$.post並將其發送到我的API。

("#form").submit( function(res) {
    var id = $(this).JSON.parse(data);

//Other attempted ways of getting input. 
    // $(this).data
    // $(this).data('button')
    // document.getElementById('id').value
    // $(this).getElementById('id').value
    // $(this).JSON.parse(data) -> "cannot parse undenfined, means no JSON data."


$.post('/search', {id: id }, function(data) { 
        data = JSON.parse(data);
        $("#count").text("we analyzed...");
        $("#result1".text(data));
        $("#totals").text("with a score of..");
        $("#result2").text(data);
    });
    res.redirect('/test/' + id);
});

<form id="form">
    <div class="featurette">
        <div class="featurette-inner text-center">
            <div class="search">
                <div class="input-group input-group-lg">
                    <span class="input-group-btn">
                        <button class="btn btn-danger" type="submit">Search</button>
                    </span>
                    <input type="text" name="id" input id="searchbar" class="form-control" placeholder="Enter your search term....">
                </div>
            </div>
        </div>
</form>

Answer 1

首先，請注意您的#form選擇器缺少$ 。

假設您要檢索用戶在#searchbar輸入字段中鍵入的值，則可以只使用$('#searchbar').val() ：

$("#form").submit( function(res) {
    var search = $('#searchbar').val();
    // use the 'search' variable as needed here...
    // $.post('url...', { searchTerm: search });
});

另請注意，您的HTML無效。 您缺少結束符</div>並且input元素上沒有input屬性。 嘗試這個：

<form id="form">
    <div class="featurette">
        <div class="featurette-inner text-center">
            <div class="search">
                <div class="input-group input-group-lg">
                    <span class="input-group-btn">
                        <button class="btn btn-danger" type="submit">Search</button>
                    </span>
                    <input type="text" name="id" id="searchbar" class="form-control" placeholder="Enter your search term...." />
                </div>
            </div>
        </div>
    </div>
</form>