多个变量

Question

我正在创建一个可以编辑现有评论的表单。 它包含一个带有旧注释（文本）的textarea和一个提交的按钮。 我只需要通过ajax将newComment发送到另一个脚本中。 此处的提醒仅向我显示旧评论，而它应该向我显示新评论。有人能给我任何线索吗？似乎按钮没有提交它或什么。但是，当我使用类型提交时，网站正在重新加载，我根本不需要。

function editComment(id, text){
    var thisId = "#" + id;
    $(thisId).replaceWith("<form>\n\
                          <textarea id='newComment'>" + text + "</textarea>\n\
                          <input type='button' id='submit' value='save'>\n\
                          </form>");

    $('#submit').click(function() {
        var newComment =  document.getElementById('newComment').innerHTML;               
        alert(newComment);
        $.ajax({
            type: 'get',
            url: '/editComment',
            data: "newComment",
        });                     
    });
}

Answer 1

尝试使用.value代替.innerHTML

function editComment(id, text){
    var thisId = "#" + id;
    $(thisId).replaceWith("<form>\n\
                          <textarea id='newComment'>" + text + "</textarea>\n\
                          <input type='button' id='submit' value='save'>\n\
                          </form>");

    $('#submit').click(function() {
        var newComment =  document.getElementById('newComment').value;               
        alert(newComment);
        $.ajax({
            type: 'get',
            url: '/editComment',
            data: "newComment",
        });                     
    });
}

jsfiddle

Answer 2

首先，您需要通过阻止其默认操作来停止表单提交。所以在你的情况下它看起来像这样。

$('#submit').on('click', function(e) {
        e.preventDefault();
        var newComment =  document.getElementById('newComment').innerHTML;               
        alert(newComment);
        $.ajax({
            type: 'get',
            url: '/editComment',
            data: "newComment",
        });                     
    });

我还建议将显示新注释的代码放在ajax调用的success函数中，因为如果它失败了，无论如何你都不想显示新注释。例如。

$('#submit').on('click', function() {
        var newComment =  document.getElementById('newComment').innerHTML;               
        alert(newComment);
        $.ajax({
            type: 'get',
            url: '/editComment',
            data: "newComment",
            success: function (data) {
                $(thisId).replaceWith("<form>\n\
                          <textarea id='newComment'>" + text + "</textarea>\n\
                          <input type='button' id='submit' value='save'>\n\
                          </form>");
            }
        });                     
    });

此外，如果你使用的是jQuery，你也可以使用jQuery。

$('#newComment').val();

Answer 3

$(document).on('click','#submit',function() {
        var newComment =  document.getElementById('newComment').innerHTML;               
        alert(newComment);
        $.ajax({
            type: 'get',
            url: '/editComment',
            data: "newComment",
        });     
       return false;                
    });

使用on event，您将动态创建提交按钮，并返回false以防止提交按钮重新加载页面

Answer 4

您可以使用表单并通过返回false来停止重新加载。 即，

return false;

在功能结束时。

例如：

 $('#submit').click(function() {
            var newComment =  document.getElementById('newComment').innerHTML;               
            alert(newComment);
              $.ajax({
                  type: 'get',
                  url: '/editComment',
                  data: "newComment",
              });
            return false;         
          });