<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
table.pay {
    width: auto;
    float: right;
    /* text-align: right; */
}
#discountDiv {
    float: right;
}
</style>
<form action="../pay/" method="POST">
            {% csrf_token %}
            <input type="radio" id="first" name="browser" onclick="myFunction(this.value)" value="20.00" checked="checked">Kurier Inpost - 20 zł<br>
            <input type="radio" name="browser" onclick="myFunction(this.value)" value="40.00">Poczta Polska - 40 zł<br>
            <input type="radio" name="browser" onclick="myFunction(this.value)" value="30.00">Kurier - 30 zł<br>
            <input type="radio" name="browser" onclick="myFunction(this.value)" value="200.00">Dostawa z większymi gabarytami - 200 zł<br>
            <br>
            <table class="pay">
                <tr>
                    <td>
                        Rabat:
                    </td>
                    <td>
                        -{{ rabats }}
                    </td>
                </tr>
                <tr>
                    <td>
                        Razem do zapłaty:
                    </td>
                    <td>
                        <span id="result" class="context"> {{ total }} zł </span>
                    </td>
                </tr>
            </table>
            <div style="clear:both"></div>
            <div id="discountDiv">
            <span>Wprowadź kod:</span>
                <input type="text"/> <button id="rabatAjax">Aktywuj</button>
            </div>
            </tr>
            <p class="hypertext"> </p>
            <p class="hypertext">
            </p>

            <input id="rabat1" name="rabat1" type="hidden" value="{{ rabats }}"/>
            <input id="price" name="price" type="hidden" value="{{ total }}"/>
            <input id="price2" name="price2" type="hidden" value=""/>
            <br>
            <div id="buttons">
                <div><a href="{% url 'Home' %}" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Powrót</a></div>
                <div><input type="submit" class="btn btn-primary btn-lg active positions" value="Zapłać"></div>
            </div>
        </form>

        <script>
            $( "#rabatAjax" ).click(function( event ) {
  event.preventDefault();
  var obj = new Object();
            obj.discount = document.getElementById("rabatAjax").value;
            var jsonString= JSON.stringify(obj);
            $.ajax({
                type: 'POST',
                url: "/endpointzrabatami",
                data: jsonString,
                dataType: 'json',
                contentType: 'application/json; charset=utf-8'
        }).done(function(data) {
            if(data.discount != null){
                console.log("tutaj dolicz discount");
            }
});
});

        </script>