如何跟蹤實時輸入值以提交給服務器？

Question

我相對較新。

我設法使我的表變成動態的，當單擊時變成文本區域，而失去焦點時又回到靜態表單元格。

我要在這里做的就是每次失去焦點時就傳遞價值。 它與Ajax一樣，但是當失去控制時，單擊的單元格中的值總是消失。 它發生在任何單元格上。

這是我的代碼。

HTML

<body>
<div class="container">
<br>
<h2>English lines are under here</h2>
<h5>Click each row to modify</h5>
<br>
<table id="btable" class="bg-light table table-hover">
    <th class= "text-center">No</th>
    <th class= "text-center">Word</th>
    <th class= "text-center">Dialogue</th>
    <th class= "text-center">Practice</th>
    <c:forEach items="${list}" var="engboardVO">
    <tr>
        <td class="bid" data-name="bid">${engboardVO.bid}</td>
        <td class="word" data-name="word" data-editable>${engboardVO.word}</td>
        <td class="dialogue" data-name="dialogue" data-editable>${engboardVO.dialogue}</td>
        <td class="practice" data-name="practice" data-editable>${engboardVO.practice}</td>
    </tr>
    </c:forEach>
</table>

腳本

$("table").on("click", "[data-editable]", function(){
    var $el = $(this);
    var str = $el.text();
    console.log(str);
    var $input = $('<textarea rows=5 style="width:500px"/>').val( str );
    $el.html($input);
    $input.focus();
    var field_name = $el.attr('data-name');
    var save = function(bid, newWord, newDialogue, newPractice){
        var $td = $input.val();
        $.ajax({
            type : "POST",
            url : "/tight",
            data : JSON.stringify({
                bid : bid,
                word : newWord,
                dialogue : newDialogue,
                practice : newPractice
            }),
            dataType: "json",
            success : function(msg){
                if (msg["status"] == 'success'){
                    $input.replaceWith($td);
                } else {
                    alert("Fail");
                    $input.replaceWith($el);
                }
            },
            error : function(msg) {
                alert("ajax fail to get data from server");
            }
        });
    };
    $($input).blur(function(){
        var bid = $(this).closest('tr').find('td.bid').text();
        var newWord = $(this).closest('tr').find('td.word').text();
        var newDialogue = $(this).closest('tr').find('td.dialogue').text();
        var newPractice = $(this).closest('tr').find('td.practice').text();
        console.log(newPractice);
        save(bid, newWord, newDialogue, newPractice)
    })
});

Answer 1

我們不能在輸入和文本區域上使用.text() ，在這種情況下，我們將不得不使用函數.val() 。

我注意到您存儲了字段名，但從未使用過它，因此在嘗試獲取處於編輯模式下的字段的值時會很方便。

以下是有效的代碼段

 $("table").on("click", "[data-editable]", function(){ var $el = $(this); if ($el.find("textarea").length) return; var str = $el.text(); console.log(str); var $input = $('<textarea rows=5 style="width:500px"/>').val( str ); $el.html($input); $input.focus(); var field_name = $el.attr('data-name'); var save = function(bid, newWord, newDialogue, newPractice){ var $td = $input.val(); $input.replaceWith($td); alert("saving bid: " + bid + ", newWord: " + newWord + ", newDialougue: " + newDialogue + ", newPractice: " + newPractice); }; $($input).blur(function(){ var row = $(this).closest('tr'); var bid = row.find('td.bid').text(); var newWord = field_name == "word" ? row.find("td.word textarea").val() : row.find('td.word').text(); var newDialogue = field_name == "dialogue" ? row.find("td.dialogue textarea").val() : row.find('td.dialogue').text(); var newPractice = field_name == "practice" ? row.find("td.practice textarea").val() : row.find('td.practice').text(); save(bid, newWord, newDialogue, newPractice) }) });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="btable" class="bg-light table table-hover"> <th class= "text-center">No</th> <th class= "text-center">Word</th> <th class= "text-center">Dialogue</th> <th class= "text-center">Practice</th> <tr> <td class="bid" data-name="bid">100</td> <td class="word" data-name="word" data-editable>word 1</td> <td class="dialogue" data-name="dialogue" data-editable>dialogue 1</td> <td class="practice" data-name="practice" data-editable>practice 1</td> </tr> <tr> <td class="bid" data-name="bid">200</td> <td class="word" data-name="word" data-editable>word 2</td> <td class="dialogue" data-name="dialogue" data-editable>dialogue 2</td> <td class="practice" data-name="practice" data-editable>practice 2</td> </tr> </table>

如何跟蹤實時輸入值以提交給服務器？

問題描述

1 個解決方案

解決方案1
1 已采納 2018-07-12 13:25:28

如何跟蹤實時輸入值以提交給服務器？

問題描述

1 個解決方案

解決方案1 1 已采納 2018-07-12 13:25:28

解決方案1
1 已采納 2018-07-12 13:25:28