CODEWITHSUNDEEP
djangodjango-formscurrency
Tom
Tom

Reputation: 414

Django: Simple solution to prepend $ to form field

I would like to prepend a $ to an input field for a few of my forms. I don't want the $ sent to the backend as part of the input value. I have found a few stack overflow questions that suggest things like the updates below:

self.fields['buy_price'].localize = True
self.fields['buy_price'].widget.is_localized = True
self.fields['buy_price'].prefix = '$'

But none of these are working for me. I also would prefer to avoid adding 50+ lines of code, such as recommended in this S.O. Answer: How to represent Django money field with currency symbol in list template and plain decimal for edits?

HTML form:

{% url 'update-buy/' offer.id as buy_update_url %}
<form method="POST" action="{{ buy_update_url }}">
                <div class="form-group">
                    <legend class="border-bottom mb-4">Update Offer to Buy a Game</legend>
                    {% csrf_token %}
                    {{ form|crispy }}
                    {{ form.media }}
                </div>
                <input type="hidden" id="hidden_desired_game_id" name="hidden_desired_game" value="{{ offer.desired_game_id }}">
                <div class="form-group">
                    <button onclick="clearMessage()" class="post-button btn btn-outline-info" type="submit">Update</button>
                </div>
            </form>

Does anyone have a simple way to do this?

UPDATE:

I updated to use {% crispy form %} instead of {{ form|crispy }}, which is nicely showing the $. But now, the hidden input with id="hidden_desired_game_id" is not included in the POST request. For some reason, when rendering the form (screenshot below), that input is now BELOW the form, not inside it. Any idea how I can still have that included?

enter image description here

EDIT #2: I fixed the above problem by moving the input field higher up in the form. But now it looks like jquery is loading twice or something. There are 2 dropdown arrows on the right side of the Desired game field and it looks ugly. I tried using javascript to manipulate the class and played around with the css_class feature from crispy-forms, but i can't get it to only have one dropdown. Does anyone know how to fix that? Screenshot below

enter image description here

SOLUTION FOUND: FINAL UPDATE:

I was able to fix the above issue of 2 dropdowns by adding this javascript:

window.onload = function () {
            $( ".custom-select" ).removeClass("custom-select"); // Remove dupe dropdown

}

Kinda hacky but oh well! Everything is good now

Upvotes: 2

Views: 742

Answers (1)

Sumithran
Sumithran

Reputation: 6565

You can make use of Bootstrap Layout objects

forms.py 
from crispy_forms.helper import FormHelper
from crispy_forms.bootstrap import PrependedText

class ProductForm(forms.ModelForm):

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()

        self.helper.layout = Layout(
            PrependedText('buy_price', '$')
        )

instead of {{ form|crispy }} you have to use {% crispy form %}

The form field will look like

boostrap input group adon django

Upvotes: 1

Related Questions