如何從文本框 jquery 和 ajax 中獲取值？

Question

我試圖從文本框中獲取一個值並將其發布在表格上，但是當我嘗試在 console.log 中記錄成功：函數（數據）中的“數據”時，它顯示空數據。 但是，如果我在 $.ajax 之外對其進行控制台，它會顯示正確的值。

這是我的 jquery 函數

function SaveData() {

            var data = $("#inputToDo").val();
            $.ajax({
                type: "POST",
                dataType: "json",
                success: function (data) {
                    var row = "";
                    $.each(data, function (index, value) {
                        console.log(data);
                        row += "<tr><td>" + data + "</td></tr>";
                        $("#bod").html(row);  
                    });
                }
            });
            console.log(data);
            data = $("#inputToDo").val("");
            $("#inputToDo").focus();

    }

我的 HTML ：

<input id="inputToDo" name="inputToDo" />
<button id="buttonSave" name="buttonSave" onclick="SaveData()">
    Save
</button>

<table id="tableToDo" border="1">
    <tr>
        <td id ="ToDo"></td>
        <td id ="Execution"></td>
    </tr>
    <tbody id="bod"></tbody>
</table>

任何幫助，將不勝感激。 謝謝你

Answer 1

我已經為你制作了一個工作小提琴。

我基本上對 JavaScript 做了一些改動，我假設你已經包含了 jquery ......

$('document').ready(function(){
    SaveData = function(){
        var data = $("#inputToDo").val();
        alert(data);
    }
}

這是小提琴

Answer 2

var data = $("#inputToDo").val();       // outer variable

success: function (data)                //inner variable
{            

            //please note here you are access data variable of success function.
            // which is passed as parameter so outer data variable will always 
            //get override by inner variable
}

解決方案：嘗試更改外部變量的名稱，然后嘗試

Answer 3

您將數據用作變量（ var data = $ ( "#inputToDo" ). val (); ），也用作參數（ success : function ( data ) { ）。

當你在success-mentod內部嘗試時，數據將引用ajax成功響應，在外面它將引用數據變量，即你的“#inputToDo”值

而不是使用變量數據，你可以像下面的代碼一樣作為 inputToDoVal

var inputToDoVal = $ ( "#inputToDo" ). val ();

Answer 4

*  <div class="row">
                <div class="form-group">
                    <div class="col-lg-4 col-md-4 col-sm-4">
                        <label>
                            To Account Number:
                           <input type="text" id="txtcaccno" runat="server" ClientIdMode="static" class="form-control" autocomplete="off" />
                        </label>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4">
                        <input type="button" class="btn btn-success" class="form-control" onclick="search();" value="View" />
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4">
                        <label>
                            Account Name: 
                            <input type="text" id="txtcaccname" runat="server" ClientIdMode="static" class="form-control" autocomplete="off" />
                        </label>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4">
                        <label>
                            Account Phone: 
                            <input type="text" id="txtcaccphone" runat="server" ClientIdMode="static" class="form-control" autocomplete="off" />
                        </label>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4">
                        <label>
                            Account Email: 
                            <input type="text" id="txtcaccemail" runat="server" ClientIdMode="static" class="form-control" autocomplete="off" />
                        </label>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4">
                        <label>
                            Account Type: 
                           <input type="text" id="txtcacctype" runat="server" ClientIdMode="static" class="form-control" autocomplete="off" />
                        </label>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4">
                        <label>
                            Balace Amount: 
                            <input type="text" id="txtcamou" runat="server" ClientIdMode="static" class="form-control" autocomplete="off" />
                        </label>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4">
                        <label>
                            Current Balace Amount: 
                            <input type="text" id="txtcurrcamou" runat="server" ClientIdMode="static" class="form-control" autocomplete="off" />
                        </label>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4">
                        <input type="button" class="btn btn-success" class="form-control" onclick="appro();" value="Approved" />
                    </div>
                </div>
            </div>*

Answer 5

替換下面的代碼

$("#bod").html(row); 

到

$("#bod").append(row); 

它工作。 Append 用於將 jquery 中的數據添加到 html 中。 如果您有解決方案，請標記正確答案。