Ändern mehrerer ausgeblendeter Felder bei der Radioauswahl

-1

Meine App basiert auf Python 3.4 und Flask, aber ich muss JavaScript verwenden, um die Werte versteckter Felder dynamisch zu ändern. Ich bin nicht vertraut mit JavaScript und ich weiß nicht, warum mein Code nicht funktioniert.Ändern mehrerer ausgeblendeter Felder bei der Radioauswahl

In einem meiner Vorlagen ich eine sehr einfache Zahlungsform haben, dass der Benutzer ein einziges Bündel von Credits Tasten Radio auswählen können (ich die CSS und Form Aktion gezupft):

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

Der " price_list.price1 "Felder beziehen sich auf einen dynamischen Preis, der vom System festgelegt wird. Dies ändert sich stündlich, aber jede der Einträge zeigt auf eine bestimmte Anzahl von Credits.

Aufgrund der Anforderungen des Zahlungsprozessors, den ich verwende, muss ich drei versteckte Felder abhängig von der getroffenen Auswahl ändern, nämlich item_name, item_description und custom_int1 (was x Anzahl der gekauften Credits darstellt).

I verwiesen folgende Antworten:

Was ich am Ende mit ist ein Versuch, jQuery zu verwenden, um die Werte zu ändern. Der Code lautet wie folgt:

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

ich das Skript an der Unterseite meiner Vorlage direkt vor dem <body> Tag hinzugefügt.
Das Skript funktioniert nicht, um die versteckten Felder überhaupt zu ändern. Jede und jede Hilfe würde sehr geschätzt werden.

Quelle

2016-04-22 artifex_knowledge

Element-IDs sollte eindeutig sein (Betrag). Namen können gleich sein. So HTML beheben:

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

Fix-Skript:

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

    }); 
});

Quelle

2016-04-22 20:38:27

Dank Alex, das funktionierte perfekt! Ich möchte auch hinzufügen, dass ich das Skript verschieben musste, bevor es funktionierte. Anfangs befand es sich am Ende des Codes unmittelbar vor dem Tag "body", aber ich musste es direkt nach dem Element "form" verschieben. –

Das Änderungsereignis wird für alle Optionsfelder aufgerufen, die geändert werden. Um nur die Schaltfläche aktiviert ist, verwenden:

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

Quelle

2016-04-22 19:19:52

Ändern mehrerer ausgeblendeter Felder bei der Radioauswahl

Antwort

Verwandte Themen