Question

情景：

我允许用户选择多个比萨饼，然后他们会转到一个页面，在那里他们可以为每个披萨选择不同的选项。这个想法是，当他们更改比萨饼的选项时，结果显示在比萨饼的结果div中。如果用户选择了3个比萨饼，那么会有很多选项，其中包含三个div，以显示每个比赛的结果，以及一个总的div。

我已成功循环并创建了选项框，但我很难看到获取动态表单值选择的最佳方法，因此我可以进行计算并运行一些ajax来填充结果div。

这是生成的表格（虽然它们可能全都采用一种形式）

<?php 
    $boxNum = 0; ///to append to form input id names
    ///start loop
    foreach(loops through array){///start loop
        $theid =  ///this successfully assigns the id
        $pizzaname =  /// this successfully assigns the pizza name              
?>
<div  id="pizza_option_<?php echo $boxNum; ?>"  >
    <form action="" method="post">
        <input name="theid_<?php echo $boxNum; ?>"  id="theid_<?php echo $boxNum; ?>"  type="text" value="<?php echo $theid; ?>" class="bk" >
        <input name=" pizzaname _<?php echo $boxNum; ?>"  id=" pizzaname _<?php echo $boxNum; ?>" type="text" value="<?php echo $pizzaname?>" class="bk">
        <select name="sizes_<?php echo $boxNum; ?>"  id="sizes_<?php echo $boxNum; ?>"  class="bk"> 
            <?php  avaliable_sizes($id);  ///fuction to get available sizes ?>
        </select>

        <select name="topping_<?php echo $boxNum; ?>"  id="topping_<?php echo $boxNum; ?>"  class="bk"> 
            <?php  avaliable_toppings($id);  ///fuction to get available toppings ?>
        </select>
    </form>
</div>  
<?php  $boxNum ++;  } // end of loop ?>

<div  id="pizza_results_<?php echo $boxNum; ?>"  >
    Display  selection choices and cost for  pizza
</div>

<div  id="grand_total_for_pizzas"  >
    Display  total of all pizzas
</div>

我发现很难找到资源，包括动态表单输入值和表单输入更改时的事件触发器。

您将从我的伪代码中看到我已将唯一id附加到输入ID，因为我认为这可用于识别一组披萨输入。如果有人能指出我正确的方向，我将不胜感激。我只要求确定比萨饼的其中一个值的变化，而不是任何计算或其他任何变化。

Answer 1

好的，经过一番挖掘，我找到了解决方案：

通过向输入添加事件：

onchange="calc(this)"

我可以将我分配的id附加到输入ID并获取其他元素的值

function calc(elem) {
//just get the number
    var id = $(elem).attr("id").match(/\d+$/);
//append the id to the element ID
    alert($('#pizzaname_'+id).val());
}

Answer 2

您必须使用event delegation来动态创建元素。

事件委托允许我们将单个事件侦听器附加到父元素，该元素将为匹配选择器的所有后代触发，无论这些后代现在是还是将来添加。

示例：

$(document).ready(function(){

    // to listen for value changes of the element with class 'bk':
    // (event is attached to the document) 
    $(document).on('change', '.bk', function(){
        var value = $(this).val();
        // do stuff when value has been changed...
    });

    // attach event to other element (must be one of the parents of the inputs)
    $('#some_parent_element').on('change', '.bk', function(){
        var value = $(this).val();
        // do stuff when value has been changed...
    });

})

我还会为每个输入添加data-id属性，以便您可以轻松获取ID：

<select data-id="<?php echo $boxNum; ?>" name="sizes_<?php echo $boxNum; ?>"  id="sizes_<?php echo $boxNum; ?>"  class="bk">

然后在jQuery中：

$(document).on('change', '.bk', function(){
    var id = $(this).data('id');
    var pizza_name = $('pizzaname_'+id).val();
});

使用PHP和jQuery进行动态表单输入的onchange计算

2 个答案: