Bootstrap 表单确认后提交

Question

目前我有一个动态生成的产品列表（基于我的数据库）。我拥有的是一个也是动态创建的按钮，一个功能按钮。

因此，功能按钮的想法是让用户可以显示已点击的特定产品 he/she。

因此，单击功能按钮后，将打开一个模式，允许用户选择他们希望在何处展示产品。这可以在下面的屏幕截图中看到。

整个想法是一旦用户select选择（每月特价、新品、畅销品、幻灯片），点击绿色功能按钮，这将提交 productID、userID 和 featuredLocation 作为表单值到我的后台。

我能够以某种方式提醒我想要的值，但我意识到在第一次单击 "Feature this Product" 按钮时，行为就是我想要的。但是，如果我第二次单击另一个产品下的 "Feature this Product" 按钮，第一次和第二次都会出现运行警报，并且会继续。以下附件说明了我的意思。

展示第一个产品：

特征第二个产品：

所以这种行为只会不断叠加。目前，我的 javascript 中有：

$('.featureThisProduct').click(function () {
    $('#featureModal').modal("show");
    var productID = $(this).attr("productID");
    var adminID = $(this).attr("logAdminID");
    var featureProductAs = $('#featuredAs').val();
    $('#submitFeature').on("click",function(){
        alert (adminID);
        alert (productID);
        alert (featureProductAs);
    });
});

在我的 html 中是：

显示带有功能按钮的产品列表

<div class="col-xs-6 col-sm-3 col-md-3 col-lg-2 productGridListContainer">
    <div class="thumbnail productGridImageWrapper">
        <a class="view_product_info" productInfoID='.$productID.' productInfoTitle="'.$productTitle.'" logAdminID='.$adminID.'>
            <img src="'.$imgUrl.'" style="max-height:200px; max-width:150px;" class="productGridImage">
       </a>
    </div>
    <div class="productGridTitleWrapper">
        <h4 class="productGridTitle">'.$shortenedProductTitle.'</h4>
    </div>
    <div class="productGridAuthorWrapper">
        <p class="productGridAuthor">'.$shortenedProductAuthor.'<br /></p>
    </div>
    <div class="productGridButtonWrapper">
        <button class="btn btn-info btn-sm btn-block featureThisProduct" productID="'.$productID.'" logAdminID="'.$adminID.'">
            Feature this product
        </button>
    </div>
</div>

模态

<div id="featureModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">
                    Feature This Product
                </h4>
            </div>
            <div class="modal-body">
                <form id="featureForm" method="post">
                    <div class="form-group row">
                        <div class="col-xs-12 col-sm-12 col-m-12 col-lg-12">
                            <label for="featuredAs">Which area would you like to feature this product at?</label>
                            <select class="form-control" id="featuredAs">
                                <option value="special">Monthly Special</option>
                                <option value="best">Best Selling</option>
                                <option value="new">New Arrival</option>
                                <option value="slideshow">Slideshow</option>
                            </select>
                        </div>
                    </div>
                </form>    
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-success" id="submitFeature">Feature</button>
            </div>
        </div>
    </div>
</div>

如果你们中的任何人能在这方面帮助我，我将不胜感激。提前谢谢你，祝你有美好的一天！

Answer 1

您正在为每个功能点击中的 $('#submitFeature') 添加一个事件侦听器。避免这种情况的一种方法是将其添加到 $('.featureThisProduct') 侦听器之外。所以它会是这样的：

var productID, adminID, featureProductAs;

$('.featureThisProduct').click(function () {
    $('#featureModal').modal("show");
    productID = $(this).attr("productID");
    adminID = $(this).attr("logAdminID");
    featureProductAs = $('#featuredAs').val();
}

$('#submitFeature').on("click",function(){
     alert (adminID);
     alert (productID);
     alert (featureProductAs);
});

Bootstrap 表单确认后提交

Bootstrap Form Submit upon modal confirmation

javascript

php

forms

confirmation

twitter-bootstrap