javascript - ajaxとjqueryを使って割引額と送金金額を計算してサイトに表示する方法

Question

こんにちは、私はこの問題と 3 日以上戦っています。私がやりたいことを説明しようと思います。

割引コードを入力します
有効コードを確認する
値が値の % であるかどうかを確認する
Ajax を使用して価値を還元する
最終的な価格を計算します (通常の価格 - 割引 + moneytransercosts)
ページに価格を表示

バウチャー1: stackoverflow1250 => 12,50
バウチャー2: stackoverflow50 => 50%
例: http://www.gitaartabs.nl/aanmelden.html?ref=plus&discount

ページ上の Javascript aanmelden.html

// Select subscription (Dutch -> abonnement)
// Globals
        var discount_value; 
        var discount_value_amount; 
        var abonnement; 
        var moneytransfer; 
        var totalprice;
        var displayprice = totalprice;

$(document).ready(function(){
$("#username").change(function() {
        var usr = $("#username").val();
        if(usr.length >= 4)
        {
        $("#status").html('<img src="js/username_checker/loader.gif" align="absmiddle">&nbsp;Checking availability...');
            $.ajax({
            type: "POST",
            url: "js/username_checker/check.php",
            data: "username="+ usr,
            success: function(msg){
                $("#status").ajaxComplete(function(event, request, settings){
                    if(msg == 'OK')
                    {
                        $("#username").removeClass('object_error'); // if necessary
                        $("#username").addClass("object_ok");
                        $(this).html('&nbsp;<img src="js/username_checker/tick.gif" align="absmiddle">');
                    }
                    else
                    {
                        $("#username").removeClass('object_ok'); // if necessary
                        $("#username").addClass("object_error");
                        $(this).html(msg);
                    }
                });
            }
          });
        }
        else{
            $("#status").html('<font color="red">&nbsp;Minimum <strong>4</strong> characters.</font>');
            $("#username").removeClass('object_ok'); // if necessary
            $("#username").addClass("object_error");
        }
    }); 

$("#discountcodeid").change(function() {
        var discountcodeid = $("#discountcodeid").val();
        var discount_value = discount.val;
        $("#discount").html('<img src="js/username_checker/loader.gif" align="absmiddle">&nbsp;Coupon valideren ...');
            $.ajax({
            type: "POST",
            url: "classes/discountcheck.php",
            data: "discountcodeid="+ discountcodeid, 
            success: function(msg){
                $("#discount").ajaxComplete(function(event, request, settings){
                    if(msg == 'OK')
                    {
                        $("#discountcodeid").removeClass('object_error'); // if necessary
                        $("#discountcodeid").addClass("object_ok");
                        $(this).html('&nbsp;<img src="js/username_checker/tick.gif" align="absmiddle">');
                    }
                    else
                    {
                        $("#discountcodeid").removeClass('object_ok'); // if necessary
                        $("#discountcodeid").addClass("object_error");
                        $(this).html(msg);
                    }
                });
            }
          });
    alert ("Gefeliciteerd je krijgt " + discount + " euro korting"); 
    }); 
}); //end document.ready function

function selectAbonnement(id)
{
    $("#type-abonnement-" + id).attr("checked", true);
    if (id == 1) { //gratis
        $("#paymentOptions").hide('fast');
        $("#discountcode").hide('fast');
        $("#adres").hide('fast');
        $("#naam").hide('fast');
        $("#aanmeldengtplus").hide('fast');
        $("#aanmeldengtgratis").show('fast');
        $("#instrument").show('fast');
        $("#invoiceamount").hide('fast');
        $("#paymentlogos").hide('fast');
        $("#displayprice").hide('fast');

    } else { //betaald
        $("#paymentOptions").show('fast');
        $("#discountcode").show('fast');
        $("#adres").show('fast');
        $("#naam").show('fast');
        $("#aanmeldengtplus").show('fast');
        $("#aanmeldengtgratis").hide('fast');
        $("#instrument").hide('fast');
        $("#invoiceamount").show('fast');
        $("#paymentlogos").show('fast');
        $("#displayprice").show('fast');
        $("#inloggen").hide('fast');


        if (id == 2) { // 1mnd abonnement
            $("#invoiceamount2").show('fast');
            $("#invoiceamount3").hide('fast');
            $("#invoiceamount4").hide('fast');
            this.abonnement=24.95;
        }
        if (id == 3) { // 3mnd abonnement
            $("#invoiceamount3").show('fast');
            $("#invoiceamount2").hide('fast');
            $("#invoiceamount4").hide('fast');
            this.abonnement=62.50;
        }
        if (id == 4) { // 6mnd abonnement
            $("#invoiceamount4").show('fast');
            $("#invoiceamount2").hide('fast');
            $("#invoiceamount3").hide('fast');
            this.abonnement=99.50;
        }
    }
}

