2016-11-25 67 views
2

我做一个简单的形式,它包含了引导和羽毛笔编辑同一时间。当我点击“发送”按钮jQuery的选择引导表单字段的值,但不鹅毛笔编辑的。另外我会将这些数据发送到我的API。我是前台新人。无法选择使用jQuery

这里是我的代码:

<!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> 

所以,当我点击 “发送” 按钮, “身体” 返回null。正如你可以看到我还设置它:body: $("#quill-editor-t").val()

我不知道我该怎么处理呢?我只是想读我的羽毛笔编辑器的使用jQuery的内容,但我不知道我能做到这一点。

+0

'鹅毛笔编辑器,t'是一个隐藏的输入和我看不到你吉维特它的值?你期望得到什么价值? –

+0

我测试你的代码在拨弄,似乎当我在隐藏输入放值继续工作。它获取'data'中的值。我的猜测是,当您提交表单时,您不会将任何值传递给该输入。 – Ionut

回答

2

你应该使用.getContents()代替鹅毛笔内容:

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

希望这有助于。

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