Search code examples
phplaravellaravel-5summernote

summernote (data not saving in DB) (laravel 5.2)


I am using laravel 5.2 and integrating summernote js in the site.

I want that when user fills the form and click on save ,all the data get stored in Database.

It worked for a single field but not for two or more.

my view:

    <form action="{{route('account')}}" id="acc" class="ac" method="post">
  <div class="col-lg-3"><label>Estado</label>

  @foreach($accounts as $account)
  @if($user== $account->user)
  {!! $account->estado !!}
  <textarea  style="display:none;" name="textfield4" id="textfield4"></textarea></div>

  <div class="col-lg-2 es" id="estado"></div>


 <a span class="fa fa-heartbeat"  id="sex" aria-hidden="true">
    </span></a>
</div>
  <div class="col-lg-4"></div>
</div>
<div class="row">
  <section class="col-lg-3"><div><br><label for="textfield5">I'm Good At:</label>


   <p>{!! $account->goodat !!}</p>


   <textarea  style="display:none;" name="textfield5" id="textfield5"></textarea></div>
  <div class="col-lg-2 es" id="goodat"></div>
   @endif
  @endforeach

my JS in view:

 <script>

var edit = function() {
  $('#estado').summernote({focus: true});
   $('#goodat').summernote({focus: true});
};

var save = function() {
  var makrup = $('#estado').summernote('code');
  $('#estado').summernote('destroy');

  var makrup = $('#goodat').summernote('code');
  $('#goodat').summernote('destroy');
};

$(".acc").submit(function(e) {
     var self = this;
     e.preventDefault();


    //$('#estado').summernote('destroy');
     var estado = $('#estado').summernote('code');
     $("#textfield4").html(estado); //populate text area



      var goodat = $('#goodat').summernote('code');
     $("#textfield5").html(goodat); //populate text area
     self.submit();
     return false; 


});



</script>

my controller:

 se App\Account;

use Illuminate\Support\Facades\Auth;


class AccountController extends Controller
{

 public function account(Request $request)
    {

        $account = new Account();
        $account->estado = $request->input('textfield4');
        $account->goodat = $request->input('textfield5');
        $request->user()->accounts()->save($account);


        return redirect()->route('myplace',['username'=>Auth::user()->username]);
    }



}

Solution

  • As discussed in the chat https://chat.stackoverflow.com/rooms/122478 the actual problem was missing

    $(document).ready(function() { ... });
    

    and

    $(".acc").submit(function(e) { ... });
    

    The actual class of the form was .ac not .acc - however the id is acc

    Also the edit has to be changed since it could not be called from onclick event direktly when wrapped in the ready function.

    In the discussion you can find the markup of the page - pasting this in a full blown IDE will show tons of errors - therefore I'll provide a few more tips regarding the state of the code.

    • You have many many many duplicate id's. Do not set id's to objects that do not need to be identified by an id - there's no need to. If you have a loop you cannot simply say id="example" - each time you loop through it will create an entity with the same id. jQuery will not be able to identify them. If you want to get them all use classes - if you want to identify them directly use an incrementor in your loop
    • Missuse of Markup: You have divs in <ul> tags which should not be done.
    • </br> is wrong either use <br> or <br/>
    • a lot of not closing tags label B'day: label ( two times opening)
    • form action="http://localhost:8000/account" id="acc" class="ac" method="post" is not closing - there is no </form> for this - do not forget to call Form::close()

    Try to get a proper editor that helps you with this stuff. I'm using intellij webstorm which actually costs a little bit (is free for students).