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로 내 퀼 에디터의 콘텐츠를 읽고 싶지만 어떻게 할 수 있는지 잘 모릅니다. 이 도움이
var data = {
title: $("#title-field").val(),
nickname: $("#nickname-field").val(),
body: quill.getContents();
}
희망 :
'quill-editor-t'는 숨겨진 입력이고 나는 당신이 값을주는 것을 보지 못합니까? 당신이 얻을 것으로 기대되는 가치는 무엇입니까? –
나는 코드를 테스트 해 보았습니다. 숨겨진 입력 값을 입력하면 작동하는 것 같습니다. 그것은'data'에서 값을 얻습니다. 내 생각 엔 양식을 제출할 때 그 입력 값에 어떤 값도 전달하지 않는 것입니다. – Ionut