Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Situation:

I've created a custom post type for events, visitors can sign up via a form. The form pop's up inside of a modal when the attend button is clicked. As you can see, I'm using a hidden input field with the get_title() function to send with the form so I know what event the user is attending. The code for this added to this post.

Problem

I'm showing 4 events on the page. This code always echo's the title of one event, not the title of the event that is clicked on. For example: If I click on event1, it echo's the title of event3, if I click on event2, it also echo's the title of event3.

Question

How can I get the get_title() function, or something else, to echo the title of the event that is clicked on?

<div class="col-md-6">
  <?php
  query_posts('post_type=agenda&order=DESC&posts_per_page=2');
  if ( have_posts() ) : while ( have_posts() ) : the_post();
  ?>
  <div class="event-left">
    <a class="cta-button" data-toggle="modal" data-target="#myModal">
      <i class="fa fa-chevron-right fa-lg"></i>
      <?php the_post_thumbnail('agenda-img', array('class' => 'fit')); ?>
    </a>
    <div class="event-date">
      <h1><?php echo get_post_meta($post->ID, "_date", true); ?></h1>
        <p class="month"><?php echo get_post_meta($post->ID, "_month", true); ?></p>
      <p class="location"><?php echo get_post_meta($post->ID, "_location", true); ?></p>
    </div>
    <div class="event-name"><p><?php the_title() ?></p></div>
    <div class="event-text"><?php the_content(); ?></div>
  </div>
  <?php endwhile; endif; ?>  
</div><!-- /col-->

<div class="col-md-6">
  <?php
  query_posts('post_type=agenda&order=DESC&posts_per_page=2&offset=2');
  if (have_posts()) : while (have_posts()) : the_post();
  ?>
  <div class="event-right">
    <a class="cta-button" data-toggle="modal" data-target="#myModal">
      <i class="fa fa-chevron-right fa-lg"></i>
      <?php the_post_thumbnail('agenda-img', array('class' => 'fit')); ?>
    </a>
    <div class="event-date">
      <h1><?php echo get_post_meta($post->ID, "_date", true); ?></h1>
      <p class="month"><?php echo get_post_meta($post->ID, "_month", true); ?></p>
      <p class="location"><?php echo get_post_meta($post->ID, "_location", true); ?></p>
    </div>
    <div class="event-name"><p><?php the_title() ?></p></div>
    <div class="event-text"><?php the_content(); ?></div>
  </div>
  <?php endwhile; endif; ?>  

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Attend</h4>
      </div>
      <div class="modal-body">
       <p>Call to action text</p>
       <form role="form-horizontal" id="eventform">
         <div class="form-group">
           <input type="hidden" class="form-control" id="text" value="<?php the_title() ?>" name="text">
         </div>
         <div class="form-group">
           <input type="email" class="form-control" id="email" name="email" placeholder="E-mailadres">
         </div>
         <button type="submit" id="eventform" class="btn btn-primary btn-lg">Send</button>
       </form>
       </div>
       <div class="modal-footer">
         <p>Company name</p>
       </div>
      </div>
    </div>
  </div>     
</div><!-- /col-->
share|improve this question

1 Answer 1

up vote 0 down vote accepted

Well, if you are intent on collecting the title of a post and inserting it into a hidden field, then you could use Javascript to easily grab the info. I enjoy using jQuery, so here is something you could do:

1) place the Title into a data attribute on the element that you want the user to click on.

<div class="event-name">
     <p data-title="<?php the_title() ;?>"><?php the_title() ;?></p>
</div>

2) Now add a click event to the element:

<script>

jQuery(document).ready(function() { 
    (function ($) { 

        $('.event-name p').on( 'click', function(){
            var title = this.getAttribute('data-title');
            $('#text.form-control').val(title);
        });

    })(jQuery);
});

</script>

3) If you need to force the user to click on a title before being allowed to hit the 'Send' button, I can throw you a quick snippet for that to; just respond in the comments.

share|improve this answer
    
Thank you for your time! That's a very interesting approach. I tried using .val() before but failed, so I went back to trying it with php. Thanks to you it's working now. I did make some changes to get the title to insert when the button is clicked, not the title it itself. I might have been unclear in my explanation about that. I'll post it for the sake of sharing :) –  Tim Apr 3 at 7:46
    
Can't find a good way to post it here, but I basically just moved the data-title"<?php the_title() ;?>" to <a class="cta-button> and changed the class event-name p in the jquery script to .cta-button. Now it inserts the title into the form when the button is clicked. If you have suggestions on how to post this code I'll do it :) –  Tim Apr 3 at 7:59
    
Glad you got it working. If you want to tweak anything, comment back. –  Douglas.Sesar Apr 3 at 12:53

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.