無法選擇使用jQuery

我做一個簡單的形式，它包含了引導和羽毛筆編輯同一時間。當我點擊「發送」按鈕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的內容，但我不知道我能做到這一點。

來源

2016-11-25 j. boe

'鵝毛筆編輯器，t'是一個隱藏的輸入和我看不到你吉維特它的值？你期望得到什麼價值？ –

我測試你的代碼在撥弄，似乎當我在隱藏輸入放值繼續工作。它獲取'data'中的值。我的猜測是，當您提交表單時，您不會將任何值傳遞給該輸入。 – Ionut

你應該使用.getContents()代替鵝毛筆內容：

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

希望這有助於。

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

來源

2016-11-25 08:25:25

無法選擇使用jQuery

回答

相關問題