laravel ajax仅在第一列插入数据表单注释成功

Question

Sory my english is not good, I have a problem with comment input form in my program. the comment field in the process will only succeed if the filled column is the top column. if the comment field other than the above will fail. please enlighten him

this is a successfull process in first column comment

but if I write in the comment field other than the above will fail

token and field with_id same as comment column above, whereas value from barengan_id if in inspect element differ its contents. and also comment field so empty value

and this is my code

my controller

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Barengan;
use App\BarenganComment;
use App\User;
class CariBarenganCommentController extends Controller
{
    public function __construct()
    {
        $this->middleware('auth');
    }

    public function store(Request $request,Barengan $id)
    {
        $data = [
            'user_id' => auth()->id(),               
            'barengan_id' => $id->id,
            'comment' => $request['comment'],
        ];
        return BarenganComment::create($data);
    }

    public function destroy(Barengan $barengan_id,$id)
    {
        BarenganComment::destroy($id);
    }
}

And this my form in view

<div id="form">
    <form method="post" data-toogle="validator" class="form-horzontal">
        {{ csrf_field() }}
        {{method_field ('POST')}} 
        <input type="hidden" name="id" id="id">              
        <input type="hidden" name="barengan_id" value="{{$d->id}}" id="barengan_id">
        <div class="styled-input">
          <input class="input inputkoment" type="text" placeholder="Tulis Komentar ..." name="comment" id="comment">
          <span></span> 
          <button type="submit" class="btn btn-default pull-right btn-custom-komen"><i class="fa fa-chevron-circle-right"></i></button>
        </div>        
    </form>
</div>


<script src="{{asset('js/jquery-1-11-0.js')}}"></script>

<script>
function deleteComment(id) {
    var popup = confirm("apakah anda yakin akan menghapus data?");
    var csrf_token = $('meta[name="csrf-token"]').attr('content');
    if(popup == true){                
      $.ajax({

        url: "{{ url('caribarengancomment')}}/"+id,         
        type: "POST",
        data: {'_method': 'DELETE','_token': csrf_token
      },
      success: function(data) {
        $("#contact-table").load(" #contact-table");       
        $('#alert-success').html('show');
      },
      error: function () {
        alert("Opppps gagal");
      }
    })
    }
  }


 $(function () {
    $(document).on('submit','#form form',function (e) {
      if (!e.isDefaultPrevented()) {
        var barenganId = $('#barengan_id').val();
        console.log(barenganId);
        url = "{{ url('caribarengan')}}/" + barenganId + "/comment";  
        // url= '{{route('caribarengancomment.store',$d)}}';          

        $.ajax({
          url: url,
          type: "POST",
          data: $('#form form').serialize(),
            success: function(data) {
              $("#contact-table").load(" #contact-table");              
              $('#alert-success').html('show');
            },
            error: function () {
              alert('Oops! error!');
            }
          });
        return false;
      }
    });
  });
</script>

and my model

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class BarenganComment extends Model
{
    protected $fillable = ['user_id','barengan_id','comment'];

    public function user()
    {
        return $this->belongsTo(User::class);
    }

    public function barengan()
    {
        return $this->belongsTo(Barengan::class);
    }
}

I am very tired these days stack here :(

Answer 1

you use multiple forms on page? look like id`s of inputs conflict. try this way

<form method="post" data-toogle="validator" class="form-horzontal" data-barengan="{{$d->id}}">
...
if (!e.isDefaultPrevented()) {
        var barenganId = $(this).data('barengan');