不能 select 和 Jquery

Question

我正在制作一个简单的表格，其中同时包含 bootstrap 和 quill 编辑器。当我单击 "Send" 按钮时，Jquery 选择 bootstrap 表单字段的值，而不是 quill 编辑器的值。此外，我会将此数据发送到我的 API。我是前端新手。

这是我的代码：

<!DOCTYPE html>
<html>

<head>
    </style>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="https://cdn.quilljs.com/1.1.5/quill.snow.css" rel="stylesheet">
    <title></title>
</head>

<body>
    <div id="form-container" class="container">
        <form id="form">
            <div class="row">
                <div class="col-xs-14">
                    <div class="form-group">
                        <br />
                        <label for="title">Title</label>
                        <input class="form-control" name="title" type="text" placeholder="Title" id="title-field">
                    </div>
                    <div class="form-group">
                        <label for="nickanme">Nickname</label>
                        <input class="form-control" name="nickname" type="text" placeholder="Nickname" id="nickname-field">
                    </div>
                </div>
            </div>
            <div class="row form-group">
                <label for="editor">Story</label>
                <input name="editor" type="hidden" id="quill-editor-t">
                <div id="editor-container">
                </div>
            </div>
            <div class="row">
                <button class="btn btn-primary" type="submit">Send</button>
            </div>
        </form>
    </div>
    <script src="https://cdn.quilljs.com/1.1.5/quill.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script>
    var toolbarOptions = ['bold', 'italic', 'underline', 'strike'];
    var quill = new Quill('#editor-container', {
        modules: {
            toolbar: toolbarOptions
        },
        theme: 'snow',
        placeholder: 'Tell your story'
    });
    var apiUrl = "http://localhost:5000/"
    $("#form").submit(function() {
        var data = {
            title: $("#title-field").val(),
            nickname: $("#nickname-field").val(),
            body: $("#quill-editor-t").val()
        }
        console.log(data)
        console.log(JSON.stringify(data))
        $.ajax({
            type: "POST",
            url: apiUrl,
            dataType: "json",
            contentType: "application/json",
            data: JSON.stringify(data),
            success: function(data) {
                alert("Successfully sent to database")
            },
            error: function(data) {
                alert("Could not send to database");
            }
        });
        return false;

    });
    </script>
</body>

</html>

因此，当我单击 "send" 按钮时，"body" returns 为空。如您所见，我也设置了它：body: $("#quill-editor-t").val()

我不知道该如何处理？我只想用 jquery 阅读我的羽毛笔编辑器的内容，但我不知道该怎么做。

Answer 1

您应该使用 .getContents() 获取羽毛笔内容：

var data = {
    title: $("#title-field").val(),
    nickname: $("#nickname-field").val(),
    body: quill.getContents();
}

希望对您有所帮助。

并且 hidden 字段不需要 id="quill-editor-t"。

不能 select 和 Jquery

Can not select with Jquery

javascript

jquery

quill