Изменить несколько скрытых полей на выбор радио

-1

Мое приложение основано на 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 (который представляет собой количество купленных кредитов).

Я ссылается на следующие ответы:

То, что я в конечном итоге с является попытка использовать 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> тега.
Скрипт не работает, чтобы вообще изменить скрытые поля. Любая помощь будет очень признательна.

источник

2016-04-22 artifex_knowledge

идентификатор элемента должен быть уникальным (сумма). Имена могут быть одинаковыми. Так исправить 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; 
     } 

    }); 
});

источник

2016-04-22 20:38:27

Благодаря Алекс, это работает отлично! Я также хочу добавить, что мне нужно было переместить скрипт, прежде чем он сработает. Первоначально это было в нижней части кода непосредственно перед тегом body, но мне нужно было переместить его вправо после элемента 'form'. –

Событие изменения вызывается для всех переключателей, которые изменены. Чтобы получить только кнопку, проверяется, используйте:

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

источник

2016-04-22 19:19:52

Изменить несколько скрытых полей на выбор радио

ответ

Смежные вопросы