JQuery onclick function error within post loop

Question

I have a loop of posts in wordpress and I am trying to call a jquery on click show event which will show a contact form for that post when clicked.

The onclick show works only for the first post in the loop where it will display the contact form for that post no problem - but, it does not work for any of the other posts in the loop. Anyone know why this may be? The page with the post loop is https://www.salusa.co.uk/specialist-training-courses/.

The code is roughly:

<div class="archive-posts-loop">

<div class="post">
    <div class="enquire">               
        <a class="show-form">Contact Provider</a>                   
    </div>

<div class="contact-form-wrapper"  id="contact-form-wrapper" style="display:none;"> 
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>

$(document).ready(
function(){

    $(".show-form").click(function () {
        $("#contact-form-wrapper").show("fast");
    });   
    $("#close").click(function () {
        $("#contact-form-wrapper").hide("fast");
    });
});

</script>


</div><!--post-->


<div class="post">
    <div class="enquire">               
        <a class="show-form">Contact Provider</a>                   
    </div>

<div class="contact-form-wrapper"  id="contact-form-wrapper" style="display:none;"> 
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>

$(document).ready(
function(){

    $(".show-form").click(function () {
        $("#contact-form-wrapper").show("fast");
    });   
    $("#close").click(function () {
        $("#contact-form-wrapper").hide("fast");
    });
});

</script>

</div><!--post-->

</div><!--archive-post-loop-->

Thanks Abid that's helpful - I have changed to class selectors and now each of the other buttons will open the contact form. The problem is now that they all open the contact form for the first post in the loop rather than for the post that the button is position within. Any ideas? — Matt - Salusa Community
– Matt - Salusa Community, Commented Dec 29, 2017 at 23:16
Since you only have one post in the example you posted, it's hard to see what is happening. Can you show the code with two posts? Just to get an idea of what the "first post" means in context — Abid Hasan
– Abid Hasan, Commented Dec 29, 2017 at 23:31
I think csp is correct below - I am displaying an archive loop of posts and each post within the loop has the same element IDs. What I need to is dynamically set the ID within each post in the loop and then target that dynamic ID with each Jquery call — Matt - Salusa Community
– Matt - Salusa Community, Commented Dec 29, 2017 at 23:41

Moob · Accepted Answer · 2017-12-30 00:02:12Z

1

As you have a new form for each post you need to target the correct form for the post. You can listen for delegated click events and show/hide the nested form accordingly. Note that you do not need (nor should have) the script repeated for each form as shown in your example.

$(function(){

    $(".post")
        .on("click", ".show-form", function() {
            $(this).parents(".post").find(".contact-form-wrapper").show("fast");
        })  
        .on("click", ".close", function() {
            $(this).parent().hide("fast");
        });
        
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="post">
    <div class="enquire">               
        <a class="show-form">Contact Provider</a>             
    </div>
    <div class="contact-form-wrapper"  id="contact-form-wrapper" style="display:none;"> 
        [Form here] <a href="#" class="close">close</a>
    </div>
</div>

<div class="post">
    <div class="enquire">               
        <a class="show-form">Contact Provider</a>             
    </div>
    <div class="contact-form-wrapper"  id="contact-form-wrapper" style="display:none;"> 
        [Form here] <a href="#" class="close">close</a>
    </div>
</div>

<div class="post">
    <div class="enquire">               
        <a class="show-form">Contact Provider</a>             
    </div>
    <div class="contact-form-wrapper"  id="contact-form-wrapper" style="display:none;"> 
        [Form here] <a href="#" class="close">close</a>
    </div>
</div>

edited Dec 30, 2017 at 0:02

answered Dec 29, 2017 at 23:48

Moob

16.5k1 gold badge40 silver badges54 bronze badges

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

4 Comments

Matt - Salusa Community Over a year ago

Thank you Moob. Sorry should have made that clearer - the contact form is within the post itself, the issue is getting the Jquery to target the form within the current post where the trigger button is located. Currently the jquery is always opening the form from the first post I believe because they all have the same ID.

Moob Over a year ago

@Matt-SalusaCommunity oh I see you have updated your sample code in your question. I will update my answer accordingly...

Moob Over a year ago

@Matt-SalusaCommunity Please see my updated example.

Matt - Salusa Community Over a year ago

Legend thank you - that works perfectly. Appreciate the help!

csp713 · Accepted Answer · 2017-12-29 23:32:06Z

0

You are using multiple elements with the same id of contact-form-wrapper. Instead you need to make each element have a unique id, and then select that id in the respective jquery calls. Jquery will return the first matching element given a selector, which is why it only selects the first post each time.

answered Dec 29, 2017 at 23:32

csp713

4123 silver badges7 bronze badges

3 Comments

Matt - Salusa Community Over a year ago

Thank you that makes sense. I use a single template for each post in the loop hence why they all have the same ID. Do you know how I can dynamically set the ID within each new post in the loop, and then how I select that dynamic ID with the jquery function?

csp713 Over a year ago

What are you using for templating? I would expect there's a way to keep track of an interator variable and append that onto the ids.

Matt - Salusa Community Over a year ago

Using a PHP loop template within Wordpress. I'm sure there must be a way just not sure how yet. Thanks, M

Abid Hasan · Accepted Answer · 2017-12-30 00:05:40Z

0

Here is a codepen that does what you want.

https://codepen.io/abidhasan/pen/wpdoyO?editors=1111

This is the jQuery that you can use - basically look for the sibling and change its style

$(".post .show-form").on("click", function() {
  $(this).parent().siblings()[0].style.display= "block";
});

$(".post .hide-form").on("click", function() {
  $(this).parent().siblings()[0].style.display= "none";
});

answered Dec 30, 2017 at 0:05

Abid Hasan

6684 silver badges10 bronze badges

Collectives™ on Stack Overflow

JQuery onclick function error within post loop

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related