Halnex Halnex - 4 months ago 16
Javascript Question

How to get value of fields in a repeating form with jQuery?

I have a form which is part of a

foreach()
loop that repeats on the same page for every user status that is displayed.

The form consists of a simple 'like' button that when pressed should send the data via AJAX to the controller.

At the moment, I am only trying to get the values of dynamic hidden input fields for
status_id
and
user_id
and I am failing.

Whenever I click the button on any status, it always returns the ID of the latest status in the database which is displayed first on the page.

I tried calling the ID of the form and then the class, then I tried calling the button directly and added the dynamic values inside the button tag as
data-user
and
data-status
, it always failed.

I have also tried different events on
submit
and on
click
- on click doesn't return anything but on submit returns the same status id everytime.

Also, if I wanna pass the data through AJAX, does it need a form? Can't I simply pass the data from the button on click directly?

This is the form

{!! Form::open(['action' => 'FeedController@likeStatus', 'id' => 'like_form', 'class' => 'likeform']) !!}
{!! Form::hidden('like_status', $status->id) !!}
{!! Form::hidden('user_id', Auth::user()->id) !!}
<button type="submit" class="btn btn-info btn-xs like" data-user="{{ Auth::user()->id }}" data-status="{{ $status->id }}" id="like-status">
<i class="fa fa-thumbs-up"></i> Like ({{ $likes_count }})
</button>
{!! Form::close() !!}


And this is the Javascript

$('.likeform').submit(function(e) {
e.preventDefault();

var status_id = $('.like').data('status');
var user_id = $('.like').data('user');

console.log(status_id + ' ' + user_id);
});


This is the rendered HTML in the DOM for the first 2 statuses

<form method="POST" action="http://localhost/socialnet/public/likeStatus" accept-charset="UTF-8" id="like_form" class="likeform"><input name="_token" type="hidden" value="lIs80IwNwY6Gzojefiwvdlj8d0PCCoxsZtrlGfP4">
<input name="like_status" type="hidden" value="21">
<input name="user_id" type="hidden" value="14">
<button type="submit" class="btn btn-info btn-xs like" data-user="14" data-status="21" id="like-status">
<i class="fa fa-thumbs-up"></i> Like (0)
</button>
</form>


<form method="POST" action="http://localhost/socialnet/public/likeStatus" accept-charset="UTF-8" id="like_form" class="likeform"><input name="_token" type="hidden" value="lIs80IwNwY6Gzojefiwvdlj8d0PCCoxsZtrlGfP4">
<input name="like_status" type="hidden" value="20">
<input name="user_id" type="hidden" value="14">
<button type="submit" class="btn btn-info btn-xs like" data-user="14" data-status="20" id="like-status">
<i class="fa fa-thumbs-up"></i> Like (0)
</button>
</form>

Answer

I have a feeling these two jquery lines aren't doing what you think.

var status_id = $('.like').data('status');
var user_id = $('.like').data('user');

Since you have the like class on every submit button, $('.like') contains an array of all of them, so the .data function is returning only the last one.

If you meant to get the one relative to the form being submitted, you need to change your selectors. Something like this;

var submitBtn = $(this).find('.like');
var status_id = submitBtn.data('status');
var user_id = submitBtn.data('user');

Having a proper form even when you're sending through AJAX is fine, it's a good fallback to have a form that can work if something in your script fails. At the same time, I don't know why you're bothering adding data-* attributes to your submit button when this data is available in your hidden fields, why not use those?

Comments