Question

我正在尝试创建一个弹出的表单，允许用户键入注释，将他们的注释拖到他们想要的位置，然后能够保存。我想保存他们写的东西，它们放置它的位置的x / y坐标，以及它的高度/宽度。

我对编程还很陌生，所以我不确定最好的方法。我想用AJAX创建和发送表单，这样用户就不必离开页面了。

现在，我将表单的html存储在用户想要评论时调用的jquery变量中。有一个更好的方法吗？我很丢失，需要帮助!!

如果你看一下我的JSfiddle，可能会更容易理解： http://jsfiddle.net/vickera/8vpf2qzu/5/

$("#add_text").click(function () {
    var add_text_form = '<div class="draggable" id="drag"><form action="submit_form.php"><textarea name="text"></textarea><br><span id="post_info"><input type="submit" value="Submit" class="button"></form><div>';

    $('#content').append(add_text_form); //Here I'd like to add/send a form via AJAX, I think...
});

Answer 1

将您的点击处理程序更改为

$("#add_text").click(function () {
    var top = $(document).scrollTop();
    var id = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
    for (var i = 0; i < 5; i++)
    id += possible.charAt(Math.floor(Math.random() * possible.length));
    var $add_text_form = $('<div />', {
        id: id,
        class: 'draggable'
    });

    var $post_info = $('<span />', {
        id: "post_info" + id
    });

    var $text_area = $('<textarea />', {
        name: 'text'
    }).val('Share your thoughts...');

    var $form = $('<form />').append($text_area).append($('<br />')).append($post_info).append($('<input />', {
        type: 'submit',
        class: 'button'
    }).val('Submit'));

    $add_text_form.append($form);

    $('#content').append($add_text_form);

    $add_text_form.draggable({
        containment: "parent",
        cursorAt: {
            top: 20,
            left: 80
        }
    });

    $add_text_form.css("top", top, "left", "100px");

    $add_text_form.hover(function () {
        $post_info.delay(800).show();
    }, function () {
        $post_info.hide();
    });

    $form.submit(function (e) {
        e.preventDefault();
        debugger;
        $.ajax({
            type: "POST",
            url: url, //replace this with your url
            data: {
                comment_x: $text_area.offset().left,
                comment_y: $text_area.offset().top,
                comment_height: $text_area.height(),
                comment_width: $text_area.width(),
                comment: $text_area.val()
            },
            success: function () {
                //when the ajax post is successful
            },
            dataType: dataType //the datatype you are expecting the server to return
        });
    });
});

http://jsfiddle.net/8vpf2qzu/10/

将注释行更改为您的值，您应该发布正确的值

使用ajax动态创建评论表单

1 个答案: