仅限Ajax在WordPress中处理Bootstrap Modal的第一个元素

Question

我正在使用 Bootstrap模式和Ajax来提交我的不同产品的预订表格。 Ajax提交正在运行，但仅适用于第一个产品。当我尝试提交其他产品的预订表单时，会重定向到 404错误页面。我试图调试这几个小时，但没有工作。

这是我的代码：

完整的模式

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

从上面的代码中，ajax表单是

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

通过functions.php

处理Ajax请求

// 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'); 

最后我jQuery

中的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();
    });

  

如前所述，Ajax仅适用于第一个元素   截图中显示的产品。请帮助!!

Answer 1

将所有ID更改为类，根据提交表单选择响应元素

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();
    });