0

I have a form in a php loop, and if there are 3 elements in the database, there are 3 forms with same name. Those forms do contain a button with the same name. So everything likes like this:

<form id="test">
  <button id="testbutton"></button>
</form>
<form id="test">
  <button id="testbutton"></button>
</form>
<form id="test">
  <button id="testbutton"></button>
</form>

The problem appears when I try to call .on or .click function from javascript. It works only once.

This is the JS code:

$(document).ready(function () {
    $('#testbutton').on("click", function() {
        function();
    });
});

The button fades out certain div's which have different names.

Sébastien
  • 11,860
  • 11
  • 58
  • 78
SaTTko
  • 1
  • 6

3 Answers3

5

ID's Must Be Unique, specifically because it will cause problems in JavaScript and CSS when you try to interact with those elements.

Give your elements a class instead :

<form>
  <button class="testbutton"></button>
</form>
<form>
  <button class="testbutton"></button>
</form>
<form>
  <button class="testbutton"></button>
</form>

Now your selector can use the class:

$('form').on("click", ".testbutton", function(){    // event will bubble up to form
Community
  • 1
  • 1
Jay Blanchard
  • 34,243
  • 16
  • 77
  • 119
  • I made classes for all. Now, when I click on the 2nd element, the first is deleted and none other work then. Is there something else that is allowing just one .on or .click call? – SaTTko Jan 30 '17 at 18:49
  • What you're asking now is a different question entirely, having to do with the function you're calling on the click. I have changed the `on()` to better reflect event bubbling, so start there. – Jay Blanchard Jan 30 '17 at 18:58
  • I don't want to submit the form, I am using buttons to hide div's. So, the problem is, I can only do it once (all buttons have the same name, like said above). – SaTTko Jan 30 '17 at 18:59
  • Again, what you're asking is another question. What you want to do it give the button an identifier related to the div which should be hidden. – Jay Blanchard Jan 30 '17 at 19:00
  • Okay, I'll try. But why does the click function work only once? I cannot hide 2 div's without refreshing the page. – SaTTko Jan 30 '17 at 19:01
  • The click function, set up with classes, works more than once. The function you have setup to hide the div's is where your problem now lies. Also make sure to remove any non-unique id, like `id="test"` on the forms. – Jay Blanchard Jan 30 '17 at 19:02
  • @SaTTko did you look at the example I posted? – Jay Blanchard Jan 30 '17 at 19:59
0

please try to bind event on button type rather than id like this

$(':button').on("click", function(){
// do other stuff
});

Please check here in fiddle

Mohtisham Zubair
  • 723
  • 5
  • 15
0

I have solved my problem with this sentence:

$(this).closest("form").find("input[name=testfield]").val()

It is a bit complicated to explain the problem, but the solution is here. Button click finds the closest form and closest value of the field required. So, my problem is gone, but thanks for all the help, you have helped me to clear out some doubts! :)

SaTTko
  • 1
  • 6