function paymentChange(payment)
{
    if (payment == 'ideal') {
        $("#paymentIdeal").show('fast');
        $("#paymentPaypal").hide('fast');
        $("#paymentMoneytransfer").hide('fast');
        this.moneytransfer = 0;
    } else if (payment == 'paypal') {
        $("#paymentIdeal").hide('fast');
        $("#paymentPaypal").show('fast');
        $("#paymentMoneytransfer").hide('fast');
        moneytransfer = 0;
    } else if (payment == 'moneytransfer') {
        $("#paymentIdeal").hide('fast');
        $("#paymentPaypal").hide('fast');
        $("#paymentMoneytransfer").show('fast');
        this.moneytransfer = 2.50;

        // CALCULATION OF TOTAL PRICE
        this.totalprice = this.abonnement;

        if(discount_value > 0){ // KORTINGPERCENTAGE
        totalprice = abonnement + moneytransfer - (abonnement * (discount_value/100));
        }
        else if (discount_value_amount > 0){ // WAARDE KORTING
        totalprice = abonnement + moneytransfere - discount_value_amount;
        }
        else{
        totalprice = abonnement + moneytransfer ;
        }
        alert ("De Totaalprijs wordt (ivm administratiekosten)  " + totalprice + " Euro.");

    }
}


//-->
</script>

合計金額をどこに置くか

<div id="invoiceamount2" style="display:none;">
    <br />
    Product: <span class="priceproduct">1 maand Gitaartabs Plus</span><br /><br />
    <span class="pricevoor">Totaalbedrag: &euro; <span id="totalprice">24,95</span></span><br>
</div>
<div id="invoiceamount3" style="display:none;">
    <br />
    Product: <span class="priceproduct">3 maanden Gitaartabs Plus</span><br /><br />
    <span class="pricevoor">Totaalbedrag:  &euro; <span id="totalprice">62,50</span></span>
     <span class="pricevan">(Normaal &euro; 74,85</span>)<br>
    <span class="pricebesparing">Je bespaart &euro; 12,35! (15% korting)</span>
</div>
<div id="invoiceamount4" style="display:none;">
    <br />
    Product: <span class="priceproduct">3 maanden Gitaartabs Plus</span><br /><br />
    <span class="pricevoor">Totaalbedrag: &euro; <span id="totalprice">99,50</span></span>
    <span class="pricevan">(Normaal &euro; 149,70</span>)<br>
    <span class="pricebesparing">Je bespaart &euro; 50,20!  (32% korting)</span>
</div>
<br />
<hr>    
    <h2>De volgende stap - Betaling (payment)</h2>
<hr>    
<div id=betaling> <? /* IF TOTAL = 0 { GRATIS } */ ?>
<div>
    <br />
    <label><input type="radio" name="paymentname" value="ideal" checked="checked" onchange="paymentChange('ideal');">iDeal</label>
    <label><input type="radio" name="paymentname" value="paypal" onchange="paymentChange('paypal');">PayPal</label>
    <label><input type="radio" name="paymentname" value="moneytransfer" onchange="paymentChange('moneytransfer');">Overboeking (+ &euro; 2,<sup>50</sup>)</label>
    <br /><br />
</div>

check.php はこれを返します。

    $row = mysql_fetch_assoc($sql_check);
    $discount_value = $row['discount_value'];
    $discount_value_amount = $row['discount_value_amount'];

    if(mysql_num_rows($sql_check))
    { 
        if($discount_value > 0 )
        {
            // discount is percentage (10%)
            echo $discount_value;
        }
        else if($discount_value_amount > 0 )
        {
            // discount is value (24,95)
            echo $discount_value_amount; 

        }
    }
    else
    {
    echo "&nbsp;<font color=\"red\">To bad this code is not correct.</font>";
    }

このパズルを解くのに役立つことを本当に願っています:)よろしくお願いします！

1月

javascript - ajaxとjqueryを使って割引額と送金金額を計算してサイトに表示する方法

0 に答える 0

Related

Reference