CODEWITHSUNDEEP
javascriptjquery
artifex_knowledge
artifex_knowledge

Reputation: 572

Change multiple hidden fields on radio selection

My app is based on Python 3.4 and Flask, but I need to use JavaScript to dynamically change the values of hidden fields. I am not familiar with JavaScript and I don't know why my code isn't working.

In one of my templates I have a very simple payment form that allows the user to select a single bundle of credits using radio buttons (I stripped out the CSS and form action):

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

The "price_list.price1" fields refer to a dynamic price, set by the system. This changes hourly, but each of the entries point to a given number of credits.

Due to the requirements of the payment processor I use, I need to change three hidden fields depending on the selection made namely item_name, item_description and custom_int1 (which represents x number of credits bought).

I referenced the following answers:

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

What I ended up with is an attempt to use jQuery to change the values. The code is as follows:

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

I added the script at the bottom of my template right before the <body> tag.
The script does not work to change the hidden fields at all. Any and all help would be greatly appreciated.

Upvotes: 0

Views: 82

Answers (2)

Alex Kudryashev
Alex Kudryashev

Reputation: 9460

  1. Element id's should be unique (amount). Names can be the same. So fix 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" />

  2. Fix script:

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

    });
});

    `

Upvotes: 2

Poul Bak
Poul Bak

Reputation: 10929

The change event is called for all radio buttons, that are changed. To get only the button that is checked, use:

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

Upvotes: 0

Related Questions