Question

我的应用程序基于Python 3.4和Flask，但我需要使用JavaScript来动态更改隐藏字段的值。我不熟悉JavaScript，我不知道为什么我的代码不起作用。

在我的一个模板中，我有一个非常简单的付款表单，允许用户使用单选按钮选择一个积分（我删除了CSS和表单操作）：

<form>
    <input id="amount" value="price_list.price1" type="radio" name="amount">
    <input id="amount" value="price_list.price2" type="radio" name="amount">
    <input id="amount" value="price_list.price3" type="radio" name="amount">
    <input id="amount" value="price_list.price4" type="radio" name="amount">

    <input id="item_name" type="hidden" name="item_name" value="">
    <input id="item_description" type="hidden" name="item_description" value="">
    <input id="custom_int1" type="hidden" name="custom_int1" value=0>

    <input id="payment" type=submit value=Payment>
</form>

“price_list.price1”字段是指由系统设置的动态价格。这会每小时更改一次，但每个条目都指向一定数量的信用。

由于我使用的支付处理器的要求，我需要根据所做的选择更改三个隐藏字段，即item_name，item_description和custom_int1（表示购买的x个积分）。

我引用了以下答案：

Dynamically Change Multiple Hidden Form Fields
Setting a form variable value before submitting
Jquery Onclick Change hidden parameter and submit

我最终得到的是尝试使用jQuery来更改值。代码如下：

<script>
$("#amount").change(function () {
    // Get a local reference to the JQuery-wrapped select and hidden field elements:
    var sel = $(this);
    var set_name = $("input[name='item_name']");
    var set_description = $("input[name='item_description']");
    var set_creds = $("input[name='custom_int1']");

    // Get the selected option:
    var opt = sel.children("[value='" + sel.val() + "']:first");

    // Set the values
    if (opt.value=={{ price_list.price1 }}) {
        set_name.value = '1 Credit';
        set_description.value = '1 Credit';
        set_creds.value = 1;
    } else if (opt.value=={{ price_list.price5 }}) {
        set_name.value = '5 Credits';
        set_description.value = '5 Credits';
        document.getElementById('custom_int1').value = 5;
    } else if (opt.value=={{ price_list.price10 }}) {
        set_name.value = '10 Credits';
        set_description.value = '10 Credits';
        set_creds.value = 10;
    } else if (opt.value=={{ price_list.price25 }}) {
        set_name.value = '25 Credit';
        set_description.value = '25 Credit';
        set_creds.value = 25;
    } else if (get_amount.value=={{ price_list.price50 }}) {
        set_name.value = '50 Credits';
        set_description.value = '50 Credits';
        set_creds.value = 50;
    };
});
</script>

我在<body>标记之前的模板底部添加了脚本该脚本根本无法更改隐藏字段。任何和所有的帮助将不胜感激。

Answer 1

元素ID应该是唯一的（金额）。名称可以是相同的。所以修复HTML：

<input id="amount1" value="price_list.price1" type="radio" name="amount" /> <input id="amount2" value="price_list.price2" type="radio" name="amount" /> <input id="amount3" value="price_list.price3" type="radio" name="amount" /> <input id="amount4" value="price_list.price4" type="radio" name="amount" />

修复脚本：

    $(document).ready(function () {  
    $('[type=radio]').click(function () { //click is right event 
        //console.log(this.id);//for test purpose
        var set_name = $("input[name='item_name']");
        var set_description = $("input[name='item_description']");
        var set_creds = $("input[name='custom_int1']");
        switch (this.id) {//"this" is the element clicked
            case 'amount1':
                set_name.val('1 Credit');//not set_name.value='...'
                set_description.val('1 Credit');
                set_creds.val(1);
                break;
            case 'amount2':
                set_name.val('5 Credits');
                set_description.val('5 Credits');
                set_creds.val(5);
                break;
            case 'amount3':
                set_name.val('10 Credits');
                set_description.val('10 Credits');
                set_creds.val(10);
                break;
            case 'amount4':
                set_name.val('25 Credits');
                set_description.val('25 Credits');
                set_creds.val(25);
                break;
            default:
                set_name.val('');
                set_description.val('');
                set_creds.val(0);
                break;
        }

    });
});

`

Answer 2

为所有已更改的单选按钮调用change事件。要仅获取已选中的按钮，请使用：

$("#amount:checked").change(function () {
    //
}

在无线电选择上更改多个隐藏字段

2 个答案: