Блог

Я пытаюсь создать форму оформления заказа с использованием Django, где клиент должен заполнить адрес доставки и выбрать дату. Я хочу, чтобы выбор в shippingDate изменялся на основе shippingAddress1 , shippingCity .

Какими могут быть способы ее реализации ?.

Вот форма адреса:

 class DeliveryForm(forms.Form):
    def __init__(self,date_list,*args,**kwargs):
              # call standard __init__
              super().__init__(*args,**kwargs)
              #extend __init__
              self.fields['shippingDate'] = forms.ChoiceField(choices=tuple([(date, f"{date.strftime('%d')} {months[date.strftime('%m')]}") for date in date_list]), required=True)


    shippingAddress1 = forms.CharField(max_length=250, help_text='ул. Бассейная 10',required=True, label='Адрес')
    shippingFlat = forms.CharField(max_length=250, help_text='кв.10', required=False, label='Квартира')
    shippingCity = forms.CharField(max_length=250, help_text='Киев',required=True, label='Город')
    shippingPostcode = forms.CharField(max_length=250, help_text='01011',required=True, label='Почтовый индекс')
    shippingDate = forms.DateField()
  

views.py :

 def delivery(request):
    parameters = {}
    form = DeliveryForm(date_list = get_dates())
    parameters.update({'form' : form})
    return render(request, 'delivery.html', parameters)
  

Вот HTML-код для формы (при необходимости):

 <div class="container my-auto pb-5 px-5">
    {% if not form.is_valid %}
        <div class="row mt-5">
            <div class="col-12 col-md-10 offset-md-1 col-xl-8 offset-xl-2 text-center">
                <div class="text-center " >
                    <h3 class="product_title">Доставка</h3>
                </div>
                <hr>
                <form id='deliveryForm'>
                    {% csrf_token %}
                    <p id="failure_message" style="color: red;">{{failure_message}}</p>
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-9 form-group">
                                <div class="input-group">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fas fa-map-marker-alt"></i></span>
                                        </div>
                                        {% render_field form.shippingAddress1 class ="form-control" placeholder='*Адрес (Бассейная 10)' %}
                                    </div>
                                </div>
                            </div>
                            <div class="col-3 form-group">
                                <div class="input-group">
                                    <div class="input-group">
                                        {% render_field form.shippingFlat class ="form-control" placeholder='кв.' %}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-8 form-group">
                                <div class="input-group">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-city"></i></i></span>
                                        </div>
                                        {% render_field form.shippingCity class ="form-control" placeholder='*Город' %}
                                    </div>
                                </div>
                            </div>
                            <div class="col-4 form-group">
                                <div class="input-group">
                                    <div class="input-group">
                                        {% render_field form.shippingPostcode class ="form-control" placeholder='*Индекс' %}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12 form-group">
                                <div class="input-group mb-3">
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-calendar-day"></i></span>
                                        </div>
                                        {% render_field form.shippingDate class ="form-control" %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <input type='submit' class="btn btngreen btn-block py-2 mt-3" value="Перейти к оплате"/>
                </form>
                <div class="container mt-3">
                    <div class="row">
                        <div class="col">
                            <a href="{% url 'shop' %}">
                                <button class="btn btnwhite w-100">Продолжить покупки</button>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% else %}
        <div class="row">
            
            <div class="col-12 col-md-10 offset-md-1 col-xl-8 offset-xl-2 text-center">
                <button type="button" class="btn btngreen w-100" onclick="pay('{{productName}}', '{{productPrice}}', '{{productCount}}', '{{amount}}', '{{orderReference}}', '{{orderDate}}', '{{merchantSignature}}', '{{merchantAccount}}', '{{merchantDomainName}}', '{{currency}}', '{{language}}', '{{serviceUrl}}')">Оплатить</button>
            </div>
        </div>
    {% endif %}
</div>
  

Итак, я понял, как это сделать, используя AJAX-запросы. Однако это очень сложный способ. Я обнаружил, что лучшим способом было бы использовать Django для серверной части и React JS для интерфейса (Angular или Vue также будут работать)