How to get the title of the item that is clicked on

1 Views

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.

Read More

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-->
Post Views: 1

Related posts

Leave a Reply

1 comment

  1. 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.