Невозможно выбрать с помощью JQuery

Я делаю простую форму, которая содержит редактор начальной загрузки и редактора. И когда я нажимаю кнопку «Отправить», Jquery выбирает значение полей формы начальной загрузки, но не является редактором Quill. Также я отправлю эти данные в свой 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>

Так что, когда я нажимаю на кнопку «отправить», «тело» возвращает нуль. Как вы можете видеть, я также установил его: body: $("#quill-editor-t").val()

Я не знаю, как я могу справиться с этим? Я просто хочу прочитать содержимое моего редактора писем с jquery, но я не знаю, как это сделать.

источник

2016-11-25 j. boe

'quill-editor-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

ответ

Смежные вопросы