ラジオの選択で複数の隠しフィールドを変更する

-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（購入したクレジット数のx個を表す）の選択に応じて3つの非表示フィールドを変更する必要があります。

私は次の答え参照：私は何をしてしまったことは値を変更する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

要素IDのは（量）一意である必要があります。名前は同じにすることができます。

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

修正スクリプト：だから、HTMLを修正

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

ラジオの選択で複数の隠しフィールドを変更する

答えて

関連する問題