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で私のクイルエディタのコンテンツを読んでみたいですが、私はそれをどうやって行うことができないのか分かりません。
'quill-editor-t'は隠れた入力です。私はあなたに値を与えてくれますか？あなたが期待する価値は何ですか？ –
私はあなたのコードをフィドルでテストしましたが、隠れた入力に値を入れるとうまくいくようです。 'data'の値を取得します。私の推測では、あなたがフォームを提出するときにその入力に値を渡さないということです。 – Ionut