laravel ajax insert data form comment success only in firts column - php

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');