Jquery text and form submit on click inside a specific div class

Question

I have a php foreach that generates divs with class .like-button1,2,3,4.. and generate more forms form1,2,3,4...

The goal is that when users click on "like" the div shows the text message:

"You like: www.facebook.com/ferrari"

The script works correctly but the .hover function is not what I really want, because if you click on the first like in the like-button1 div and you go on the second div, the text message appears on that second div.

I can't find a right way to identify the right div, if you click the like inside div with class like-button1 show text message and submit the form in that div, without possibly avoiding the script just hovering an other div.

Thanks to all.

FB.Event.subscribe('edge.create', function (response) {

  $(".like-button1").hover(function() {                    
      $(".like-button1").text('Ti piace: ' + response);
      $("#form1").submit();
  });

  $(".like-button2").hover(function() {                    
      $(".like-button2").text('Ti piace: ' + response);
      $("#form2").submit();
  });

  $(".like-button3").hover(function() {                    
      $(".like-button3").text('Ti piace: ' + response);
      $("#form3").submit();
  });

});

No idea what you are asking, rephrase entire question

Zevi Sternlicht
– Zevi Sternlicht

2013-10-03 21:17:55 +00:00
Commented Oct 3, 2013 at 21:17 — Zevi Sternlicht
– Zevi Sternlicht, Commented Oct 3, 2013 at 21:17

Richard Christensen · Accepted Answer · 2013-10-03 21:44:00Z

2

rather than using unique classes you can do this: add to the divs a new attribute called data-target="" with the id of the form to submit. i.e.

< div class="like-button" data-target="form1" >< /div>

then the javascript will look like this:

FB.Event.subscribe('edge.create', function (response) {
  var formId = $(this).attr('data-target');
  $(".like-button").text('');            
  $(this).text('Ti piace: ' + response);
  $("#"+formId).submit();

});

This will clear the text from all classes .like-button and add text to the one that was clicked. the submit the form with the id passed in the data-target="" attribute.

writing your code this way will also shorten the amount of code you write now and in the future since you will undoubtedly be adding more like divs in the future

edited Oct 3, 2013 at 21:44

answered Oct 3, 2013 at 21:18

Richard Christensen

2,18619 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nikz Over a year ago

thanks for your kind reply, on my confused question... your code works well just doesnt resolve the main problem, I mean, how can I identify the right form without using the hover function.. since more "like-buttons" divs are generated by the foreach a user can hover an other div and send the wrong form.

Collectives™ on Stack Overflow

Jquery text and form submit on click inside a specific div class

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related