CODEWITHSUNDEEP
htmltwitter-bootstrappostbootstrap-modalsummernote
Deniz B.
Deniz B.

Reputation: 2562

Summernote Not Posting on Bootstrap Modal

I'm using summernote editor on Bootstrap modal and there is a problem with POST method. Summernote editor's content not posting. Everything looks fine but I'm getting this output(print_r) when I try to post it:

Array ( [title] => test title [category] => 3 [content] => [files] => )

You can find my HTML below:

 <form action="myposturl.php" method="POST" >
        <div class="modal-body">
          <div class="form-group">
            <div class="row">
              <div class="col-sm-6">
                <label>Title</label>
                <input name="title" class="form-control" />
              </div>

              <div class="col-sm-6">
                <label>Category</label>
                <select class="form-control" name="category">
                  <option value="">Please select</option>
                  <option value="1">Design</option>
                  <option value="2">Code</option>
                  <option value="3">Something else</option>
                </select>
              </div>
            </div>
          </div>

          <div class="form-group">
            <div class="row">
              <div class="col-sm-12">
                <input class="summernote" name="content" />
              </div>

            </div>
          </div>
        </div>

        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Send</button>
        </div>
     </form>

Thanks in advance.

Upvotes: 0

Views: 2160

Answers (2)

Abdul Manaf Saparuddin
Abdul Manaf Saparuddin

Reputation: 317

you can use textarea or input field. just need to apply onchange listener.

<textarea class="summernote" name="content"></textarea>

if its a textarea:

$('.summernote').summernote({
    height: 300
}).on('summernote.change', function(we, contents, $editable) {
    $(this).html(contents);
});

if its an input field:

$('.summernote').summernote({
    height: 300
}).on('summernote.change', function(we, contents, $editable) {
    $(this).val(contents);
});

Upvotes: 1

hakki
hakki

Reputation: 6527

Use div or textarea for summernote. Minimal implementation like that:

http://summernote.org/getting-started/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Summernote</title>
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> 
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 
  <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.js"></script>
</head>
<body>
  <div id="summernote"><p>Hello Summernote</p></div>
  <script>
    $(document).ready(function() {
        $('#summernote').summernote();
    });
  </script>
</body>
</html>

Upvotes: 1

Related Questions