Trying to overwrite Ajax response in div on every submit

Question

I have some code here that submits a drop down menu via Ajax

$('.myForm2').on('submit', function(e) {
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: 'submissionVAT.php',
        data: $('.myForm2').serialize(),
        success: function(server_response) {
            $(".result").html(server_response);
        }
    });
});

in the file submissionVAT.php I have some code to generate a PayPal button. It is wrapped in an echo tag with a PHP variable $randomItem (ignore the name for now), which sets the price for the button, depending on what option is selected

echo "

    paypal.Button.render({

        env: 'sandbox', // sandbox | production

        style: {
            label: 'generic', // checkout | credit | pay | buynow | generic
            size: 'small', // small | medium | large | responsive
            shape: 'pill', // pill | rect
            tagline: false,
            color: 'gold' // gold | blue | silver | black
        },

        // PayPal Client IDs - replace with your own
        // Create a PayPal app: https://developer.paypal.com/developer/applications/create

        client: {
            sandbox: 'AWqKtLAN25BqUyOzBLtH8deIFj-mNFrW4fqEie1Is6n4wnO0-bXTkoU5WJNtjLQSd_Uv5ax3bEUmeuuC',
            production: 'AZw2Rw7pnweBi5exyjuPUEzC5jo3L7x2ksE8FxHzKKXm4qNhUegsJm15icAyEk3IV6gg46Nib-D5Crm1'
        },

        // Show the buyer a 'Pay Now' button in the checkout flow
        commit: true,

        // payment() is called when the button is clicked
        payment: function(data, actions) {
            // Make a call to the REST api to create the payment
            return actions.payment.create({
                payment: {
                    transactions: [{
                        amount: {
                            total: '" . $randomItem . "',  
                            currency: 'GBP'
                        }
                    }]
                }
            });
        },

        // onAuthorize() is called when the buyer approves the payment
        onAuthorize: function(data, actions) {
            return actions.payment.execute().then(function() {
                return actions.redirect();
            });
        },

        onCancel: function(data, actions) {
            return actions.redirect();
        }

    }, '#paypal-button-container');

";

?>

The button generates fine, but every time a different drop down option is selected, a new button is created below the first button. I simply want the variable to change in the first button without generating a new button every time

Any help here?

bharadwaja Gummadi bharadwaja Gummadi · Accepted Answer · 2018-01-15T11:19:31

@Thomos Evans,

If I understood you correctly, before generating or echo a button, first remove the button which is already exists.

Trying to overwrite Ajax response in div on every submit

1 Answers