Prabin Parajuli Prabin Parajuli - 1 month ago 13
Ajax Question

Ajax only Working on first element of Bootstrap Modal in WordPress

I am using Bootstrap modal and Ajax as well to submit my Booking Form for different Product. The Ajax submit is working but only for for the first Product. When I try to submit the booking form for other Products, it redirects to 404 Error Page. I am trying to debug this for hours but didn't work.

Here's my code:

COMPLETE MODAL FORM

<div class="package-holder">
<div class="row">
<?php global $post; $catquery = new WP_Query( array(
'cat' => 3,
'posts_per_page' => -1,
'orderby' => 'date',
'order' => ASC
)); ?>
<?php while($catquery->have_posts()) : $catquery->the_post(); ?>
<?php $id = get_the_id(); ?>
<div class="col-sm-6 box-wrap">
<div class="row">
<div class="col-sm-7">
<div class="package-details">
<h3><?php echo $post->post_title; ?></h3>
<p><?php echo $post->post_excerpt; ?></p>
<button class="btn btn-warning" data-toggle="modal" data-target=".bs-example-modal-lg-<?php echo $id; ?>">More Details</button>

<a class="btn btn-danger" data-toggle="modal" data-target=".book-form-<?php echo $id; ?>">Book Package</a>

<div class="modal fade bs-example-modal-lg-<?php echo $id; ?>" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel"><?php echo $post->post_title; ?></h4>
</div>
<div class="modal-body">
<p><?php the_content(); ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<div class="modal bform fade book-form-<?php echo $id; ?>" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel"><?php echo $post->post_title; ?></h4>
</div>
<div class="modal-body">
<div class="form-wrap">
<form id="packageForm" method="post" class="clearfix">
<div class="row">
<div class="form-group col-sm-6">
<label for="name" class="">Name</label>
<input id="name" name="name" type="text" class="form-control" placeholder="Your Name" required>
</div>
<div class="form-group col-sm-6">
<label for="phone" class="">phone</label>
<input id="phone" name="phone" type="tel" class="form-control" placeholder="Your Phone Number" required>
</div>
<div class="form-group col-sm-6">
<label for="email" class="">email</label>
<input id="email" name="email" type="email" class="form-control" placeholder="Your Email Address" required>
</div>
<div class="form-group col-sm-6">
<label for="pref-date" class="">pref-date</label>
<input id="pref-date" name="pref_date" type="date" class="form-control" placeholder="Prefered Date" required>
</div>
<input type="hidden" name="package" value="<?php echo $post->post_title; ?>">
<div class="col-sm-12 form-group">
<label for="message" class="">message</label>
<textarea class="form-control" id="message" name="message" cols="30" rows="10" placeholder="Write your Message here" required></textarea>
</div>
</div>
<div class="col-sm-12 btn-wrap">
<button type="submit" class="btn btn-danger">Submit</button>
<input type="hidden" name="action" value="packageForm" />
<img class="gif" src="<?php echo get_stylesheet_directory_uri().'/img/oval.svg'; ?>" class="gif" width="30" alt="loading" style="display: none;">
</div>
<div id="response"></div>
</form>
</div>
</div>
</div>
</div>
</div>

</div>
</div>
<div class="col-sm-5">
<figure class="image-wrap row">
<?php the_post_thumbnail( 'full', array( 'class' => 'img-responsive' ) );
?>
</figure>
</div>
</div>
</div>
<?php endwhile; ?>
<div class="col-sm-12 box-wrap">
<?php global $post; $full_cat = new WP_Query( array(
'cat' => 4,
'posts_per_page' => 1,
'orderby' => 'date',
'order' => ASC
)); ?>
<div class="row">
<?php while($full_cat->have_posts()) : $full_cat->the_post(); ?>
<div class="col-sm-9">
<div class="package-details">
<h3><?php the_title(); ?></h3>
<p><?php the_excerpt(); ?></p>
<button class="btn btn-warning" data-toggle="modal" data-target=".bs-example-modal-lg-<?php echo $id; ?>">More Details</button>

<a class="btn btn-danger" data-toggle="modal" data-target=".book-form-<?php echo $id; ?>">Book Package</a>

<div class="modal fade bs-example-modal-lg-<?php echo $id; ?>" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel"><?php echo $post->post_title; ?></h4>
</div>
<div class="modal-body">
<p><?php the_content(); ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<div class="modal fade book-form-<?php echo $id; ?>" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Himalayan Rejuvenation Package</h4>
</div>
<div class="modal-body">
<div class="form-wrap">
<form id="FullpackageForm" method="post" class="clearfix">
<div class="row">
<div class="form-group col-sm-6">
<label for="name" class="">Name</label>
<input id="name" name="name" type="text" class="form-control" placeholder="Your Name" required>
</div>
<div class="form-group col-sm-6">
<label for="phone" class="">phone</label>
<input id="phone" name="phone" type="tel" class="form-control" placeholder="Your Phone Number" required>
</div>
<div class="form-group col-sm-6">
<label for="email" class="">email</label>
<input id="email" name="email" type="email" class="form-control" placeholder="Your Email Address" required>
</div>
<div class="form-group col-sm-6">
<label for="pref-date" class="">pref-date</label>
<input id="pref-date" name="pref_date" type="date" class="form-control" placeholder="Prefered Date" required>
</div>
<input type="hidden" name="package" value="<?php echo $post->post_title; ?>">
<div class="col-sm-12 form-group">
<label for="message" class="">message</label>
<textarea class="form-control" id="message" name="message" cols="30" rows="10" placeholder="Write your Message here" required></textarea>
</div>
</div>
<div class="col-sm-12 btn-wrap">
<button type="submit" class="btn btn-danger">Submit</button>
<input type="hidden" name="action" value="FullpackageForm" />
<img class="gif" src="<?php echo get_stylesheet_directory_uri().'/img/oval.svg'; ?>" class="gif" width="30" alt="loading" style="display: none;">
</div>
<div id="fullresponse"></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<figure class="image-wrap row">
<?php the_post_thumbnail( 'full', array( 'class' => 'img-responsive' ) );
?>
</figure>
</div>
<?php endwhile; ?>
</div>
</div>
</div>
</div>


BOOKING FORM
From above code, the ajax form is

<form id="packageForm" method="post" class="clearfix">
<div class="row">
<div class="form-group col-sm-6">
<label for="name" class="">Name</label>
<input id="name" name="name" type="text" class="form-control" placeholder="Your Name" required>
</div>
<div class="form-group col-sm-6">
<label for="phone" class="">phone</label>
<input id="phone" name="phone" type="tel" class="form-control" placeholder="Your Phone Number" required>
</div>
<div class="form-group col-sm-6">
<label for="email" class="">email</label>
<input id="email" name="email" type="email" class="form-control" placeholder="Your Email Address" required>
</div>
<div class="form-group col-sm-6">
<label for="pref-date" class="">pref-date</label>
<input id="pref-date" name="pref_date" type="date" class="form-control" placeholder="Prefered Date" required>
</div>
<input type="hidden" name="package" value="<?php echo $post->post_title; ?>">
<div class="col-sm-12 form-group">
<label for="message" class="">message</label>
<textarea class="form-control" id="message" name="message" cols="30" rows="10" placeholder="Write your Message here" required></textarea>
</div>
</div>
<div class="col-sm-12 btn-wrap">
<button type="submit" class="btn btn-danger">Submit</button>
<input type="hidden" name="action" value="packageForm" />
<img class="gif" src="<?php echo get_stylesheet_directory_uri().'/img/oval.svg'; ?>" class="gif" width="30" alt="loading" style="display: none;">
</div>
<div id="response"></div>
</form>


Handling Ajax Request via
functions.php


// Ajax for Package Form
wp_enqueue_script('jquery');

function packageForm(){

global $wpdb;
$package_name =$_POST['package'];
$name = $_POST['name'];
$phone = $_POST['phone'];
$email = $_POST['email'];
$date = $_POST['pref_date'];
$message = $_POST['message'];
$quote = 'Package Name:'.$package_name."\n\r".'Full Name: '.$name."\n\r".'Phone: '.$phone."\n\r".'Email: '.$email."\n\r".'Available Date: '.$date."\n\r".'Message: '.$message;
$to = 'prabin.b9@gmail.com'; // put your email here
$headers = 'From:Himalayan spa <info@himalayanbodycare.com>' . "\r\n"; // put user's email here or duplicate your email
$subject = 'Request For Spa';

if(wp_mail($to, $subject, $quote, $headers)===FALSE){
echo "Error";
}
else {
echo "<h3> Message Successfully Sent</h3>";
}
die();
}
add_action('wp_ajax_packageForm', 'packageForm');
add_action('wp_ajax_nopriv_packageForm', 'packageForm');


Finally my
jQuery
in
custom.js


jQuery(document).ready(function(jQuery){
jQuery('#packageForm').submit(packageSubmit);
function packageSubmit(){
var ceccForm = jQuery(this).serialize();
jQuery.ajax({
type:"POST",
url: "wp-admin/admin-ajax.php",
data: ceccForm,
success:function(data){
console.log(data);
jQuery("#response").html(data);
jQuery("#packageForm")[0].reset();
}
});
return false;
}
});
jQuery(document).ajaxStart(function(){
jQuery('.gif').show();
}).ajaxStop(function(){
jQuery('.gif').hide();
});



As Mentioned earlier, The Ajax is working only for the first element
of the product as shown in the screenshot. Please Help !!

Answer

Change all your ids to classes, select the response element based on the submit form

jQuery(document).ready(function(jQuery){
jQuery('.packageForm').submit(packageSubmit);     
        function packageSubmit(){
           var el = jQuery(this);
           var ceccForm = el.serialize();
            jQuery.ajax({
            type:"POST",
            url: "wp-admin/admin-ajax.php",
            data: ceccForm,
            success:function(data){
            console.log(data);
            el.find(".response").html(data);
            el.reset();
            }
        });
      return false;
      }
 }); 
    jQuery(document).ajaxStart(function(){
      jQuery('.gif').show();
            }).ajaxStop(function(){
      jQuery('.gif').hide();
    });